Search results

Chart Integration

You can enable the chart and visualize it against pivot data as a graphical format in pivot view itself. The chart control can be displayed individually for pivot values, and you can change the report dynamically using the field list and grouping bar. More than 15 types of charts are available. This document explains available features and settings of the chart control.

To display the chart control, set the displayOption.view property to chart.

You should inject the PivotChart module to make the chart features available in the pivot view.

The following sample displays the chart control based on the pivot report bound on it.

Source
Preview
index.tsx
index.jsx
import { IDataOptions, IDataSet, PivotViewComponent, DisplayOption, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartSettings';

class App extends React.Component<{}, {}>{

  public displayOption: DisplayOption = {
    view: 'Chart'
  } as DisplayOption;

  public chartSettings: ChartSettings = {
    chartSeries: { type: 'Column' }
  } as ChartSettings;

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotGridObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource} ><Inject services={[PivotChart]}/></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { PivotViewComponent, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.displayOption = {
            view: 'Chart'
        };
        this.chartSettings = {
            chartSeries: { type: 'Column' }
        };
        this.dataSource = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            data: pivotData,
            expandAll: false,
            filters: [],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource}><Inject services={[PivotChart]}/></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));

Data binding

You can bind both the local and remote data binding options in the control to feed data. The data property can be assigned either with the instance of DataManager or JavaScript object array collection. For more information, refer to the topic Data Binding.

Chart settings

You can customize the chart visualization by using the chartSettings property.

By default, the chart can be drawn with the pivot data populated by the first value from value axis. But, you can draw the chart by the desired value field by setting the value property to value field name in the data source.

Multiple axis

You can draw the chart with multiple value fields available in the data source by setting the enableMultiAxis property to true.

In the following sample, the chart will be drawn with both the Sold and Amount value fields available in the data source.

Source
Preview
index.tsx
index.jsx
import { IDataOptions, IDataSet, PivotViewComponent, DisplayOption, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartSettings';

class App extends React.Component<{}, {}>{

  public displayOption: DisplayOption = {
    view: 'Chart'
  } as DisplayOption;

  public chartSettings: ChartSettings = {
    enableMultiAxis: true, chartSeries: { type: 'Column' }
  } as ChartSettings;

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotGridObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource} ><Inject services={[PivotChart]}/></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { PivotViewComponent, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.displayOption = {
            view: 'Chart'
        };
        this.chartSettings = {
            enableMultiAxis: true, chartSeries: { type: 'Column' }
        };
        this.dataSource = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            data: pivotData,
            expandAll: false,
            filters: [],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource}><Inject services={[PivotChart]}/></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));

Series customization

You can customize the series of chart using the chartSeries property. The changes in the property can be reflected commonly in all the chart series.

In the following sample, the chart type and border has been changed for all the series.

Source
Preview
index.tsx
index.jsx
import { IDataOptions, IDataSet, PivotViewComponent, DisplayOption, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartSettings';

class App extends React.Component<{}, {}>{

  public displayOption: DisplayOption = {
    view: 'Chart'
  } as DisplayOption;

  public chartSettings: ChartSettings = {
    chartSeries: { chartSeries: { type: 'Column', enableTooltip: false, border: { color: '#000', width: 2 } }
    } as ChartSettings;

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotGridObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource} ><Inject services={[PivotChart]}/></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { IDataOptions, PivotViewComponent, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.displayOption = {
            view: 'Chart'
        };
        this.chartSettings = {
            chartSeries: { chartSeries: { type: 'Column', enableTooltip: false, border: { color: '#000', width: 2 } }
            },
            dataSource: IDataOptions = {
                columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
                data: pivotData,
                expandAll: false,
                filters: [],
                formatSettings: [{ name: 'Amount', format: 'C0' }],
                rows: [{ name: 'Country' }, { name: 'Products' }],
                values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
            },
            pivotGridObj: PivotViewComponent,
            render() {
                return <PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource}><Inject services={[PivotChart]}/></PivotViewComponent>;
            }
        };
    }
    render(, App) { }
}
/>, document.getElementById('pivotview'));;

You can also customize the chart series individually using the chartSeriesCreated event, which occurs after the chart series has been created. You can customize each series individually by iterating them.

In the following sample, the even series are hidden in the chart.

Source
Preview
index.tsx
index.jsx
import { IDataOptions, IDataSet, PivotViewComponent, DisplayOption, PivotChart, ChartSeriesCreatedEventArgs } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartSettings';

class App extends React.Component<{}, {}>{

  public displayOption: DisplayOption = {
    view: 'Chart'
  } as DisplayOption;

