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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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
loading
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 ?



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, 

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: 
 


Kindly revert us, if you have any concerns. 

Regards, 
Baby

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon