HelpBot Assistant

How can I help you?

Chart appearance in EJ2 TypeScript Chart control

3 Feb 202624 minutes to read

Custom color palette

Customize the default color of series or points by providing a custom color palette using the palettes property.

Supported Color Formats

You can specify colors in various CSS-supported formats:

  • Hex: "#E94649", "#F6B53F"
  • RGB: "rgb(233, 70, 73)", "rgb(246, 181, 63)"
  • RGBA: "rgba(233, 70, 73, 0.5)"
  • HSL: "hsl(0, 79%, 60%)"
  • HWB: "hwb(0 9% 8%)" 
import { Chart, ColumnSeries, Category, Legend } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category, Legend);
let chartData: Object[] = [
      { country: "USA", gold: 50, silver: 70, bronze: 45 },
      { country: "China", gold: 40, silver: 60, bronze: 55 },
      { country: "Japan", gold: 70, silver: 60, bronze: 50 },
      { country: "Australia", gold: 60, silver: 56, bronze: 40 },
      { country: "France", gold: 50, silver: 45, bronze: 35 },
      { country: "Germany", gold: 40, silver: 30, bronze: 22 },
      { country: "Italy", gold: 40, silver: 35, bronze: 37 },
      { country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
        title: 'Countries'
    },
    primaryYAxis: {
        minimum: 0, maximum: 80,
        interval: 20, title: 'Medals'
    },
    series:[{
        dataSource: chartData,
        xName: 'country', yName: 'gold',
        name: 'Gold', type: 'Column'
    }, {
        dataSource: chartData,
        xName: 'country', yName: 'silver',
        name: 'Silver', type: 'Column'
    }, {
        dataSource: chartData,
        xName: 'country', yName: 'bronze',
        name: 'Bronze', type: 'Column'
    }],
    // palettes for chart
    palettes: ["#E94649", "#F6B53F", "#6FAAB0", "#C4C24A"],
    title: 'Olympic Medals'
}, '#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 id='element1'></div>
    </div>
</body>

</html>

Data point customization

The color of individual data point or data points within a range can be customized using the options below.

Point color mapping

You can bind the color for the points from dataSource for the series using pointColorMapping property.

import { Chart, ColumnSeries, Category } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category);

let chart: Chart = new Chart({
    primaryXAxis: { valueType: 'Category', majorGridLines: { width: 0 } },
        primaryYAxis: {
            lineStyle: { width: 0 },
            majorTickLines: { width: 0 },
            minorTickLines: { width: 0 },
            labelFormat: '{value}°C',
        },
        chartArea: {
            border: {
                width: 0
            }
        },
        series: [
            {
                pointColorMapping: "color",
                dataSource: [
                    { x: 'Jan', y: 6.96, color: "red" },
                    { x: 'Feb', y: 8.9, color: "blue" },
                    { x: 'Mar', y: 12, color: "orange" },
                    { x: 'Apr', y: 17.5, color: "aqua" },
                    { x: 'May', y: 22.1, color: "grey" }

                ], xName: 'x', yName: 'y', type: 'Column',
                animation: { enable: false },
                cornerRadius: {
                    topLeft: 10, topRight: 10
                },
            }
        ],
        title: 'USA CLIMATE - WEATHER BY MONTH',
}, '#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 id='element1'></div>
    </div>
</body>

</html>

Range color mapping

You can differentiate data points based on their y values using rangeColorSettings in the chart.

import { Chart, ColumnSeries, Category, Legend, Selection } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category, Legend, Selection);