  public chartSettings: ChartSettings = {
    chartSeries: { type: 'Column' }
  } as ChartSettings;

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }

  chartSeriesCreated(args: ChartSeriesCreatedEventArgs): void {
        for (let pos:number = 0; pos < args.series.length; pos++) {
            if (pos % 2 == 0) {
                args.series[pos].visible = false;
            }
        }
  }

  public pivotGridObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource} chartSeriesCreated={this.chartSeriesCreated}><Inject services={[PivotChart]}/></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { PivotViewComponent, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.displayOption = {
            view: 'Chart'
        };
        this.chartSettings = {
            chartSeries: { type: 'Column' }
        };
        this.dataSource = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            data: pivotData,
            expandAll: false,
            filters: [],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    chartSeriesCreated(args) {
        for (let pos = 0; pos < args.series.length; pos++) {
            if (pos % 2 == 0) {
                args.series[pos].visible = false;
            }
        }
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource} chartSeriesCreated={this.chartSeriesCreated}><Inject services={[PivotChart]}/></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));

Axis customization

You can customize the axis of the chart by using the primaryXAxis and primaryYAxis properties.

In the following sample, title of y-axis and label rotation of x-axis are customized.

Source
Preview
index.tsx
index.jsx
import { IDataOptions, IDataSet, PivotViewComponent, DisplayOption, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartSettings';

class App extends React.Component<{}, {}>{

  public displayOption: DisplayOption = {
    view: 'Chart'
  } as DisplayOption;

  public chartSettings: ChartSettings = {
    chartSeries: { type: 'Column' },
    primaryXAxis: { labelRotation: 310 },
    primaryYAxis: { title: 'Y axis title' }
  } as ChartSettings;

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotGridObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource}><Inject services={[PivotChart]}/></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { PivotViewComponent, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.displayOption = {
            view: 'Chart'
        };
        this.chartSettings = {
            chartSeries: { type: 'Column' },
            primaryXAxis: { labelRotation: 310 },
            primaryYAxis: { title: 'Y axis title' }
        };
        this.dataSource = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            data: pivotData,
            expandAll: false,
            filters: [],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource}><Inject services={[PivotChart]}/></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));

Chart types

It supports 19 different types of charts as follows:

  • Line
  • Column
  • Area
  • Bar
  • StepArea
  • StackingColumn
  • StackingArea
  • StackingBar
  • StepLine
  • Pareto
  • Bubble
  • Scatter
  • Spline
  • SplineArea
  • StackingColumn100
  • StackingBar100
  • StackingArea100
  • Polar
  • Radar

Line is the default chart type. You can change the chart type by using the type property.

In the following sample, the chart type is set to bar.

Source
Preview
index.tsx
index.jsx
import { IDataOptions, IDataSet, PivotViewComponent, DisplayOption, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartSettings';

class App extends React.Component<{}, {}>{

  public displayOption: DisplayOption = {
    view: 'Chart'
  } as DisplayOption;

  public chartSettings: ChartSettings = {
    chartSeries: { type: 'Bar' }
  } as ChartSettings;

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotGridObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource} ><Inject services={[PivotChart]}/></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { PivotViewComponent, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.displayOption = {
            view: 'Chart'
        };
        this.chartSettings = {
            chartSeries: { type: 'Bar' }
        };
        this.dataSource = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            data: pivotData,
            expandAll: false,
            filters: [],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource}><Inject services={[PivotChart]}/></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));

Legend customization

You can customize the legend by using the legendSettings property. By default, the legend can be visible. You can hide it by using the legendSettings.visible property.

It supports different types of legend shapes as follows:

  • Circle
  • Rectangle
  • VerticalLine
  • Pentagon
  • InvertedTriangle
  • SeriesType
  • Triangle
  • Diamond
  • Cross
  • HorizontalLine

The default legend is SeriesType. It draws the shape based on chart type. You can change the legend shape by using the chartSeries.legendShape property.

You can set the position of legend in the chart using the legendSettings.position property.

The following are the available options to set the legend position:

  • Auto: Places the legend based on area type. This is the default.
  • Top: Displays the legend at the top of the chart.
  • Left: Displays the legend at the left of the chart.
  • Bottom: Displays the legend at the bottom of the chart.
  • Right: Displays the legend at the right of the chart.
  • Custom: Displays the legend based on the given x and y values.

In the following sample, the legend shape and its position can be customized.

Source
Preview
index.tsx
index.jsx
import { IDataOptions, IDataSet, PivotViewComponent, DisplayOption, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartSettings';

class App extends React.Component<{}, {}>{

  public displayOption: DisplayOption = {
    view: 'Chart'
  } as DisplayOption;

  public chartSettings: ChartSettings = {
    legendSettings: { position: 'Right' },
    chartSeries: { type: 'Column', legendShape: 'Pentagon' }
  } as ChartSettings;

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotGridObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource} ><Inject services={[PivotChart]}/></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { PivotViewComponent, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.displayOption = {
            view: 'Chart'
        };
        this.chartSettings = {
            legendSettings: { position: 'Right' },
            chartSeries: { type: 'Column', legendShape: 'Pentagon' }
        };
        this.dataSource = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            data: pivotData,
            expandAll: false,
            filters: [],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource}><Inject services={[PivotChart]}/></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));

