Tooltip in EJ2 TypeScript Chart control

20 Jun 202624 minutes to read

The chart displays detailed information about a data point through a tooltip when the mouse pointer moves over the point.

Default tooltip

By default, the tooltip is not visible. You can enable the tooltip by setting the enable property to true and by injecting Tooltip module using Chart.Inject(Tooltip).

import { Chart, StepLineSeries, DateTime, Tooltip } from '@syncfusion/ej2-charts';
import { chartData } from './datasource.ts';
Chart.Inject(StepLineSeries, DateTime, Tooltip);

let chart: Chart = new Chart({
        primaryXAxis: {
            valueType: 'DateTime'
        },
        series: [
            {
                type: 'StepLine',
                dataSource: chartData, xName: 'x', yName: 'y',
                width: 2, name: 'China',
                marker: {
                    visible: true, width: 10, height: 10
                },
            }],
        title: 'Unemployment Rates 1975-2010',
        //Default tooltip for chart
        tooltip: {enable: true}
}, '#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>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

Fixed tooltip

By default, the tooltip tracks the mouse movement. You can render the tooltip at a fixed position by using the location property.

import { Chart, StepLineSeries, DateTime, Tooltip } from '@syncfusion/ej2-charts';
import { chartData } from './datasource.ts';
Chart.Inject(StepLineSeries, DateTime, Tooltip);

let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'DateTime'
    },
    primaryYAxis: {
        minimum: 0,
        maximum: 20,
        interval: 4
    },
    series: [
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y',
            width: 2, name: 'China',
            marker: {
                visible: true, width: 10, height: 10
            },
        }],
    title: 'Unemployment Rates 1975-2010',
    //Default tooltip for chart
    tooltip: { enable: true, location: { x: 120, y: 20 } }
}, '#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>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Format the tooltip

By default, the tooltip displays the x- and y-values of a data point. Additional information can be shown by specifying a custom format. For example, the format ${series.name} ${point.x} displays the series name along with the x-value of the data point.

import { Chart, SplineSeries, DateTime, Tooltip } from '@syncfusion/ej2-charts';
import { chartData } from './datasource.ts';
Chart.Inject(SplineSeries, DateTime, Tooltip);

