Scatter chart with line

Thread ID:	Created:	Updated:	Platform:	Replies:
143983	Apr 12,2019 10:16 AM UTC	Apr 15,2019 10:26 AM UTC	JavaScript - EJ 2	1

Subscribe to this post

Tags: Chart

David Price

Asked On April 12, 2019 10:25 AM UTC

Hi I'm looking to create a scatter chart with lines this is the chart created in excel

Line 1

X	Y
2619	2.28
2351	2.37
2107	2.47
1838	2.48
1570	2.39
1325	2.30
1042	2.16
808	2.01
380	1.66
0	1.23

Line 2

X	Y
1671.429	9.918367
1485.714	7.836734
1300	6
1114.286	4.408163
928.5714	3.061224
742.8571	1.959183
557.1428	1.102041
371.4286	0.489796
185.7143	0.122449
0	0

In excel I can use this chart option in excel to plot the lines

Is this possible using your javascript control ?

Reply | Reply with quote

Baby Palanidurai [Syncfusion]

Replied On April 15, 2019 10:26 AM UTC

Hi David,

Greetings from Syncfusion.

We have analyzed your query. We have prepared a sample based on your requirement using spline series and marker. For more information about markers, kindly find the below documentation link,

https://ej2.syncfusion.com/javascript/documentation/chart/data-markers/?no-cache=1

Please find the below code snippet to achieve this requirement,

var chart = new ej.charts.Chart({

//Initializing Primary X Axis

primaryXAxis: {

minimum: 0,

maximum: 3000,

interval: 500,

minorTicksPerInterval: 4,

minorGridLines: { width: 1, }

//Initializing Primary Y Axis

primaryYAxis: {

minimum: 0,

maximum: 12,

interval: 2,

majorGridLines: {},

minorTicksPerInterval: 4,

minorGridLines: { width: 1, }

//Initializing Scondary Y Axis

axes: [{

rowIndex: 0,

name: 'yAxis1',

opposedPosition: true,

minimum: 0,

maximum: 3,

interval: 0.5,

}],

//Initializing Chart Series

series: [

{

type: 'Spline',

dataSource: [

{ x: 2619, y: 2.28 },

/ / Add more points

], yAxisName: 'yAxis1',

xName: 'x', width: 2,

marker: {

visible: true,

width: 10,

height: 10,

shape: 'Cross',

fill: 'black'

yName: 'y',

// Add more series

});

chart.appendTo('#line-container');

Screenshot:

Sample link: https://stackblitz.com/edit/r7ua6c?file=index.js

Kindly revert us, if you have any concerns.

Regards,

Baby

Reply | Reply with quote

CONTACT US

Scatter chart with line

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US