Data Series Name

[rameshkv]

Hi,

The data series name is not displayed in the stacked area chart. My code is below:

var chart = new CanvasJS.Chart(“chartContainer”, {
backgroundColor: “black”, zoomEnabled: true,
title:{ text: “E & O Trend”, animationEnabled: true, fontColor:”white”, fontSize:16},
axisX: {labelFontSize:12, labelFontColor: “yellow”, titleFontSize:12, titleFontColor:”yellow”, title:”Weeks”},
axisY:{ includeZero: false, labelFontSize:12, labelFontColor: “yellow”,titleFontSize:12, title: “Value in $000″, titleFontColor:”yellow”},
toolTip:{shared: true},
legend: {
cursor: “pointer”,
itemclick: function (e) {
//console.log(“legend click: ” + e.dataPointIndex);
//console.log(e);
if (typeof (e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}

e.chart.render();
}
},
data: [{
showInLegend: true, name:”NM”,fontColor: “yellow”,
type: “stackedArea”,
dataPoints: [{x: 1,y: 5}, {x: 2,y: 9}, {x: 3,y: 17},
{x: 4,y: 32}, {x: 5,y: 22}, {x: 6,y: 14},
{x: 7,y: 25}, {x: 8,y: 18}, {x: 9,y: 20},
{x: 10,y: 15}, {x: 11,y: 26}, {x: 12,y: 22}
]
}, {
showInLegend: true, name: “SM”,fontColor: “yellow”,
type: “stackedArea”,
dataPoints: [{x: 1,y: 7}, {x: 2,y: 12}, {x: 3,y: 15},
{x: 4,y: 22}, {x: 5,y: 32}, {x: 6,y: 18},
{x: 7,y: 15}, {x: 8,y: 8}, {x: 9,y: 26},
{x: 10,y: 25}, {x: 11,y: 22}, {x: 12,y: 29}

]
}, {
showInLegend: true, name: “E1”,fontColor: “yellow”,
type: “stackedArea”,
dataPoints: [{x: 1,y: 7}, {x: 2,y: 12}, {x: 3,y: 15},
{x: 4,y: 22}, {x: 5,y: 32}, {x: 6,y: 18},
{x: 7,y: 15}, {x: 8,y: 8}, {x: 9,y: 26},
{x: 10,y: 25}, {x: 11,y: 22}, {x: 12,y: 29}

]
}, {
showInLegend: true, name: “E2”,fontColor: “yellow”,
type: “stackedArea”,
dataPoints: [{x: 1,y: 7}, {x: 2,y: 12}, {x: 3,y: 15},
{x: 4,y: 22}, {x: 5,y: 32}, {x: 6,y: 18},
{x: 7,y: 15}, {x: 8,y: 8}, {x: 9,y: 26},
{x: 10,y: 25}, {x: 11,y: 22}, {x: 12,y: 29}

]
}, {
showInLegend: true, name: “E3”,fontColor: “yellow”,
type: “stackedArea”,
dataPoints: [{x: 1,y: 3}, {x: 2,y: 7}, {x: 3,y: 11},
{x: 4,y: 31}, {x: 5,y: 20}, {x: 6,y: 24},
{x: 7,y: 5}, {x: 8,y: 28}, {x: 9,y: 10},
{x: 10,y: 23}, {x: 11,y: 16}, {x: 12,y: 12}

]
}]
});

chart.render();

help me fix this.

[Sanjoy]

Rameshkv,

Here, background and fontColor of legend are same. So, it’s not visible. You can show it by setting fontColor other then black.