Legend in table in EJ2 TypeScript Chart control

8 May 202316 minutes to read

The annotation property is used to add legend in table and the multiLevelLabels property is used to customize the axis label in table format.

To add legend in table with x-axis labels, follow the given steps:

Step 1:

Initialize the custom elements using the annotation property.

Create table and rectangle shapes in the html page and set this to the content property of annotation.

By setting coordinateUnits value to pixel in annotation object, you can place the legend in chart based on pixel values.

import { Chart, ColumnSeries, Category, Legend, DataLabel, Tooltip, ILoadedEventArgs, IMouseEventArgs, MultiLevelLabel, IAxisLabelRenderEventArgs, ChartAnnotation } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, DataLabel, Category, Legend, Tooltip, MultiLevelLabel, ChartAnnotation);

let columnData: Object[] = [
  { x: 'MWBE', y: 2800000, y1: 1000000 },
  { x: 'LDB', y: 1000000, y1: 1550000 },
  { x: 'VBE', y: 2200000, y1: 1200000 },
  { x: 'DBE', y: 3000000, y1: 1000000 },
  { x: 'MWBE', y: 1000000, y1: 800000 },
  { x: 'LDB', y: 500000, y1: 400000 },
  { x: 'VBE', y: 2100000, y1: 1500000 },
  { x: 'DBE', y: 900000, y1: 0 }
];
let firstClick: Boolean = true;
let chart: Chart = new Chart({
  //Initializing Primary X and Y Axis
  primaryXAxis: {
    valueType: 'Category',
    border: { width: 1, type: 'Rectangle' },
    isIndexed: true,
    interval: 1,
    majorGridLines: { width: 0 },
    multiLevelLabels: [
      {
        border: { type: 'Rectangle' },
        textStyle: { fontWeight: 'Bold' },
        categories: [
          { start: -0.5, end: 3.5, text: 'Construction', },
          { start: 3.5, end: 7.5, text: 'Professional Services', },
        ]
      },
      {
        border: { type: 'Rectangle' },
        categories: [
          { start: -0.5, end: 0.5, text: '248,952,090' },
          { start: 0.5, end: 1.5, text: '248,952,090' },
          { start: 1.5, end: 2.5, text: '248,952,090' },
          { start: 2.5, end: 3.5, text: '248,952,090' },
          { start: 3.5, end: 4.5, text: '248,952,090' },
          { start: 4.5, end: 5.5, text: '248,952,090' },
          { start: 5.5, end: 6.5, text: '248,952,090' },
          { start: 6.5, end: 7.5, text: '248,952,090' },
        ]
      },
      {
        border: { type: 'Rectangle' },
        categories: [
          { start: -0.5, end: 0.5, text: '248,952,090' },
          { start: 0.5, end: 1.5, text: '248,952,090' },
          { start: 1.5, end: 2.5, text: '248,952,090' },
          { start: 2.5, end: 3.5, text: '248,952,090' },
          { start: 3.5, end: 4.5, text: '248,952,090' },
          { start: 4.5, end: 5.5, text: '248,952,090' },
          { start: 5.5, end: 6.5, text: '248,952,090' },
          { start: 6.5, end: 7.5, text: '248,952,090' },
        ]
      },
    ]
  },
  annotations: [
    {
      content: '#templateWrap',
      coordinateUnits: 'Pixel',
      x: 120,
      y: 328
    },
    {
      content: '#templateWrap1',
      coordinateUnits: 'Pixel',
      x: 116,
      y: 300
    },
    {
      content: '#templateWrap2',
      coordinateUnits: 'Pixel',
      x: 116,
      y: 328
    },
  ],
  margin: { left: 100, right: 100 },
  primaryYAxis:
  {
    labelFormat: '{value}%',
  },
  //Initializing Chart Series
  series: [
    {
      type: 'Column', xName: 'x', width: 2, yName: 'y',
      dataSource: columnData, fill: 'skyblue',
      marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
    },
    {
      type: 'Column', xName: 'x', width: 2, yName: 'y1', fill: '#b22222',
      dataSource: columnData,
      marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
    },

  ],

  tooltip: { enable: true },
  chartMouseClick: (args: IMouseEventArgs) => {
    if ((args.x >= 83 && args.x <= 155) && (args.y > 312 && args.y < 343)) {
      chart.series[0].dataSource = firstClick ? null : columnData;
      chart.refresh();
      firstClick = !firstClick;
    }

  },
  axisLabelRender: (args: IAxisLabelRenderEventArgs) => {
    if (args.axis.name === 'primaryXAxis') {
      args.text = args.text.split(',')[0];
    }
  }
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
        <script id="templateWrap" type="text/x-template">
            <div style='width:80px; padding: 5px;'>
                                  <table style='width: 100%'>
                                      <tr> 
                                          <td><div id='first' style='width: 10px; height: 10px; background:skyblue;'></div></td>
                                          <td style='padding-left: 5px;'>Awarded</td>
                                      </tr>
                                      <tr>
                                          <td><div id='second' style='width: 10px; height: 10px; background:#b22222;'></div></td>
                                          <td style='padding-left: 5px;'>Paid</td>
                                      </tr>
                                  </table>
                              </div>
      </script>
      <script id="templateWrap1" type="text/x-template">
            <div style='width:80px; padding: 5px;'>
                                  <table style='width: 100%'>
                                      <tr> 
                                          <td><div style='border-style: solid;border-width: 1px; height:28px;width:85px; border-color: #b5b5b5;'></div></td>
                                      </tr>
                                
                                  </table>
                              </div>
      </script>
       <script id="templateWrap2" type="text/x-template">
            <div style='width:80px; padding: 5px;'>
                                  <table style='width: 100%'>
                                      <tr> 
                                          <td><div style='border-style: solid;border-width: 1px; height:28px;width:85px; border-color: #b5b5b5;'></div></td>
                                      </tr>
                                
                                  </table>
                              </div>
      </script>
  
</body>

</html>