Marker Shown for first series whereas chart shows second series.

[arj]

Hi Team,

I am trying to render multiple series and there is a case when we have multiple series stacked on top of each other the chart show the second series whereas tooltip and marker shown for the series upon point hover?

window.onload = function () {

var chart = new CanvasJS.Chart(“chartContainer”, {
title: {
text: “House Median Price”
},
axisX: {
valueFormatString: “MMM YYYY”
},
axisY2: {
title: “Median List Price”,
prefix: “$”,
suffix: “K”
},
toolTip: {
shared: false
},
legend: {
cursor: “pointer”,
verticalAlign: “top”,
horizontalAlign: “center”,
dockInsidePlotArea: true,
itemclick: toogleDataSeries
},
data: [{
type:”line”,
axisYType: “secondary”,
name: “San Fransisco”,
showInLegend: true,
markerSize: 0,
markerType: ‘cross’,
yValueFormatString: “$#,###k”,
dataPoints: [
{ x: new Date(2014, 00, 01), y: 850 },
{ x: new Date(2014, 01, 01), y: 889 },
{ x: new Date(2014, 02, 01), y: 890 },
{ x: new Date(2014, 03, 01), y: 899 },
{ x: new Date(2014, 04, 01), y: 903 },
{ x: new Date(2014, 05, 01), y: 925 },
{ x: new Date(2014, 06, 01), y: 899 },
{ x: new Date(2014, 07, 01), y: 875 },
{ x: new Date(2014, 08, 01), y: 927 },
{ x: new Date(2014, 09, 01), y: 949 },
{ x: new Date(2014, 10, 01), y: 946 },
{ x: new Date(2014, 11, 01), y: 927 },
{ x: new Date(2015, 00, 01), y: 950 },
{ x: new Date(2015, 01, 01), y: 998 },
{ x: new Date(2015, 02, 01), y: 998 },
{ x: new Date(2015, 03, 01), y: 1050 },
{ x: new Date(2015, 04, 01), y: 1050 },
{ x: new Date(2015, 05, 01), y: 999 },
{ x: new Date(2015, 06, 01), y: 998 },
{ x: new Date(2015, 07, 01), y: 998 },
{ x: new Date(2015, 08, 01), y: 1050 },
{ x: new Date(2015, 09, 01), y: 1070 },
{ x: new Date(2015, 10, 01), y: 1050 },
{ x: new Date(2015, 11, 01), y: 1050 },
{ x: new Date(2016, 00, 01), y: 995 },
{ x: new Date(2016, 01, 01), y: 1090 },
{ x: new Date(2016, 02, 01), y: 1100 },
{ x: new Date(2016, 03, 01), y: 1150 },
{ x: new Date(2016, 04, 01), y: 1150 },
{ x: new Date(2016, 05, 01), y: 1150 },
{ x: new Date(2016, 06, 01), y: 1100 },
{ x: new Date(2016, 07, 01), y: 1100 },
{ x: new Date(2016, 08, 01), y: 1150 },
{ x: new Date(2016, 09, 01), y: 1170 },
{ x: new Date(2016, 10, 01), y: 1150 },
{ x: new Date(2016, 11, 01), y: 1150 },
{ x: new Date(2017, 00, 01), y: 1150 },
{ x: new Date(2017, 01, 01), y: 1200 },
{ x: new Date(2017, 02, 01), y: 1200 },
{ x: new Date(2017, 03, 01), y: 1200 },
{ x: new Date(2017, 04, 01), y: 1190 },
{ x: new Date(2017, 05, 01), y: 1170 }
]
},
{
type: “line”,
axisYType: “secondary”,
name: “Manhattan”,
showInLegend: true,
markerSize: 0,
color: ‘red’,
markerType: ‘triangle’,
yValueFormatString: “$#,###k”,
dataPoints: [
{ x: new Date(2014, 00, 01), y: 850 },
{ x: new Date(2014, 01, 01), y: 889 },
{ x: new Date(2014, 02, 01), y: 890 },
{ x: new Date(2014, 03, 01), y: 899 },
{ x: new Date(2014, 04, 01), y: 903 },
{ x: new Date(2014, 05, 01), y: 925 },
{ x: new Date(2014, 06, 01), y: 899 },
{ x: new Date(2014, 07, 01), y: 875 },
{ x: new Date(2014, 08, 01), y: 927 },
{ x: new Date(2014, 09, 01), y: 949 },
{ x: new Date(2014, 10, 01), y: 946 },
{ x: new Date(2014, 11, 01), y: 927 },
{ x: new Date(2015, 00, 01), y: 950 },
{ x: new Date(2015, 01, 01), y: 998 },
{ x: new Date(2015, 02, 01), y: 998 },
{ x: new Date(2015, 03, 01), y: 1050 },
{ x: new Date(2015, 04, 01), y: 1050 },
{ x: new Date(2015, 05, 01), y: 999 },
{ x: new Date(2015, 06, 01), y: 998 },
{ x: new Date(2015, 07, 01), y: 998 },
{ x: new Date(2015, 08, 01), y: 1050 },
{ x: new Date(2015, 09, 01), y: 1070 },
{ x: new Date(2015, 10, 01), y: 1050 },
{ x: new Date(2015, 11, 01), y: 1050 },
{ x: new Date(2016, 00, 01), y: 995 },
{ x: new Date(2016, 01, 01), y: 1090 },
{ x: new Date(2016, 02, 01), y: 1100 },
{ x: new Date(2016, 03, 01), y: 1150 },
{ x: new Date(2016, 04, 01), y: 1150 },
{ x: new Date(2016, 05, 01), y: 1150 },
{ x: new Date(2016, 06, 01), y: 1100 },
{ x: new Date(2016, 07, 01), y: 1100 },
{ x: new Date(2016, 08, 01), y: 1150 },
{ x: new Date(2016, 09, 01), y: 1170 },
{ x: new Date(2016, 10, 01), y: 1150 },
{ x: new Date(2016, 11, 01), y: 1150 },
{ x: new Date(2017, 00, 01), y: 1150 },
{ x: new Date(2017, 01, 01), y: 1200 },
{ x: new Date(2017, 02, 01), y: 1200 },
{ x: new Date(2017, 03, 01), y: 1200 },
{ x: new Date(2017, 04, 01), y: 1190 },
{ x: new Date(2017, 05, 01), y: 1170 }
]
}]
});
chart.render();

function toogleDataSeries(e){
if (typeof(e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else{
e.dataSeries.visible = true;
}
chart.render();
}

}