User interaction

Marker and crossHair

You can enable and customize the marker and crosshair using the marker and crosshair properties, respectively.

You can enable and customize the crosshair tooltip for axes using the crosshairTooltip property.

In the following sample, the marker and crosshair can be enabled and customized.

Source
Preview
index.tsx
index.jsx
import { IDataOptions, IDataSet, PivotViewComponent, DisplayOption, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartSettings';

class App extends React.Component<{}, {}>{

  public displayOption: DisplayOption = {
    view: 'Chart'
  } as DisplayOption;

  public chartSettings: ChartSettings = {
    crosshair: { enable: true },
    chartSeries: {
        type: 'Line',
        marker: { fill: '#EEE', height: 10, width: 10, shape: 'Pentagon', visible: true }
    },
    primaryXAxis: { crosshairTooltip: { enable: true, fill: '#ff0000' } },
    primaryYAxis: { crosshairTooltip: { enable: true, fill: '#0000FF' } }
  } as ChartSettings;

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotGridObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource} ><Inject services={[PivotChart]}/></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { PivotViewComponent, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.displayOption = {
            view: 'Chart'
        };
        this.chartSettings = {
            crosshair: { enable: true },
            chartSeries: {
                type: 'Line',
                marker: { fill: '#EEE', height: 10, width: 10, shape: 'Pentagon', visible: true }
            },
            primaryXAxis: { crosshairTooltip: { enable: true, fill: '#ff0000' } },
            primaryYAxis: { crosshairTooltip: { enable: true, fill: '#0000FF' } }
        };
        this.dataSource = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            data: pivotData,
            expandAll: false,
            filters: [],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource}><Inject services={[PivotChart]}/></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));

Zooming and panning

You can customize the zooming and panning options using the zoomSettings property.

It supports four types of zooming, which can be set as follows:

The following are the three types of modes for zooming the chart:

  • x: Chart can be zoomed horizontally.
  • y: Chart can be zoomed vertically.
  • x,y: Chart can be zoomed both vertically and horizontally.

The zooming mode can be set using the mode property.

By default, if the chart is zoomed, a toolbar displays options such as Zoom, ZoomIn, ZoomOut, Pan, and Reset. You can set the desired option by using the toolbarItems property.

In the following sample, all the four types of zooming are enabled with toolbar options.

Source
Preview
index.tsx
index.jsx
import { IDataOptions, IDataSet, PivotViewComponent, DisplayOption, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartSettings';

class App extends React.Component<{}, {}>{

  public displayOption: DisplayOption = {
    view: 'Chart'
  } as DisplayOption;

  public chartSettings: ChartSettings = {
    chartSeries: {
        type: 'Column'
    },
    zoomSettings: {
        enableDeferredZooming: true,
        enableMouseWheelZooming: true,
        enablePinchZooming: true,
        enableSelectionZooming: true
    }
  } as ChartSettings;

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotGridObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource} ><Inject services={[PivotChart]}/></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { PivotViewComponent, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.displayOption = {
            view: 'Chart'
        };
        this.chartSettings = {
            chartSeries: {
                type: 'Column'
            },
            zoomSettings: {
                enableDeferredZooming: true,
                enableMouseWheelZooming: true,
                enablePinchZooming: true,
                enableSelectionZooming: true
            }
        };
        this.dataSource = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            data: pivotData,
            expandAll: false,
            filters: [],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource}><Inject services={[PivotChart]}/></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));

Tooltip

By default, the tooltip is enabled. You can customize it by using the tooltip property.

In the following sample, the default appearance of tooltip can be modified.

Source
Preview
index.tsx
index.jsx
import { IDataOptions, IDataSet, PivotViewComponent, DisplayOption, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartSettings';

class App extends React.Component<{}, {}>{

  public displayOption: DisplayOption = {
    view: 'Chart'
  } as DisplayOption;

  public chartSettings: ChartSettings = {
    chartSeries: {
        type: 'Column'
    },
    tooltip: {
        enableMarker: true,
        textStyle: { color: '#000' },
        fill: '#FFF',
        opacity: 1,
        border: { color: '#000' }
    }
  } as ChartSettings;

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotGridObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource} ><Inject services={[PivotChart]}/></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { PivotViewComponent, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.displayOption = {
            view: 'Chart'
        };
        this.chartSettings = {
            chartSeries: {
                type: 'Column'
            },
            tooltip: {
                enableMarker: true,
                textStyle: { color: '#000' },
                fill: '#FFF',
                opacity: 1,
                border: { color: '#000' }
            }
        };
        this.dataSource = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            data: pivotData,
            expandAll: false,
            filters: [],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource}><Inject services={[PivotChart]}/></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));