let chart: Chart = new Chart({
        primaryXAxis: {
            valueType: 'DateTime',
        },
        series: [
            {
                type: 'Spline',
                dataSource: chartData, xName: 'x', yName: 'y',
                width: 2, name: 'China',
                marker: {
                    visible: true, width: 10, height: 10
                },
            }
        ],
        title: 'Unemployment Rates 1975-2010',
        tooltip: {
            enable: true,
            //tooltip format for chart
             header: 'Unemployment',
             format: '<b>${point.x} : ${point.y}</b>'
        }
}, '#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>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

Inline tooltip formatting

The tooltip content can be formatted directly within the format property by adding DateTime or number format specifiers to supported tooltip tokens. This allows you to control how point and series values are displayed without using additional events.

A format specifier can be applied to a tooltip token by adding a colon (:) followed by the required format.

For example:

tooltip: {
    enable: true,
    format: '${series.name} (${series.type})<br>${point.x:MMM yyyy} : ${point.y:n2}<br>Size: ${point.size}<br>Opacity: ${series.opacity}'
}

In the above example, point.x is displayed in month-year format, point.y is displayed with two decimal places, point.size displays the size value of the data point, and series.opacity displays the opacity value applied to the series.

Inline formatting can be applied to the following tooltip tokens:

  • point.x – Specifies the x-value of the data point, such as DateTime or category values.
  • point.y – Specifies the numeric y-value of the data point.
  • point.size – Specifies the size value of the data point, commonly used in bubble series.
  • point.high and point.low – Specify the high and low values, commonly used in range and financial series.
  • point.open and point.close – Specify the open and close values, commonly used in financial series.
  • point.volume – Specifies the volume value, commonly used in financial series.
  • point.minimum – Specifies the minimum value, commonly used in box and whisker series.
  • point.maximum – Specifies the maximum value, commonly used in box and whisker series.
  • point.median – Specifies the median value, commonly used in box and whisker series.
  • point.lowerQuartile – Specifies the lower quartile value, commonly used in box and whisker series.
  • point.upperQuartile – Specifies the upper quartile value, commonly used in box and whisker series.
  • point.outliers – Specifies the outlier values, commonly used in box and whisker series.
  • series.name – Specifies the name assigned to the series.
  • series.type – Specifies the rendering type of the series, such as Line, Spline, or Column.
  • series.opacity – Specifies the opacity value applied to the series. This value controls the visual transparency of the series and can be customized in the series configuration.

Important: The availability of point-specific tokens depends on the series type and the values configured in the data source. For example, point.size is applicable to bubble series, while point.median, point.lowerQuartile, and point.upperQuartile are applicable to box and whisker series. The series.name and series.type tokens return string values, so DateTime or number formatting is not applied to these tokens.

The following format types are supported:

  • DateTime formats such as MMM yyyy, MM:yy, and dd MMM
  • Number formats such as:
    • n2 – number with two decimal places
    • n0 – number without decimals
    • c2 – currency format
    • p1 – percentage format
    • e1 – exponential notation

If the specified format does not match the resolved value type, the original value is displayed.

import { Chart, StepLineSeries, DateTime, Tooltip, Legend } from '@syncfusion/ej2-charts';
import { chartData } from './datasource.ts';
Chart.Inject(StepLineSeries, DateTime, Tooltip, Legend);

let chart: Chart = new Chart({
    primaryXAxis: {
        title: 'Years',
        lineStyle: { width: 0 },
        labelFormat: 'y',
        intervalType: 'Years',
        valueType: 'DateTime',
        edgeLabelPlacement: 'Shift'
    },
    primaryYAxis: {
        title: 'Percentage (%)',
        minimum: 0,
        maximum: 20,
        interval: 4,
        labelFormat: '{value}%'
    },
    series: [
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y',
            width: 2, name: 'China',
            marker: { visible: true, width: 10, height: 10 }
        },
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y1',
            width: 2, name: 'Australia',
            marker: { visible: true, width: 10, height: 10 }
        },
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y2',
            width: 2, name: 'Japan',
            marker: { visible: true, width: 10, height: 10 }
        }
    ],
    title: 'Unemployment Rates 1975-2010',
    legendSettings: { visible: true },
    tooltip: { enable: true, format: '${point.x:MMM yyyy}<br/>${point.y:p0}' }
}, '#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>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Tooltip template

Custom HTML content can be rendered in the tooltip by using the template property. The ${x} and ${y} placeholders can be used within the template to display the x- and y-values of the corresponding data point.

import { Chart, StepLineSeries, Legend, Tooltip } from '@syncfusion/ej2-charts';
import { data } from './datasource.ts';
Chart.Inject(StepLineSeries, Legend, Tooltip);

let chart: Chart = new Chart({
        series: [
            {
                type: 'StepLine',
                dataSource: data, xName: 'x', yName: 'y',
                width: 2, name: 'China',
                marker: {
                    visible: true, width: 10, height: 10
                },
            }
        ],
        title: 'Unemployment Rates 1975-2010',
        tooltip: {
            enable: true,
            //tooltip template for chart
            template: '#Unemployment'
        }
}, '#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>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

Enable highlight

By setting the enableHighlight property to true, all points in the hovered series are highlighted while the remaining points are dimmed. This behavior improves focus and readability during data analysis.

import { Chart, StepLineSeries, DateTime, Tooltip, Legend } from '@syncfusion/ej2-charts';
import { chartData } from './datasource.ts';
Chart.Inject(StepLineSeries, DateTime, Tooltip, Legend);

let chart: Chart = new Chart({
    primaryXAxis: {
        title: 'Years',
        lineStyle: { width: 0 },
        labelFormat: 'y',
        intervalType: 'Years',
        valueType: 'DateTime',
        edgeLabelPlacement: 'Shift'
    },
    primaryYAxis: {
        title: 'Percentage (%)',
        minimum: 0, 
        maximum: 20, 
        interval: 4,
        labelFormat: '{value}%'
    },
    series: [
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y',
            width: 2, name: 'China',
            marker: { visible: true, width: 10, height: 10 }
        },
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y1',
            width: 2, name: 'Australia',
            marker: { visible: true, width: 10, height: 10 }
        },
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y2',
            width: 2, name: 'Japan',
            marker: { visible: true, width: 10, height: 10 }
        }
    ],
    title: 'Unemployment Rates 1975-2010',
    legendSettings: { visible: true },
    tooltip: { enable: true, enableHighlight: true }
}, '#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>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Customize the appearance of tooltip