let chart: Chart = new Chart({
    selectionMode: 'Point',
        primaryXAxis: { valueType: 'Category', majorGridLines: { width: 0 } },
        primaryYAxis: {
            lineStyle: { width: 0 },
            majorTickLines: { width: 0 },
            minorTickLines: { width: 0 },
            labelFormat: '{value}°C',
        },
        chartArea: {
            border: {
                width: 0
            }
        },
        series: [
            {
                dataSource: [
                    { x: 'Jan', y: 6.96 },
                    { x: 'Feb', y: 8.9 },
                    { x: 'Mar', y: 12 },
                    { x: 'Apr', y: 17.5 },
                    { x: 'May', y: 22.1 },
                    { x: 'June', y: 25 },
                    { x: 'July', y: 29.4 },
                    { x: 'Aug', y: 29.6 },
                    { x: 'Sep', y: 25.8 },
                    { x: 'Oct', y: 21.1 },
                    { x: 'Nov', y: 15.5 },
                    { x: 'Dec', y: 9.9 }

                ], xName: 'x', yName: 'y', type: 'Column',
                animation: { enable: false }, name: 'USA',
                cornerRadius: {
                    topLeft: 10, topRight: 10
                },
            }
        ],
        rangeColorSettings: [
            {
                label: '1°C to 10°C',
                start: 1,
                end: 10,
                colors: ['#F9D422']
            },
            {
                label: '11°C to 20°C',
                start: 11,
                end: 20,
                colors: ['#F28F3F']
            },
            {
                label: '21°C to 30°C',
                start: 21,
                end: 30,
                colors: ['#E94F53']
            }
        ],
        legendSettings: {
            mode: 'Range',
            toggleVisibility: false
        },
        title: 'USA CLIMATE - WEATHER BY MONTH',
}, '#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 id='element1'></div>
    </div>
</body>

</html>

Point level customization

Marker, data label, and fill color of individual data points can be customized using the pointRender and textRender events.

import { Chart, ColumnSeries, Category, ISeriesRenderEventArgs, IPointRenderEventArgs } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category);
let chartData: Object[] = [
    { country: "USA", gold: 50 },
    { country: "China", gold: 40 },
    { country: "Japan", gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France", gold: 50 },
    { country: "Germany", gold: 40 },
    { country: "Italy", gold: 40 },
    { country: "Sweden", gold: 30 }
];
let colors: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',
    '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
        title: 'Countries'
    },
    primaryYAxis: {
        minimum: 0, maximum: 80,
        interval: 20, title: 'Medals'
    },
    series: [{
        dataSource: chartData,
        xName: 'country', yName: 'gold',
        name: 'Gold', type: 'Column'
    }],
    // point render event for chart
    pointRender: (args: IPointRenderEventArgs): void => {
        args.fill = colors[args.point.index];
    },
    title: 'Olympic Medals'
}, '#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 id='element1'></div>
    </div>
</body>

</html>

Chart area customization

Customize the chart background

Use the background and border properties on the chart to change its background color and border.

import { Chart, ColumnSeries, Category, ISeriesRenderEventArgs } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category);
let chartData: Object[] = [
    { country: "USA", gold: 50 },
    { country: "China", gold: 40 },
    { country: "Japan", gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France", gold: 50 },
    { country: "Germany", gold: 40 },
    { country: "Italy", gold: 40 },
    { country: "Sweden", gold: 30 }
];
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
        title: 'Countries'
    },
    primaryYAxis: {
        minimum: 0, maximum: 80,
        interval: 20, title: 'Medals'
    },
    series: [{
        dataSource: chartData,
        xName: 'country', yName: 'gold',
        name: 'Gold', type: 'Column',
        border: { width: 2, color: 'grey' }
    }],
    title: 'Olympic Medals',
    //Customizing Chart background
    background: 'skyblue',
    //Customize the chart border and opacity
    border: { color: "#FF0000", width: 2 },
}, '#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 id='element1'></div>
    </div>
</body>

</html>

Chart margin

Set the chart margin relative to its container using the margin property.

import { Chart, ColumnSeries, Category, ISeriesRenderEventArgs } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category);
let chartData: Object[] = [
    { country: "USA", gold: 50 },
    { country: "China", gold: 40 },
    { country: "Japan", gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France", gold: 50 },
    { country: "Germany", gold: 40 },
    { country: "Italy", gold: 40 },
    { country: "Sweden", gold: 30 }
];
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
        title: 'Countries'
    },
    primaryYAxis: {
        minimum: 0, maximum: 80,
        interval: 20, title: 'Medals'
    },
    series: [{
        dataSource: chartData,
        xName: 'country', yName: 'gold',
        name: 'Gold', type: 'Column',
        border: { width: 2, color: 'grey' }
    }],
    title: 'Olympic Medals',
    background: 'skyblue',
    border: { color: "#FF0000", width: 2 },
    //Change chart margin to left, right, top and bottom
    margin: { left: 40, right: 40, top: 40, bottom: 40 },
}, '#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 id='element1'></div>
    </div>
</body>

</html>

Chart area customization

To customize the plotting region (chart area), use the chartArea properties: background and border change the chart area’s appearance, and width adjusts its size.

import { Chart, ColumnSeries, Category, ISeriesRenderEventArgs } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category);
let chartData: Object[] = [
    { country: "USA", gold: 50 },
    { country: "China", gold: 40 },
    { country: "Japan", gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France", gold: 50 },
    { country: "Germany", gold: 40 },
    { country: "Italy", gold: 40 },
    { country: "Sweden", gold: 30 }
];
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
        title: 'Countries'
    },
    primaryYAxis: {
        minimum: 0, maximum: 80,
        interval: 20, title: 'Medals'
    },
    series: [{
        dataSource: chartData,
        xName: 'country', yName: 'gold',
        name: 'Gold', type: 'Column',
        border: { width: 2, color: 'grey' }
    }],
    title: 'Olympic Medals',
    chartArea: {
        //background for Chart area
        background: "skyblue",
        // width of the chart area
        width: '80%'
    }
}, '#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 id='element1'></div>
    </div>
</body>

</html>

