CODEWITHSUNDEEP
javascriptreactjschart.jschartjs-2.6.0
developthewebz
developthewebz

Reputation: 1937

Multiple Charts of the Same Type in ChartJS2 ReactJS - Buggy Tooltips

When I try to render a Pie Chart twice in the same component, my custom tooltips get buggy.

Inside of my container component, I am rendering two charts that look like this...

<PieChart key={1} brand={this.state.brand} data={this.state.data.dshCredit} labels={this.state.payBillsLabels} title={'Pay Bills'} toggleTotalPastDue={this.toggleTotalPastDue} />

<PieChart key={2} brand={this.state.brand} data={this.state.data.dshOrder} labels={this.state.orderStatusLabels} isRendering={this.state.isRendering} title={'Order Status'} orderPeriod={this.state.orderPeriod} dataType={this.state.orderStatus} />

<PieChart /> is a component which takes care of dynamically creating custom tooltips, and then displaying them along with the data using the ChartJS2 Pie Chart component.

componentWillMount() {
  var that = this;

  // Use custom tooltips
  Chart.pluginService.register({
    beforeRender: function (chart) {
      if (chart.config.options.showAllTooltips) {
        chart.pluginTooltips = [];
        chart.config.data.datasets.forEach(function (dataset, i) {
          chart.getDatasetMeta(i).data.forEach(function (sector, j) {
            chart.pluginTooltips.push(new Chart.Tooltip({
              _chart: chart.chart,
              _chartInstance: chart,
              _data: chart.data,
              _options: chart.options.tooltips,
              _active: [sector]
            }, chart));
          });
        });

        // turn off normal tooltips
        chart.options.tooltips.enabled = false;
      }
    }, afterDraw: function (chart, easing) {
      if (chart.config.options.showAllTooltips) {
        chart.options.tooltips.enabled = true;
        Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
          tooltip._options.callbacks.label = (tooltip, data) => {
            return that.configureTooltipLabel(tooltip, data);
          }
          tooltip.initialize();
          tooltip._options.position = 'outer';
          tooltip.update();
          tooltip.pivot();
          tooltip.transition(easing).draw();
        });
        chart.options.tooltips.enabled = false;
      }
    }
  });
}

configureTooltipLabel = (tooltip, data) => {
  var originalLabel = data.labels[tooltip.index] + ': ',
      originalData = data.datasets[0].data[tooltip.index];

  if (this.state.dataType && data.options.title.text == 'Order Status') {
    switch(this.state.dataType) {
      case 'units':
        return originalLabel + originalData + ' Units'
        break;
      case 'dollar':
        return originalLabel + '$' + originalData
        break;
       case 'total':
         return originalLabel + originalData + ' Orders'
    }
  } else {
    return originalLabel + originalData;
  }
}

render() {
    return (
      <Pie key={this.state.options.title.text} ref='chart' data={this.state.data} options={this.state.options} />
    );
}

If in the container component I only use <PieChart /> once, everything renders correctly. When I try to use it a second time, this is where the tooltips get buggy. The first pie chart seems to render properly, but the second one seems to have the tooltips of both the first chart and the second chart.

Here is a screenshot example of visually how it looks. You can see the second tooltip behind the original:

It almost appears as though everything that modifies the original Pie chart also modifies the second one. Is there some way to ensure that each Pie instance modification is independent of the other?

Upvotes: 1

Views: 1498

Answers (1)

developthewebz
developthewebz

Reputation: 1937

To anyone else having this issue, the mistake was quite silly. Since the custom tooltip configuration is happening on the { Chart } class, and not on each individual { Pie } instance, you need to make sure that you handle this as a global configuration, and not inside of the reusable component. If you do this configuration in a reusable component, every time you instantiate the component, the configuration will run and fire for the # of times you use that component. This is because the pie chart (and other ChartJS components) extend the { Chart } class in the react-chartjs-2 library.

Upvotes: 3

Related Questions