How to render a multi-series chart in Pivot Table?

This article explains how to render a multi-series chart in React Pivot Table.

Rendering multi-series chart in Pivot Table

Rendering a multi-series chart in a pivot table can provide a detailed comparison of various data series over the same period. To achieve this, you can use the chartSeriesCreated event. This event triggers when the pivot chart series are created, and it allows you to customize the series based on your requirements.

The following code example demonstrates how to use the chartSeriesCreated event to display multiple series as different types of charts.

[index.js]

import { PivotViewComponent, FieldList, Inject, PivotChart } from '@syncfusion/ej2-react-pivotview';

function ChartIntegration() {
  let pivotObj;

  function chartOnLoad(args) {
    let selectedTheme = location.hash.split('/')[1];
    selectedTheme = selectedTheme ? selectedTheme : 'Material';
    args.chart.theme = (
      selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)
    ).replace(/-dark/i, 'Dark');
  }

  function chartSeriesCreated(args) {
    for (var i = 0; i < args.series.length; i++) {
      if (args.series[i].name == 'Solar' || args.series[i].name == 'Wind') {
        args.series[i].type = 'Line'; // Here we have displayed Solar and Wind series as Line chart.
      }
    }
  }
  return (
	<PivotViewComponent
          id="PivotView"
          ref={(d) => (pivotObj = d)}
          displayOption={{ view: 'Chart' }}
          chartSeriesCreated={chartSeriesCreated}
          chartSettings={{
            title: 'Sales Analysis',
            load: chartOnLoad.bind(this),
            chartSeries: { type: 'Column' }
          }}
        >
          <Inject services={[PivotChart, FieldList]} />
        </PivotViewComponent>
  );
}
export default ChartIntegration;

In the above code snippet, we iterate through the args.series array, which contains the chart series. We check the name property of each series, and when it matches Solar or Wind, we change the series type to Line. This change will display the specified series as line charts in the pivot table.

The following screenshot portrays the results of the code snippet mentioned above.

Screenshot

For a practical demonstration, refer to the sample of stackblitz.

Conclusion
I hope you enjoyed learning how to render a multi-series chart in React Pivot Table.

You can refer to our React Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!