Legend in table in EJ2 JavaScript Chart control

8 May 202318 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.

var columnData = [
    { 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 }
];
var firstClick = true;
var chart = new ej.charts.Chart({
    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) => {
        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) => {
        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://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <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>
  


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>