The appearance of the tooltip can be customized by using the following properties:

  • fill to set the background color
  • border to configure the tooltip border
  • textStyle to customize the tooltip text style

The highlightColor property is used to change the color of a data point when it is highlighted during tooltip interaction.

import { Chart, StepLineSeries, DateTime, Legend, Tooltip } from '@syncfusion/ej2-charts';
import { chartData } from './datasource.ts';
Chart.Inject(StepLineSeries, DateTime, Legend, Tooltip);

let chart: Chart = new Chart({
        primaryXAxis: {
            valueType: 'DateTime',
        },
        //Highlight color for tooltip
        highlightColor: 'red',
        series: [
            {
                type: 'StepLine',
                dataSource: chartData, xName: 'x', yName: 'y',
                width: 2, name: 'China',
                marker: {
                    visible: true, width: 10, height: 10
                },
            }
        ],
        title: 'Unemployment Rates 1975-2010',
        tooltip: {
            enable: true,
            format: '${series.name} ${point.x} : ${point.y}',
            //fill for tooltip
            fill: '#7bb4eb',
            //border for tooltip
            border: {
                width: 2,
                color: 'grey'
            }
        }
}, '#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>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
     <script id="Unemployment" type="text/x-template">
      <div id='templateWrap'>
     <table style="width:100%;  border: 1px solid black;">
     <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
     <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
    </table>
    </div>
  </script>
</body>

</html>

Closest tooltip

The showNearestTooltip property displays the tooltip for the data point nearest to the pointer, even when the pointer is not directly positioned over the point.

import { Chart, StepLineSeries, DateTime, Tooltip, Legend } from '@syncfusion/ej2-charts';
import { chartData } from './datasource.ts';
Chart.Inject(StepLineSeries, DateTime, Tooltip, Legend);

let chart: Chart = new Chart({
    primaryXAxis: {
        title: 'Years',
        lineStyle: { width: 0 },
        labelFormat: 'y',
        intervalType: 'Years',
        valueType: 'DateTime',
        edgeLabelPlacement: 'Shift'
    },
    primaryYAxis: {
        title: 'Percentage (%)',
        minimum: 0, 
        maximum: 20, 
        interval: 4,
        labelFormat: '{value}%'
    },
    series: [
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y',
            width: 2, name: 'China',
            marker: { visible: true, width: 10, height: 10 }
        },
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y1',
            width: 2, name: 'Australia',
            marker: { visible: true, width: 10, height: 10 }
        },
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y2',
            width: 2, name: 'Japan',
            marker: { visible: true, width: 10, height: 10 }
        }
    ],
    title: 'Unemployment Rates 1975-2010',
    legendSettings: { visible: true },
    tooltip: { enable: true, enableHighlight: true , showNearestTooltip: true}
}, '#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>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Split tooltip

The split tooltip displays a separate tooltip for each series at the same data point, making it easier to compare values across multiple series.

Enable this feature by setting the split property to true:

tooltip: { 
	enable: true, 
	split: true 
}
import { Chart, LineSeries, Double, Legend, Tooltip, Highlight, Category } from '@syncfusion/ej2-charts';
import { franceData, indonesiaData, mexicoData, polandData, vietnamData } from './datasource.ts';
Chart.Inject(LineSeries, Double, Legend, Tooltip, Highlight, Category);