Chart area margin

You can customize the space between the chart area from its chart container through margin property.

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

let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
        title: 'Countries'
    },
    primaryYAxis: {
        minimum: 0, 
        maximum: 80,
        interval: 20, 
        title: 'Medals'
    },
    series: [
        {
            dataSource: chartData,
            xName: 'country', yName: 'gold',
            name: 'Gold', type: 'Column',
            border: { width: 2, color: 'grey' }
        }
    ],
    title: 'Olympic Medals',
    legendSettings: { visible: false },
    chartArea: {
        border: { width: 2, color: 'blue' },
        // margin of the chart area
        margin: { left: 50, right: 50, top: 50, bottom: 50 }
    },
    border: { width: 2, color: 'green' }
}, '#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>
</body>

</html>

Animation

Customize animation for a series using the animation property. Use enable to turn animation on or off; duration controls the animation length and delay sets when the animation starts.

import { Chart, ColumnSeries, Category, ISeriesRenderEventArgs } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category);
let chartData: Object[] = [
      { country: "USA", gold: 50 },
      { country: "China", gold: 40 },
      { country: "Japan", gold: 70 },
      { country: "Australia", gold: 60 },
      { country: "France", gold: 50 },
      { country: "Germany", gold: 40 },
      { country: "Italy", gold: 40 },
      { country: "Sweden", gold: 30 }
];
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
        title: 'Countries'
    },
    primaryYAxis: {
        minimum: 0, maximum: 80,
        interval: 20, title: 'Medals'
    },
    series:[{
        dataSource: chartData,
        xName: 'country', yName: 'gold',
        name: 'Gold', type: 'Column',
        border:{ width: 2, color: 'grey'},
        //Animation for chart series
        animation:{
            enable: true,
            duration: 2000,
            delay: 200
        }
    }],
    title: 'Olympic Medals'
}, '#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 id='element1'></div>
    </div>
</body>

</html>

Fluid animation

Fluid animation used to animate series with updated dataSource continues animation rather than animation whole series. You can customize animation for a particular series using [animate] method.

import {
    Chart, ColumnSeries, Category, DataLabel,Tooltip, ILoadedEventArgs
} from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, DataLabel, Category, Tooltip);
    let count: number = 0;
    let chart: Chart = new Chart({
        //Initializing Primary X Axis
        primaryXAxis: {
            valueType: 'Category', interval: 1, majorGridLines: { width: 0 },
            tickPosition: 'Inside',
            labelPosition: 'Inside', labelStyle: { color: '#ffffff' }
        },
        chartArea: { border: { width: 0 } },
        //Initializing Primary Y Axis
        primaryYAxis:
            {
                minimum: 0, maximum: 300, interval: 50, majorGridLines: { width: 0 },
                majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }
            },

        //Initializing Chart Series
        series: [
            {
                type: 'Column', xName: 'x', width: 2, yName: 'y',
                dataSource: [
                    { x: 'Egg', y: 106 },
                    { x: 'Fish', y: 103 },
                    { x: 'Misc', y: 198 },
                    { x: 'Tea', y: 189 },
                    { x: 'Fruit', y: 250 }
                ], name: 'Tiger',
                cornerRadius: {
                    bottomLeft: 10, bottomRight: 10, topLeft: 10, topRight: 10
                },
            }
        ],
        legendSettings: { visible: false },
        //Initializing Chart title
        title: 'Trade in Food Groups', tooltip: { enable: false },
        loaded: (args: ILoadedEventArgs) => {
            let columninterval = setInterval(
                () => {
                    if (document.getElementById('element')) {
                        if (count === 0) {
                            chart.series[0].dataSource = [
                                { x: 'Egg', y: 206 },
                                { x: 'Fish', y: 123 },
                                { x: 'Misc', y: 48 },
                                { x: 'Tea', y: 240 },
                                { x: 'Fruit', y: 170 }
                            ];
                            chart.animate();
                            count++;
                        }
                        else if (count === 1) {
                            chart.series[0].dataSource = [
                                { x: 'Egg', y: 86 },
                                { x: 'Fish', y: 173 },
                                { x: 'Misc', y: 188 },
                                { x: 'Tea', y: 109 },
                                { x: 'Fruit', y: 100 }
                            ];
                            chart.animate();
                            count++;
                        }
                        else if (count === 2) {
                            chart.series[0].dataSource = [
                                { x: 'Egg', y: 156 },
                                { x: 'Fish', y: 33 },
                                { x: 'Misc', y: 260 },
                                { x: 'Tea', y: 200 },
                                { x: 'Fruit', y: 30 }
                            ];
                            chart.animate();
                            count = 0;
                        }
                    } else {
                        clearInterval(columninterval);
                    }
                },
                2000
            );
        },
}, '#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 id='element1'></div>
    </div>
</body>

</html>

See also