We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How make a line chart without line connections? A dotted chart

Hi,

I want to make a line chart but hidding the line connections (a dotted chart) like this chart:

chart

Can I make this?

Thanks,

Regards.



3 Replies

PR Praveen Syncfusion Team June 3, 2015 06:43 AM UTC

Hi Daniel,

Thanks for using Syncfusion product.

We have analyzed your reported query. We have achieved your requirement by using of line chart and scatter chart. If you want to use dotted line connections in line chart, you can use dashArray property in series.

The code snippet is given below,

Code Snippet:
[JS]

$(function ()

{

$("#container").ejChart(

{

series:

[

{

type: 'line',

dashArray: '4, 5',
},
{
type: 'scatter',
}
]

});

});
Kindly refer the KB in the below link for any assistance about dashArray.
https://www.syncfusion.com/kb/4995/how-to-display-the-dash-line-instead-of-solid-line-for-line-series-in-the-chart

We have prepared a sample based on your requirement and you can find the sample in below location:

Sample: https://www.syncfusion.com/downloads/support/forum/119294/Sample2145370806.zip
Please let us know if you have any concern.
Thanks,
Praveenkumar


DA Daniel June 3, 2015 03:50 PM UTC

Thanks!!! I was searching the scatter chart.

This is the final code:

$("#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 }

});

Thanks again.

Regards.



PR Praveen Syncfusion Team June 4, 2015 05:03 AM UTC

Hi Daniel,
Thanks for your update.
Kindly let us know if you face any difficulties.
Thanks,
Praveenkumar.

Loader.
Up arrow icon