Integrate Chart in Syncfusion React Grid

27 Jun 202524 minutes to read

The Grid and Chart Integration feature in Syncfusion allows users to visualize tabular data in a graphical format by linking the Grid with the Chart.This feature allows seamless integration with Charts to visualize selected data interactively. You can generate various Chart types such as bar, line, or pie directly from Grid data using the ContextMenu feature. This feature is particularly useful in scenarios where tabular data can be better understood through graphical representation.

This feature is particularly useful in dashboards, reporting tools, and data-driven applications where both tabular and visual representations of data are required.

Steps for Chart integration

To integrate Charts into your Grid, follow these steps:

Dependencies

Below is the list of minimum dependencies required to integrate Chart functionality into the Grid:

|-- dependencies
  |-- @syncfusion/ej2-grid-chart
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-dropdowns
    |-- @syncfusion/ej2-grids
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-navigations
    |-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-splitbuttons
    |-- @syncfusion/ej2-notifications
    |-- @syncfusion/ej2-calendars
    |-- @syncfusion/ej2-charts

Setup for local development

To set-up a React application, choose any of the following ways. The best and easiest way is to use the create-react-app. It sets up your development environment in JavaScript and improvise your application for production. Refer to the installation instructions of create-react-app.

npx create-react-app my-app
cd my-app
npm start

or

yarn create react-app my-app
cd my-app
yarn start

To set-up a React application in TypeScript environment, run the following command.

npx create-react-app my-app --template typescript
cd my-app
npm start

Besides using the npx package runner tool, also create an application from the npm init. To begin with the npm init, upgrade the npm version to npm 6+.

npm init react-app my-app
cd my-app
npm start

Add Syncfusion React packages

Syncfusion React component packages are available at npmjs.com. To use Syncfusion React components in your project, install the corresponding npm packages.

To install the Grid and Grid-Chart package, use the following command:

npm install @syncfusion/ej2-react-grids
npm install @syncfusion/ej2-grid-chart

Import the Syncfusion CSS styles

Syncfusion React controls come with built-in themes, which are available in the installed packages. It’s easy to adapt the Syncfusion React controls to match the style of your application by referring to one of the built-in themes.

To apply a theme, you can import the required CSS files from the node_modules directory. For example, to use the Material theme, add the following imports to the src/App.css file:

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-react-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grid-chart/styles/material.css';

Chart integration via Context Menu in Grid

This section explains how to dynamically render Charts based on user interactions within the Syncfusion React Grid using the context menu. Users can right-click on selected rows and choose from various Chart types such as bar, pie, line Charts etc to visualize the data instantly. This feature enhances interactivity and provides a seamless analytical experience.

For example, in a sales dashboard, you can select sales records for specific products and instantly view a comparative bar or pie Chart illustrating online sales versus retail sales or revenue trends over several month. This functionality helps improve decision-making by providing immediate visual feedback.

Steps to be followed to integrate Chart into Grid via contextmenu:

Step 1. Inject required modules:

Import the required modules from the Grid,Chart and GridChart packages, and inject the ContextMenu module into the Grid:

