Line in JavaScript (ES5) Chart control

06 Jun 2023 / 2 minutes to read

Line

To render a line series, use series type as Line and inject LineSeries module using Chart.Inject(LineSeries) method.

Source

Preview

index.js

index.html

var chartData = [
    { x: 2005, y: 28 }, { x: 2006, y: 25 },{ x: 2007, y: 26 }, { x: 2008, y: 27 },
    { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 }
];
var chart = new ej.charts.Chart({
    primaryXAxis: {
        title: 'Year',
        minimum: 2004, maximum: 2012, interval: 1
    },
    primaryYAxis: {
        minimum: 20, maximum: 40, interval: 5,
        title: 'Efficiency',
        labelFormat: '{value}%'
    },
    series:[{
        dataSource: chartData, width:2,
        xName: 'x', yName: 'y',
        name: 'India',
        //Series type as line
        type: 'Line'
    }],
    title: 'Efficiency of oil-fired power production'
}, '#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/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


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

Multicolored line

To render a multicolored line series, use the series type as MultiColoredLine, and inject the MultiColoredLineSeries module using Chart.Inject(MultiColoredLineSeries) method. Here, the individual colors to the data can be mapped by using pointColorMapping.

Source

Preview

index.js

index.html

var chartData = [
    { x: 2005, y: 28, color: 'red' },
    { x: 2006, y: 25, color: 'green' },
    { x: 2007, y: 26, color: '#ff0097' },
    { x: 2008, y: 27, color: 'crimson' },
    { x: 2009, y: 32, color: 'blue' },
    { x: 2010, y: 35, color: 'darkorange' },
];
var chart = new ej.charts.Chart(
    {
        primaryXAxis: {
            title: 'Year',
            minimum: 2004,
            maximum: 2012,
            interval: 1,
        },
        primaryYAxis: {
            minimum: 20,
            maximum: 40,
            interval: 5,
            title: 'Efficiency',
            labelFormat: '{value}%',
        },
        series: [
            {
                dataSource: chartData,
                width: 2,
                xName: 'x',
                yName: 'y',
                name: 'India',
                //Series type as line
                type: 'MultiColoredLine', pointColorMapping: 'color',
            },
        ],
        title: 'Efficiency of oil-fired power production',
    },
    '#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/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


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

Series customization

The following properties can be used to customize the line series.

fill – Specifies the color of the series.
opacity – Specifies the opacity of fill.
dashArray – Specifies the dashes for series.
width – Specifies the width for series.

Source

Preview

index.js

index.html

var chartData = [
    { x: 2005, y: 28 }, { x: 2006, y: 25 },{ x: 2007, y: 26 }, { x: 2008, y: 27 },
    { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 }
];
var chart = new ej.charts.Chart({
    primaryXAxis: {
        title: 'Year',
        minimum: 2004, maximum: 2012, interval: 1
    },
    primaryYAxis: {
        minimum: 20, maximum: 40, interval: 5,
        title: 'Efficiency',
        labelFormat: '{value}%'
    },
    series:[{
        dataSource: chartData,
        //fill for chart series
        fill: 'red',
        //line width as 4 for chart series
        width:4,
        //dash array value as 5,5
        dashArray: '5,5',
        xName: 'x', yName: 'y',
        name: 'India', type: 'Line'
    }],
    title: 'Efficiency of oil-fired power production'
}, '#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/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


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

Line in JavaScript (ES5) Chart control

Line

Multicolored line

Series customization

See Also