Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Line and Point on single chart with different X and Y Values


I am trying to display line and point on a single chart. But here the X axis and Y axis values for line and point have different data.

How to give two X-axis values in series chart ?

Expected Output

Code I am using : Table [A] have columns - LineX,LineY,PointX,PointY. 

for (var i = 0; i < lenght; i++)

data.push({  'LineX': LineX[i], 'LineY': LineY[i] , 'PointX': PointX[0],'PointY': PointY[0] });

function CreateChart(chartID, chartTitle) {
width: "780px",
height: "300px",
title: chartTitle,
titleTextColor: 'black',
horizontalZoomable: true,
verticalZoomable: true,
dataSource: data,
legend: { element: "legendOne",type:"legendOne" },
axes: [
name: "xAxis", type: "categoryX",label: "LineX", title: "Line X", titleTextColor: "black",
labelTextStyle: "10pt Segoe UI",
name: "yAxis", type: "numericY", title: "Y Value", titleTextColor: "black", titleAngle: -90,
labelTextStyle: "10pt Segoe UI",
series: [
CreateSeries("point", "PointY"),
CreateSeries("line", "LineY")

function CreateSeries(seriesType, seriesMemberPath) {
var thickness = 3;
var markerType;
if (seriesType == "point") {
markerType = "circle";
markerType = "none";
var series = {
type: seriesType,
markerType: markerType,
xAxis: "xAxis",
yAxis: "yAxis",
name: seriesMemberPath + "series",
title: seriesMemberPath,
valueMemberPath: seriesMemberPath,
isTransitionInEnabled: true,
isHighlightingEnabled: false,
showTooltip: true,
thickness: thickness
return series;

Here, we cannot give PointX value, X axis is only taking the LineX Value.

For above coding we are getting multiple Points. Find the below Screenshot