Home › Forums › Report Bugs › Bubble Chart – Zoom Enabled does not support custom legend › Reply To: Bubble Chart – Zoom Enabled does not support custom legend
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();
}