[jedddelosreyes]

@vishwas,

Thank you for your sample jsfiddle.

I would like to ask if there’s existing behavior that when you hover the legend will focus/emphasize the points on chart?

Thanks

[jedddelosreyes]

Hi, here is the sample code I want to work.

window.onload = function () {
var chart = new CanvasJS.Chart(“chartContainer”, {
animationEnabled: true,
zoomEnabled: true,
theme: “light2”,
title:{
text: “Employment in Agriculture vs Agri-Land and Population”
},
legend: {
horizontalAlign: “right”,
verticalAlign: “center”
},
axisX: {
title:”Employment – Agriculture”,
suffix: “%”,
minimum: 0,
maximum: 61,
gridThickness: 1
},
axisY:{
title: “Agricultural Land (million sq.km)”,
suffix: “mn”
},
data: [{
type: “bubble”,
showInLegend : true,
toolTipContent: “<b>{name}</b><br/>Employment: {x}% <br/> Agri-Land: {y}mn sq. km<br/> Population: {z}mn”,
legendText : “China”,
dataPoints: [
{ x: 39.6, y: 5.225, z:1347, name:”China” }
]
},
{
type: “bubble”,
showInLegend : true,
toolTipContent: “<b>{name}</b><br/>Employment: {x}% <br/> Agri-Land: {y}mn sq. km<br/> Population: {z}mn”,
legendText : “Australia”,
dataPoints: [
{ x: 3.3, y: 4.17, z:21.49, name:”Australia”,legendText : “Australia” }
]
},
{
type: “bubble”,
showInLegend : true,
toolTipContent: “<b>{name}</b><br/>Employment: {x}% <br/> Agri-Land: {y}mn sq. km<br/> Population: {z}mn”,
legendText : “US”,
dataPoints: [
{ x: 1.5, y: 4.043, z:304.09, name:”US”,legendText : “US” }
]
},
{
type: “bubble”,
showInLegend : true,
toolTipContent: “<b>{name}</b><br/>Employment: {x}% <br/> Agri-Land: {y}mn sq. km<br/> Population: {z}mn”,
legendText : “Brazil”,
dataPoints: [
{ x: 17.4, y: 2.647, z:2.64, name:”Brazil”,legendText : “Brazil” }
]
},
{
type: “bubble”,
showInLegend : true,
toolTipContent: “<b>{name}</b><br/>Employment: {x}% <br/> Agri-Land: {y}mn sq. km<br/> Population: {z}mn”,
legendText : “India”,
dataPoints: [
{ x: 52.98, y: 1.797, z:1190.86, name:”India”,legendText : “India” }
]
},
{
type: “bubble”,
showInLegend : true,
toolTipContent: “<b>{name}</b><br/>Employment: {x}% <br/> Agri-Land: {y}mn sq. km<br/> Population: {z}mn”,
legendText : “Saudi Arabia”,
dataPoints: [
{ x: 4.3, y: 1.735, z:26.16, name:”Saudi Arabia”,legendText : “Saudi Arabia” }
]
}]
});
chart.render();

}

[jedddelosreyes]

Yes, I have tried adding the legendText in DataSeries level but the zoom capacity is not working. The result of adding the indexLabel was not that good in the eye. I prefer having the legend on the sides and still be able zoom in and out.