Grouping bar

You can enable the grouping bar by setting the showGroupingBar property to true. In the grouping bar of chart integration, the drop-down list is placed in value axis instead of buttons. The drop-down list holds the list of value fields bound in data source and it can be switched to draw the chart with the selected value field.

For the multiple axis support, the buttons will be placed in value axis instead of drop-down list.

For more information, refer to the topic Grouping Bar.

In the following sample, the grouping bar is enabled in the chart integration.

Source
Preview
index.tsx
index.jsx
import { IDataOptions, IDataSet, PivotViewComponent, DisplayOption, PivotChart, GroupingBar } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartSettings';

class App extends React.Component<{}, {}>{

  public displayOption: DisplayOption = {
    view: 'Chart'
  } as DisplayOption;

  public chartSettings: ChartSettings = {
    chartSeries: { type: 'Column' }
  } as ChartSettings;

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotGridObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource} showGroupingBar={true}><Inject services={[PivotChart, GroupingBar]}/></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { PivotViewComponent, PivotChart, GroupingBar } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.displayOption = {
            view: 'Chart'
        };
        this.chartSettings = {
            chartSeries: { type: 'Column' }
        };
        this.dataSource = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            data: pivotData,
            expandAll: false,
            filters: [],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource} showGroupingBar={true}><Inject services={[PivotChart, GroupingBar]}/></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));

Field list

You can enable both Fixed and Popup modes of field list options in the chart integration. So, you can customize the report dynamically and view the result in chart. For more information, refer to the topic Field List.

In the following sample, the Popup mode of field list is enabled in the chart integration.

Source
Preview
index.tsx
index.jsx
import { IDataOptions, IDataSet, PivotViewComponent, DisplayOption, PivotChart, FieldList } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartSettings';

class App extends React.Component<{}, {}>{

  public displayOption: DisplayOption = {
    view: 'Chart'
  } as DisplayOption;

  public chartSettings: ChartSettings = {
    chartSeries: { type: 'Column' }
  } as ChartSettings;

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotGridObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource} showFieldList={true}><Inject services={[PivotChart, FieldList]}/></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { PivotViewComponent, PivotChart, FieldList } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.displayOption = {
            view: 'Chart'
        };
        this.chartSettings = {
            chartSeries: { type: 'Column' }
        };
        this.dataSource = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            data: pivotData,
            expandAll: false,
            filters: [],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource} showFieldList={true}><Inject services={[PivotChart, FieldList]}/></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));

Export and print

The chart can be exported using the chartExport method which holds the parameters export type, file name, PDF orientation, width, and height.

The following are the four types of exporting options:

  • PNG
  • JPEG
  • SVG and
  • PDF

You can print the chart using the printChart method.

In the following sample, exporting and printing can be triggered by the Export and Print external buttons, respectively.

Source
Preview
index.tsx
index.jsx
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { IDataOptions, IDataSet, PivotViewComponent, DisplayOption, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartSettings';

class App extends React.Component<{}, {}>{

  public displayOption: DisplayOption = {
    view: 'Chart'
  } as DisplayOption;

  public chartSettings: ChartSettings = {
    chartSeries: { type: 'Column' }
  } as ChartSettings;

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotGridObj: PivotViewComponent;
  render() {
    return <div><ButtonComponent cssClass='e-primary' onClick={this.exportClick.bind(this)}>Export</ButtonComponent></div><div><ButtonComponent cssClass='e-primary' onClick={this.printClick.bind(this)}>Print</ButtonComponent></div><div><PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource} ><Inject services={[PivotChart]}/></PivotViewComponent></div>
  }

  exportClick(): void {
    this.pivotGridObj.chartExport('PNG', 'result');
  }
  printClick(): void {
    this.pivotGridObj.printChart();
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { PivotViewComponent, PivotChart } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.displayOption = {
            view: 'Chart'
        };
        this.chartSettings = {
            chartSeries: { type: 'Column' }
        };
        this.dataSource = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            data: pivotData,
            expandAll: false,
            filters: [],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    render() {
        return <div><ButtonComponent cssClass='e-primary' onClick={this.exportClick.bind(this)}>Export</ButtonComponent></div>, (<div><ButtonComponent cssClass='e-primary' onClick={this.printClick.bind(this)}>Print</ButtonComponent></div>, <div><PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' chartSettings={this.chartSettings} displayOption={this.displayOption} dataSource={this.dataSource}><Inject services={[PivotChart]}/></PivotViewComponent></div>);
    }
    exportClick() {
        this.pivotGridObj.chartExport('PNG', 'result');
    }
    printClick() {
        this.pivotGridObj.printChart();
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));