Scatter chart with line

[David Price]

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]

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