Thanks for using Syncfusion product.
The code snippet is given below,
$(function ()
{
$("#container").ejChart(
series:
[
type: 'line',
});
We have prepared a sample based on your requirement and you can find the sample in below location:
$("#container").ejChart(
{
primaryXAxis:
{
range: { min: 2005, max: 2011, interval: 1 },
title: { text: 'Year' }
},
primaryYAxis:
{
labelFormat: "{value}%",
title: { text: 'Efficiency' },
range: { min: 25, max: 50, interval: 5 }
},
commonSeriesOptions:
{
enableAnimation: false,
tooltip: { visible: true },
border: { width: 2 }
},
series:
[
{
points: [{ 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 }],
name: 'México',
fill: 'blue',
type: 'scatter',
marker:
{
shape: 'circle',
size:
{
height: 8, width: 8
},
visible: true
}
},
{
points: [{ x: 2005, y: 30 }, { x: 2006, y: 30 }, { x: 2007, y: 30 }, { x: 2008, y: 30 },
{ x: 2009, y: 30 }, { x: 2010, y: 30 }, { x: 2011, y: 30 }],
name: 'Average',
fill: 'blue',
type: 'line',
dashArray: '4, 5',
marker:
{
visible: false
}
}
],
canResize: true,
title: { text: 'Efficiency of oil-fired power production' },
size: { height: "600" },
legend: { visible: true }
});