Any difference between ColumnSeries and BarSeries? about react-jsx-highcharts HOT 5 CLOSED

Hi @gclarkjr5, thanks for the report. Looking into this now.

from react-jsx-highcharts.

Yes you're right, a Bar series is just an inverted Column series.

I'll see if I can make BarSeries automatically invert the chart.

from react-jsx-highcharts.

Just published 1.3.3, which will invert the chart when adding a <BarSeries />

from react-jsx-highcharts.

@whawker thanks for this! Looks like it works, however it appears something got broken in the process as now my Tooltip doesn't work. When accessing "this" for the formatter function of the tooltip, it does not return the same object compared to if i keep everything the same but put "inverted={true}" back into the Chart component.

/////////////////// (v1.3.3), works as expected /////////////////

render() {
    const self = this;
    const formatter = function () {
            console.log(this)
// logs an object with properties: color, colorIndex, key, percentage, point, series, total, x, y
     }
    return(
            <Chart inverted={true} /> // now true
            <Tooltip formatter={formatter} />
    )
}

//////////////////

vs.

/////////////////// (v1.3.3), Tooltip 'this' is different/////////////////

render() {
    const self = this;
    const formatter = function () {
            console.log(this)
// logs an object with properties: points, x, y
     }
    return(
            <Chart inverted={false} /> // now false
            <Tooltip formatter={formatter} />
    )
}

//////////////////

From what i can tell it looks like the first scenario returns the properties of that category of the bar being hovered over (I'm doing a stacked bar chart). Whereas, in the second it goes up a level and returns the properties of the entire bar as well as its children categories, not just that particular category of the bar. Granted I'm sure I could do something that could help me get what I'm looking for, but imho i prefer the functionality from the first scenario. Hope this is useful!

from react-jsx-highcharts.

Could you post a fuller example, I can't reproduce what you're referencing.

I've got

<HighchartsChart>
  <Chart />

  <XAxis id="x" categories={['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']} />

  <YAxis id="number">
	<BarSeries id="jane" name="Jane" data={[3, 2, 1, 3, 4]} />
	<BarSeries id="john" name="John" data={[2, 3, 5, 7, 6]} />
	<BarSeries id="joe" name="Joe" data={[4, 3, 3, 9, 0]} />
  </YAxis>

  <Tooltip formatter={formatter} />
</HighchartsChart>

And with <Chart inverted={true} /> and <Chart inverted={false} /> the Tooltip formatter seems to have the same this scope.

from react-jsx-highcharts.