Search results

Dotted Line in JavaScript (ES5) Chart control

By using annotation, you can add dotted lines in the chart.

To add dotted lines in the chart, follow the given steps:

Step 1:

Initialize the custom elements by using the annotation property.

By setting coordinateUnits value as point in annotation object you can placed dotted lines in the chart based on point x and y values.

Source
Preview
index.js
index.html
var columnData = [{ 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 }];
   
   var chart = new ej.charts.Chart({
        primaryXAxis: {
            valueType: 'Category',
        },
        primaryYAxis: {
            title: 'Medals'
        },
        annotations: [{
                content: '<div id ="test" style="border-top:3px dashed grey;border-top-width: 2px; width: 10000px"></div>',
                x: 'France',
                y: 50,
                coordinateUnits: 'Point',
                Region: 'Chart'
            }],
        series: [{
                dataSource: columnData,
                xName: 'country', yName: 'gold',
                type: 'Line'
            }],
    }, '#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/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
		   <div id="element1"></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>