import { ColumnDirective, ColumnsDirective, ContextMenuClickEventArgs, ContextMenu, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { GridChart } from '@syncfusion/ej2-grid-chart';

function App() {
  return (
    <div>
      <GridComponent>
        <ColumnsDirective>
        </ColumnsDirective>
        <Inject services={[ContextMenu]} />
      </GridComponent>
    </div>
  );
}

export default App;
import { ColumnDirective, ColumnsDirective, ContextMenuClickEventArgs, ContextMenu, GridComponent, Inject, SelectionSettingsModel} from '@syncfusion/ej2-react-grids';
import { GridChart, CategorySeries, ChartChanges} from '@syncfusion/ej2-grid-chart';
import { ChartModel } from '@syncfusion/ej2-charts';

function App() {
  return (
    <div>
      <GridComponent>
        <ColumnsDirective>
        </ColumnsDirective>
        <Inject services={[ContextMenu]} />
      </GridComponent>
    </div>
  );
}

export default App;

Step 2: Define Chart options to Grid Context Menu:

Add Chart visualization options as context menu items within the Grid configuration using contextMenuItems property. These items allow you to right-click on selected rows and choose a Chart type to visualize the data.

contextMenuItems={[
  'Bar', 'StackingBar', 'StackingBar100',
  'Pie', 'Column', 'StackingColumn', 'StackingColumn100',
  'Line', 'StackingLine', 'StackingLine100',
  'Area', 'StackingArea', 'StackingArea100', 'Scatter'
]}

Step 3: Initialize GridChart instance on Grid creation:

Inside the Grid’s created event, instantiate a GridChart object. This instance will be used to render Charts dynamically based on the selected Grid data.

function created() {
  gridChart = new GridChart({
    enableRtl: grid.enableRtl,
    locale: grid.locale,
  });
}
function created() {
  gridChart = new GridChart({
    enableRtl: (grid as GridComponent).enableRtl,
    locale: (grid as GridComponent).locale,
  });
}

This ensures that the Chart instance is ready as soon as the Grid is initialized, allowing seamless interaction through the context menu.

Step 4: Handle context menu click to render Chart:

Use the contextMenuClick event to detect which Chart type was selected and render the Chart accordingly using the gridChart.render() method.

ContextMenuClick event passes the below arguments:

  • args.chartType: The selected Chart type.

  • args.gridInstance: The current Grid instance.

  • args.records: The selected data records to be visualized in the Chart.

  • Use the gridChart.render to render the Chart. It accepts three arguments discussed below:

    • chartArgs: Contains Grid instance, Chart type, and selected records.

    • chartModel: This specifies various Chart configurations related to the appearance and behavior of the Chart. The model allows you to configure axes, labels, legends, tooltips, and other Chart attributes. Refer to Syncfusion’s Chart Model for detailed configurations, options, and customization possibilities.

    • categorySeries: This specifies the fields in your data used for categories and series in the Chart.

      • Category fields: Define the grouping axis.
      • Series fields: Define the actual values plotted on the Chart.
function contextMenuClick(args) 
{
  if (args.chartType) 
  {
    // Prepare the Chart arguments including the Grid instance, Chart type, and records to plot.
    const chartArgs = {
      gridInstance: args.gridInstance,
      chartType: args.chartType,
      records: args.records
    };

    // Set up the Chart model configurations.
    const chartModel = {
      primaryXAxis: {
        valueType: 'Category',
        labelRotation: 315
      }
    };

    // Combine both Chart models into a single model for rendering.
    const model = {
      chart: chartModel,
      accumulationChart: {}
    };

    // Determine fields for category and series data in the Chart.
    const categorySeries = {
      category: ['Product', 'Month'],
      series: ['Online', 'Retail']
    };

    // Render the Chart using the configured arguments and models.
    // The render function uses the defined chartArgs, model, and categorySeries to display the Chart.
    gridChart.render(chartArgs, model, categorySeries);
  }
}
function contextMenuClick(args: ContextMenuClickEventArgs) 
{
  if (args.chartType) 
  {
    const chartArgs = {
      gridInstance: (args.gridInstance as GridComponent),
      chartType: args.chartType,
      records: (args.records as SalesRecord[])
    };

    // Set up the Chart model configurations.
    const chartModel: ChartModel = {
      primaryXAxis: {
        valueType: 'Category',
        labelRotation: 315
      }
    };

    // Combine both Chart models into a single model for rendering.
    const model: ChartChanges = {
      chart: chartModel,
      accumulationChart: {}
    };

    // Determine fields for category and series data in the Chart.
    const categorySeries: CategorySeries = {
      category: ['Product', 'Month'],
      series: ['Online', 'Retail']
    };

    // Render the Chart using the configured arguments and models.
    // The render function uses the defined chartArgs, model, and categorySeries to display the Chart.
    (gridChart as GridChart).render(chartArgs, model, categorySeries);
  }
}

The following complete example demonstrates how to integrate Charts into a Grid context menu using the contextMenuClick event with gridChart.render method:

import { ColumnDirective, ColumnsDirective, ContextMenu, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { GridChart } from '@syncfusion/ej2-grid-chart';
import * as React from 'react';
import { salesDatas } from './datasource';

function App() {
  let grid;
  let gridChart;
  const selectionSettings = { type: 'Multiple' };

  function created() {
    gridChart = new GridChart({
      enableRtl: grid.enableRtl,
      locale: grid.locale,
    });
  }

  function contextMenuClick(args) {
    if (args.chartType) {
      const chartArgs = {
        gridInstance: args.gridInstance,
        chartType: args.chartType,
        records: args.records
      };
      const chartModel = {
        primaryXAxis: {
          valueType: 'Category',
          labelRotation: 315
        }
      };
      const model = {
        chart: chartModel,
        accumulationChart: {}
      };
      const categorySeries = {
        category: ['Product', 'Month'],
        series: ['Online', 'Retail']
      };
      gridChart.render(chartArgs, model, categorySeries);
    }
  }

  return (
    <div>
      <GridComponent
        dataSource={salesDatas}
        height={420}
        ref={g => (grid = g)}
        created={created}
        contextMenuClick={contextMenuClick}
        allowSelection={true}
        contextMenuItems={[
          'Bar', 'StackingBar', 'StackingBar100',
          'Pie', 'Column', 'StackingColumn', 'StackingColumn100',
          'Line', 'StackingLine', 'StackingLine100',
          'Area', 'StackingArea', 'StackingArea100', 'Scatter'
        ]}
        selectionSettings={selectionSettings}
      >
        <ColumnsDirective>
          <ColumnDirective type="checkbox" width="50" />
          <ColumnDirective field="Product" headerText="Product" width="90" />
          <ColumnDirective field="Month" headerText="Month" width="180" />
          <ColumnDirective field="Online" headerText="Online" width="120" textAlign="Right" />
          <ColumnDirective field="Retail" headerText="Retail" width="110" textAlign="Right" />
          <ColumnDirective field="Total" headerText="Total" width="110" textAlign="Right" />
        </ColumnsDirective>
        <Inject services={[ContextMenu]} />
      </GridComponent>
    </div>
  );
}

export default App;
import { ColumnDirective, ColumnsDirective, ContextMenuClickEventArgs, ContextMenu, GridComponent, Inject , SelectionSettingsModel } from '@syncfusion/ej2-react-grids';
import { GridChart, CategorySeries, ChartChanges} from '@syncfusion/ej2-grid-chart';
import { ChartModel } from '@syncfusion/ej2-charts';
import * as React from 'react';
import { salesDatas } from './datasource';

interface SalesRecord {
  Product: string;
  Month: string;
  Online: number;
  Retail: number;
  Total: number;
}

function App() {
  let grid: GridComponent | null;
  let gridChart: GridChart;
  const selectionSettings: SelectionSettingsModel = { type: 'Multiple' };

  function created() {
    gridChart = new GridChart({
      enableRtl: (grid as GridComponent).enableRtl,
      locale: (grid as GridComponent).locale,
    });
  }

  function contextMenuClick(args: ContextMenuClickEventArgs) {
    if (args.chartType) {
      const chartArgs = {
        gridInstance: (args.gridInstance as GridComponent),
        chartType: args.chartType,
        records: (args.records as SalesRecord[])
      };
      const chartModel: ChartModel = {
        primaryXAxis: {
          valueType: 'Category',
          labelRotation: 315
        }
      };
      const model: ChartChanges = {
        chart: chartModel,
        accumulationChart: {}
      };
      const categorySeries: CategorySeries = {
        category: ['Product', 'Month'],
        series: ['Online', 'Retail']
      };
      (gridChart as GridChart).render(chartArgs, model, categorySeries);
    }
  }

 return (
  <div>
    <GridComponent
      dataSource={salesDatas}
      height={420}
      ref={g => (grid = g)}
      created={created}
      contextMenuClick={contextMenuClick}
      allowSelection={true}
      contextMenuItems={[
        'Bar', 'StackingBar', 'StackingBar100',
        'Pie', 'Column', 'StackingColumn', 'StackingColumn100',
        'Line', 'StackingLine', 'StackingLine100',
        'Area', 'StackingArea', 'StackingArea100', 'Scatter'
      ]}
      selectionSettings={selectionSettings}
    >
      <ColumnsDirective>
        <ColumnDirective type="checkbox" width="50" />
        <ColumnDirective field="Product" headerText="Product" width="90" />
        <ColumnDirective field="Month" headerText="Month" width="180" />
        <ColumnDirective field="Online" headerText="Online" width="120" textAlign="Right" />
        <ColumnDirective field="Retail" headerText="Retail" width="110" textAlign="Right" />
        <ColumnDirective field="Total" headerText="Total" width="110" textAlign="Right" />
      </ColumnsDirective>
      <Inject services={[ContextMenu]} />
    </GridComponent>
  </div>
);

}

export default App;
export const salesDatas = [
  { Product: "Laptop", Month: "January", Online: 1500, Retail: 2000, Total: 3500 },
  { Product: "Mobile", Month: "February", Online: 1600, Retail: 2500, Total: 4100 },
  { Product: "Tablet", Month: "March", Online: 1800, Retail: 2200, Total: 4000 },
  { Product: "Smartwatch", Month: "April", Online: 2000, Retail: 2100, Total: 4100 },
  { Product: "Camera", Month: "May", Online: 2200, Retail: 2300, Total: 4500 },
  { Product: "Headphones", Month: "June", Online: 1700, Retail: 1800, Total: 3500 },
  { Product: "Smart Speaker", Month: "July", Online: 1900, Retail: 2000, Total: 3900 },
  { Product: "Printer", Month: "August", Online: 2100, Retail: 1900, Total: 4000 },
  { Product: "Monitor", Month: "September", Online: 2000, Retail: 1900, Total: 3900 },
  { Product: "Keyboard", Month: "October", Online: 1600, Retail: 1700, Total: 3300 },
  { Product: "Mouse", Month: "November", Online: 1700, Retail: 1600, Total: 3300 },
  { Product: "Router", Month: "December", Online: 1800, Retail: 2000, Total: 3800 }
];
export const salesDatas: Object[] = [
  { Product: "Laptop", Month: "January", Online: 1500, Retail: 2000, Total: 3500 },
  { Product: "Mobile", Month: "February", Online: 1600, Retail: 2500, Total: 4100 },
  { Product: "Tablet", Month: "March", Online: 1800, Retail: 2200, Total: 4000 },
  { Product: "Smartwatch", Month: "April", Online: 2000, Retail: 2100, Total: 4100 },
  { Product: "Camera", Month: "May", Online: 2200, Retail: 2300, Total: 4500 },
  { Product: "Headphones", Month: "June", Online: 1700, Retail: 1800, Total: 3500 },
  { Product: "Smart Speaker", Month: "July", Online: 1900, Retail: 2000, Total: 3900 },
  { Product: "Printer", Month: "August", Online: 2100, Retail: 1900, Total: 4000 },
  { Product: "Monitor", Month: "September", Online: 2000, Retail: 1900, Total: 3900 },
  { Product: "Keyboard", Month: "October", Online: 1600, Retail: 1700, Total: 3300 },
  { Product: "Mouse", Month: "November", Online: 1700, Retail: 1600, Total: 3300 },
  { Product: "Router", Month: "December", Online: 1800, Retail: 2000, Total: 3800 }
];

Enable export functionality in GridChart

The export functionality in GridChart allows Charts to be saved or shared externally in various formats. This is particularly useful for preserving visualized data or including Charts in reports and presentations.

To enable this feature, set the allowExport property to true when creating the GridChart instance. Once enabled, an export option appears in the Chart popup toolbar, allowing the Chart to be exported in various formats such as PDF, CSV, Print, JPEG, XLSX, SVG, and PNG.

The following code snippet demonstrates how to enable export functionality in GridChart:

gridChart = new GridChart({
  allowExport: true
});

Enable property panel in GridChart

The property panel in GridChart provides a built-in interface to modify Chart settings dynamically at runtime. By default, the property panel is disabled. To enable it, set the enablePropertyPanel option to true during the instantiation of the GridChart object. Here’s how to do it:

gridChart = new GridChart({
  enablePropertyPanel: true
});

When enabled, the property panel appears alongside the Chart popup and offers three main configuration sections:

  • Chart Types: Choose from a variety of Chart types, including Column, Line, Pie, and others.

  • Chart Data: Configure the category axis and series fields for data visualization.

  • Formatting Options: Adjust styling properties such as Chart style, title style, legend appearance, series settings, and axes formatting.

    • Chart Style:

      • Margin : Adjust the margins around the Chart (top, bottom, left, right) for better layout spacing.
      • Color: Set distinct colors for different Chart elements to improve visual clarity.

    • Title Style

      • Legend - Toggle the visibility of the legend and customize its font, size, color, and position.
      • Series - Enable/disable tooltips and customize Series color and data labels based on categories such as online, retail, or revenue.

    • Axes: - Select axes as either category or value type, and customize:

      • Reverse Order to change the data sequence.
      • Title: Adjust text, font, size, color, and rotation.
      • Label: Modify text, font, size, color, and rotation for better label presentation.

customize the Chart model:

You can customize the Chart by defining a chartModel object in the chart property of the model object within the contextMenuClick event .This allows you to configure various Chart properties such as axes, margins, tooltips, titles, and more. Additionally, you can use the events of the Chart within the chartModel configuration to apply further customizations when the Chart is rendered.

To customize Accumulation Charts (such as Pie), use the accumulationChart property of the model object. This property allows you to configure Chart options like titles, legends, data labels, and visual styles tailored for accumulation-type visualizations. You can also use Accumulation Chart events to apply additional customizations when the Chart is rendered.

The following code snippets demonstrate how to achieve this:

function contextMenuClick(args) 
{
  if (args.chartType) {
    const chartArgs = {
       gridInstance: args.gridInstance,
      chartType: args.chartType,
      records: args.records
    };
    const chartModel = {
      primaryXAxis: {
        valueType: 'Category',
        labelRotation: 315
      },
      margin: {
        top: 20,
        bottom: 20,
        right: 20,
        left: 20
      },
      tooltip: {
        enable: true,
        textStyle: {
          size: '16px',
          fontFamily: 'Arial, Helvetica, sans-serif'
        }
      },
      title: 'Sales Data',
      titleStyle: {
        size: '24px',
        fontFamily: 'Arial, Helvetica, sans-serif',
        fontWeight: 'Bold'
      },
      subTitle: 'Sales data for various products over the months',
      load: (args) => {
        if (args.chart.titleStyle) {
          args.chart.titleStyle.color = '#1976d2';
        }
      }
    };
    const accumulationChartModel = {
      title :'Sales Distribution'
    };
    const model = {
      chart: chartModel,
      accumulationChart: accumulationChartModel
    };
  }
}
function contextMenuClick(args: ContextMenuClickEventArgs) {
  if (args.chartType) {
    const chartModel: ChartModel = {
      primaryXAxis: {
        valueType: 'Category',
        labelRotation: 315
      },
      margin: {
        top: 20,
        bottom: 20,
        right: 20,
        left: 20
      },
      tooltip: {
        enable: true,
        textStyle: {
          size: '16px',
          fontFamily: 'Arial, Helvetica, sans-serif'
        }
      },
      title: 'Sales Data',
      titleStyle: {
        size: '24px',
        fontFamily: 'Arial, Helvetica, sans-serif',
        fontWeight: 'Bold'
      },
      subTitle: 'Sales data for various products over the months',
      load: (args: ILoadedEventArgs) => {
        if (args.chart.titleStyle) {
          args.chart.titleStyle.color = '#1976d2';
        }
      }
    };
    const accumulationChartModel: AccumulationChartModel = {
      title :'Sales Distribution'
    }

    // Combine both chart models into a single object.
    const model: ChartChanges = {
      chart: chartModel,
      accumulationChart: accumulationChartModel
    };
  }
}

You can also programmatically update the Chart’s appearance using the updateChartSettings event provided by the GridChart integration. This event is triggered when you modify Chart properties through the Chart popup’s property panel. This is useful for applying custom themes, adjusting axis settings, or modifying series styles.

The following code snippet demonstrates how to dynamically customize chart margins and restrict their values to a minimum of 20 using the updateChartSettings event.

function created() {
  gridChart = new GridChart({
    enablePropertyPanel: true,
    allowExport: true,
    enableRtl: grid.enableRtl,
    locale: grid.locale,
    updateChartSettings: updateChartSettings
  });
}

function updateChartSettings(args) 
{
  const chart = args.changes.chart;
  if (!chart) return;
  const chartMargin = chart.margin;

  // Restrict margin values to minimum 20.
  if (chartMargin && !isNullOrUndefined(chartMargin)) {
    if (chartMargin.top < 20) chartMargin.top = 20;
    if (chartMargin.bottom < 20) chartMargin.bottom = 20;
    if (chartMargin.left < 20) chartMargin.left = 20;
    if (chartMargin.right < 20) chartMargin.right = 20;
  }
}
function created() {
  gridChart = new GridChart({
    enablePropertyPanel: true,
    allowExport: true,
    enableRtl: (grid as GridComponent).enableRtl,
    locale: (grid as GridComponent).locale,
    updateChartSettings: updateChartSettings
  });
}

function updateChartSettings(args: UpdateChartArgs) 
{
  const chart = args.changes.chart;
  if (!chart) return;

  // Restrict margin values to minimum 20.
  const chartMargin = chart.margin;
  if (chartMargin && !isNullOrUndefined(chartMargin)) {
    if (chartMargin.top < 20) chartMargin.top = 20;
    if (chartMargin.bottom < 20) chartMargin.bottom = 20;
    if (chartMargin.left < 20) chartMargin.left = 20;
    if (chartMargin.right < 20) chartMargin.right = 20;
  }
}

The following complete example demonstrates how to enable the property panel by setting enablePropertyPanel to true, customize the chart using the chartModel within contextMenuClick event, and dynamically control or customize the behavior of the updateChartSettings event.

import { ColumnDirective, ColumnsDirective, ContextMenu, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { GridChart} from '@syncfusion/ej2-grid-chart';
import * as React from 'react';
import { salesDatas } from './datasource';
import { isNullOrUndefined } from '@syncfusion/ej2-base';


function App() {
  let grid;
  let gridChart;
  const selectionSettings = { type: 'Multiple' };

  function created() {
    gridChart = new GridChart({
      enablePropertyPanel: true,
      allowExport: true,
      enableRtl: grid.enableRtl,
      locale: grid.locale,
      updateChartSettings: updateChartSettings
    });
  }

  function contextMenuClick(args) {
    if (args.chartType) {
      const chartArgs = {
        gridInstance: args.gridInstance,
        chartType: args.chartType,
        records: args.records
      };
      const chartModel = {
        primaryXAxis: {
          valueType: 'Category',
          labelRotation: 315
        },
        margin: {
          top: 20,
          bottom: 20,
          right: 20,
          left: 20
        },
        tooltip: {
          enable: true,
          textStyle: {
            size: '16px',
            fontFamily: 'Arial, Helvetica, sans-serif'
          }
        },
        title: 'Sales Data',
        titleStyle: {
          size: '24px',
          fontFamily: 'Arial, Helvetica, sans-serif',
          fontWeight: 'Bold'
        },
        subTitle: 'Sales data for various products over the months',
        load: (args) => {
          if (args.chart.titleStyle) {
            args.chart.titleStyle.color = '#1976d2';
          }
        }
      };
      const accumulationChartModel = {
        title :'Sales Distribution'
      };
      const model = {
        chart: chartModel,
        accumulationChart: accumulationChartModel
      };
      const categorySeries = {
        category: ['Product', 'Month'],
        series: ['Online', 'Retail']
      };
      gridChart.render(chartArgs, model, categorySeries);
    }
  }

  function updateChartSettings(args) {
    const chart = args.changes.chart;
    if (!chart) return;
    const chartMargin = chart.margin;
    if (chartMargin && !isNullOrUndefined(chartMargin)) {
      if (chartMargin.top < 20) chartMargin.top = 20;
      if (chartMargin.bottom < 20) chartMargin.bottom = 20;
      if (chartMargin.left < 20) chartMargin.left = 20;
      if (chartMargin.right < 20) chartMargin.right = 20;
    }
  }

  return (
    <div>
      <GridComponent dataSource={salesDatas} height={420} ref={g => grid = g}  created={created}
        contextMenuClick={contextMenuClick}
        allowSelection={true}
        contextMenuItems={[
          'Bar', 'StackingBar', 'StackingBar100',
          'Pie', 'Column', 'StackingColumn', 'StackingColumn100',
          'Line', 'StackingLine', 'StackingLine100',
          'Area', 'StackingArea', 'StackingArea100', 'Scatter'
        ]}
        selectionSettings={selectionSettings} >
        <ColumnsDirective>
          <ColumnDirective type='checkbox' width='50' />
          <ColumnDirective field='Product' headerText='Product' width='90' />
          <ColumnDirective field='Month' headerText='Month' width='180' />
          <ColumnDirective field='Online' headerText='Online' width='120' textAlign='Right' />
          <ColumnDirective field='Retail' headerText='Retail' width='110' textAlign='Right' />
          <ColumnDirective field='Total' headerText='Total' width='110' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[ContextMenu]} />
      </GridComponent>
    </div>
  );
}

export default App;
import { ColumnDirective, ColumnsDirective, ContextMenuClickEventArgs, ContextMenu,  GridComponent, Inject, SelectionSettingsModel} from '@syncfusion/ej2-react-grids';
import { GridChart, UpdateChartArgs, CategorySeries, ChartChanges } from '@syncfusion/ej2-grid-chart';
import { ChartModel, AccumulationChartModel, ILoadedEventArgs } from '@syncfusion/ej2-charts';
import * as React from 'react';
import { salesDatas } from './datasource';
import { isNullOrUndefined } from '@syncfusion/ej2-base';

interface SalesRecord {
  Product: string;
  Month: string;
  Online: number;
  Retail: number;
  Total: number;
}

function App() {
  let grid: GridComponent | null;
  let gridChart: GridChart;
  const selectionSettings: SelectionSettingsModel = { type: 'Multiple' };

  function created() {
    gridChart = new GridChart({
      enablePropertyPanel: true,
      allowExport: true,
      enableRtl: (grid as GridComponent).enableRtl,
      locale: (grid as GridComponent).locale,
      updateChartSettings: updateChartSettings
    });
  }

  function contextMenuClick(args: ContextMenuClickEventArgs) {
    if (args.chartType) {
      const chartArgs = {
        gridInstance: (args.gridInstance as GridComponent),
        chartType: args.chartType,
        records: (args.records as SalesRecord[])
      };
      const chartModel: ChartModel = {
        primaryXAxis: {
          valueType: 'Category',
          labelRotation: 315
        },
        margin: {
          top: 20,
          bottom: 20,
          right: 20,
          left: 20
        },
        tooltip: {
          enable: true,
          textStyle: {
            size: '16px',
            fontFamily: 'Arial, Helvetica, sans-serif'
          }
        },
        title: 'Sales Data',
        titleStyle: {
          size: '24px',
          fontFamily: 'Arial, Helvetica, sans-serif',
          fontWeight: 'Bold'
        },
        subTitle: 'Sales data for various products over the months',
        load: (args: ILoadedEventArgs) => {
          if (args.chart.titleStyle) {
            args.chart.titleStyle.color = '#1976d2';
          }
        }
      };
      const accumulationChartModel: AccumulationChartModel = {
        title :'Sales Distribution'
      }
      const model: ChartChanges = {
        chart: chartModel,
        accumulationChart: accumulationChartModel
      };
      const categorySeries: CategorySeries = {
        category: ['Product', 'Month'],
        series: ['Online', 'Retail']
      };
      (gridChart as GridChart).render(chartArgs, model, categorySeries);
    }
  }

  function updateChartSettings(args: UpdateChartArgs) {
    const chart = args.changes.chart;
    if (!chart) return;
    const chartMargin = chart.margin;
    if (chartMargin && !isNullOrUndefined(chartMargin)) {
      if (chartMargin.top < 20) chartMargin.top = 20;
      if (chartMargin.bottom < 20) chartMargin.bottom = 20;
      if (chartMargin.left < 20) chartMargin.left = 20;
      if (chartMargin.right < 20) chartMargin.right = 20;
    }
  }

  return (
    <div>
      <GridComponent
        dataSource={salesDatas}
        height={420}
        ref={g => (grid = g)}
        created={created}
        contextMenuClick={contextMenuClick}
        allowSelection={true}
        contextMenuItems={[
          'Bar', 'StackingBar', 'StackingBar100',
          'Pie', 'Column', 'StackingColumn', 'StackingColumn100',
          'Line', 'StackingLine', 'StackingLine100',
          'Area', 'StackingArea', 'StackingArea100', 'Scatter'
        ]}
        selectionSettings={selectionSettings}
      >
        <ColumnsDirective>
          <ColumnDirective type="checkbox" width="50" />
          <ColumnDirective field="Product" headerText="Product" width="90" />
          <ColumnDirective field="Month" headerText="Month" width="180" />
          <ColumnDirective field="Online" headerText="Online" width="120" textAlign="Right" />
          <ColumnDirective field="Retail" headerText="Retail" width="110" textAlign="Right" />
          <ColumnDirective field="Total" headerText="Total" width="110" textAlign="Right" />
        </ColumnsDirective>
        <Inject services={[ContextMenu]} />
      </GridComponent>
    </div>
  );
}

export default App;
export const salesDatas = [
  { Product: "Laptop", Month: "January", Online: 1500, Retail: 2000, Total: 3500 },
  { Product: "Mobile", Month: "February", Online: 1600, Retail: 2500, Total: 4100 },
  { Product: "Tablet", Month: "March", Online: 1800, Retail: 2200, Total: 4000 },
  { Product: "Smartwatch", Month: "April", Online: 2000, Retail: 2100, Total: 4100 },
  { Product: "Camera", Month: "May", Online: 2200, Retail: 2300, Total: 4500 },
  { Product: "Headphones", Month: "June", Online: 1700, Retail: 1800, Total: 3500 },
  { Product: "Smart Speaker", Month: "July", Online: 1900, Retail: 2000, Total: 3900 },
  { Product: "Printer", Month: "August", Online: 2100, Retail: 1900, Total: 4000 },
  { Product: "Monitor", Month: "September", Online: 2000, Retail: 1900, Total: 3900 },
  { Product: "Keyboard", Month: "October", Online: 1600, Retail: 1700, Total: 3300 },
  { Product: "Mouse", Month: "November", Online: 1700, Retail: 1600, Total: 3300 },
  { Product: "Router", Month: "December", Online: 1800, Retail: 2000, Total: 3800 }
];
export const salesDatas: Object[] = [
  { Product: "Laptop", Month: "January", Online: 1500, Retail: 2000, Total: 3500 },
  { Product: "Mobile", Month: "February", Online: 1600, Retail: 2500, Total: 4100 },
  { Product: "Tablet", Month: "March", Online: 1800, Retail: 2200, Total: 4000 },
  { Product: "Smartwatch", Month: "April", Online: 2000, Retail: 2100, Total: 4100 },
  { Product: "Camera", Month: "May", Online: 2200, Retail: 2300, Total: 4500 },
  { Product: "Headphones", Month: "June", Online: 1700, Retail: 1800, Total: 3500 },
  { Product: "Smart Speaker", Month: "July", Online: 1900, Retail: 2000, Total: 3900 },
  { Product: "Printer", Month: "August", Online: 2100, Retail: 1900, Total: 4000 },
  { Product: "Monitor", Month: "September", Online: 2000, Retail: 1900, Total: 3900 },
  { Product: "Keyboard", Month: "October", Online: 1600, Retail: 1700, Total: 3300 },
  { Product: "Mouse", Month: "November", Online: 1700, Retail: 1600, Total: 3300 },
  { Product: "Router", Month: "December", Online: 1800, Retail: 2000, Total: 3800 }
];