Setting Highcharts piechart chartDefaults from calling jsx file in React

Question

I am using the following syntax to render a Highcharts PieChart.

var ContainingClass = React.createClass({
  render: function() {
    return (
        <PieChart
            title={this.props.title}
            series={this.props.series}
        />
    );
  },
});

This works well, but I need to overwrite the tooltip field in PieChart. What can I change in ContainingClass to make this happen?

Edit: Here is a sample fiddle with PieChart - http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-basic/ I know that I need to set the tooltip field and could do it in plain javascript or jquery. I don't know how to pass my desired tooltip value from ContainingClass in React.

Where did the `PieChart` component come from? Does it have documentation, or could you look at the source code to answer your question? — WiredPrairie, Mar 24 '15 at 00:11
@WiredPrairie, here is a sample fiddle with `PieChart` - http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-basic/ I know that I need to set the `tooltip` field and could do it in plain javascript or jquery. I don't know how to pass my desired `tooltip` value from `ContainingClass` in React. — Eric Baldwin, Mar 24 '15 at 00:15
But where does the React component called `PieChart` come from? The example you linked is jQuery. — WiredPrairie, Mar 24 '15 at 00:57
Ah, you're right. Here is a pastie with `PieChart.jsx` It's just a `.jsx` wrapper around a jQuery version of PieChart: http://pastie.org/private/mhixvhkg1j5stgrflqlurg — Eric Baldwin, Mar 24 '15 at 03:30
Is the tooltip you want exposed in the code or in the mixin code you didn't include? You may need to add it. — WiredPrairie, Mar 24 '15 at 10:31
The tooltip is in `PieChart.jsx`. By default, it is set to `tooltip: { percentageDecimals: 1, },` and I want to add a few more fields to that hash. — Eric Baldwin, Mar 24 '15 at 10:33
More specifically, I want to add them by passing them to `PieChart.jsx` from `ContainingClass` — Eric Baldwin, Mar 24 '15 at 10:44

score 1 · Accepted Answer · answered Mar 25 '15 at 20:08

The correct answer is to pass a ChartOverride function as follows:

var ContainingClass = React.createClass({

  render: function() {
    return (
        <PieChart
            title={this.props.name}
            series={this.props.series}
            chartOverrides={this.chartOverrides()}
        />
    );
  },
  chartOverrides: function() {
    return {
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
    }
  }

});

Setting Highcharts piechart chartDefaults from calling jsx file in React

1 Answers1

Linked