let chart: Chart = new Chart({
    primaryXAxis: { valueType: 'Category' }, legendSettings: { visible: true }, primaryYAxis: { title: 'Value' },
    series: [
        {
            type: 'Line',
            dataSource: vietnamData,
            xName: 'x', width: 2, marker: {
                visible: true,
                width: 7,
                height: 7,
                shape: 'Circle',
                isFilled: true
            },
            yName: 'y', name: 'Vietnam',
        },
        {
            type: 'Line',
            dataSource: indonesiaData,
            xName: 'x', width: 2, marker: {
                visible: true,
                width: 5,
                height: 5,
                shape: 'Rectangle',
                isFilled: true
            },
            yName: 'y', name: 'Indonesia',
        },
        {
            type: 'Line',
            dataSource: franceData,
            xName: 'x', width: 2, marker: {
                visible: true,
                width: 5,
                height: 5,
                shape: 'Rectangle',
                isFilled: true
            },
            yName: 'y', name: 'France',
        },
        {
            type: 'Line',
            dataSource: polandData,
            xName: 'x', width: 2, marker: {
                visible: true,
                width: 5,
                height: 5,
                shape: 'Rectangle',
                isFilled: true
            },
            yName: 'y', name: 'Poland',
        },
        {
            type: 'Line',
            dataSource: mexicoData,
            xName: 'x', width: 2, marker: {
                visible: true,
                width: 5,
                height: 5,
                shape: 'Rectangle',
                isFilled: true
            },
            yName: 'y', name: 'Mexico',
        }
    ],
    tooltip: {
        enable: true,
        split: true
    },
});
chart.appendTo('#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>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Follow pointer

The follow pointer feature enables the tooltip to follow the mouse cursor or touch pointer as users interact with the chart, keeping the tooltip near the point of interaction.

Enable this feature by setting the followPointer property to true:

tooltip: { 
	enable: true, 
	followPointer: true 
}
import { Chart, ColumnSeries, Double, Legend, Tooltip, Highlight } from '@syncfusion/ej2-charts';
import { franceData, mexicoData, vietnamData } from './datasource.ts';
Chart.Inject(ColumnSeries, Double, Legend, Tooltip, Highlight);

let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Double',
    },
    primaryYAxis:
    {
        title: 'Volume in million metric tons',
        labelFormat: '{value}',
    },
    series: [
        {
            type: 'Column',
            dataSource: vietnamData,
            xName: 'x', width: 2, marker: {
                visible: true,
                width: 7,
                height: 7,
                shape: 'Circle',
                isFilled: true
            },
            yName: 'y', name: 'Vietnam',
        },
        {
            type: 'Column',
            dataSource: franceData,
            xName: 'x', width: 2, marker: {
                visible: true,
                width: 7,
                height: 7,
                shape: 'Diamond',
                isFilled: true
            },
            yName: 'y', name: 'France',
        },
        {
            type: 'Column',
            dataSource: mexicoData,
            xName: 'x', width: 2, marker: {
                visible: true,
            },
            yName: 'y', name: 'Mexico',
        }
    ],
    tooltip: {
        enable: true,
        followPointer: true
    },
});
chart.appendTo('#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>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Tooltip distance

The tooltip distance property controls the spacing between the tooltip and the mouse pointer or target data point. This prevents the tooltip from overlapping with the cursor or nearby chart elements, improving readability.

Set the distance property to specify the gap in pixels:

tooltip: { 
	enable: true, 
	distance: 25 
}
import { Chart, ColumnSeries, Double, Legend, Tooltip, Highlight } from '@syncfusion/ej2-charts';
import { polandData, vietnamData } from './datasource.ts';
Chart.Inject(ColumnSeries, Double, Legend, Tooltip, Highlight);

let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Double',
    },
    primaryYAxis:
    {
        title: 'Volume in million metric tons',
        labelFormat: '{value}',
    },
    series: [
        {
            type: 'Column',
            dataSource: vietnamData,
            xName: 'x', width: 2, marker: {
                visible: true,
                width: 7,
                height: 7,
                shape: 'Circle',
                isFilled: true
            },
            yName: 'y', name: 'Vietnam',
        },
        {
            type: 'Column',
            dataSource: polandData,
            xName: 'x', width: 2, marker: {
                visible: true,
                width: 5,
                height: 5,
                shape: 'Rectangle',
                isFilled: true
            },
            yName: 'y', name: 'Poland',
        }
    ],
    tooltip: {
        enable: true,
        distance: 20
    },
});
chart.appendTo('#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>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

See also