Bubble Chart – Zoom Enabled does not support custom legend

[jedddelosreyes]

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”,
dataPoints: [
{ x: 39.6, y: 5.225, z:1347, name:”China” , legendText : “China”},
{ x: 3.3, y: 4.17, z:21.49, name:”Australia”,legendText : “Australia” },
{ x: 1.5, y: 4.043, z:304.09, name:”US”,legendText : “US” },
{ x: 17.4, y: 2.647, z:2.64, name:”Brazil”,legendText : “Brazil” },
{ x: 8.6, y: 2.154, z:141.95, name:”Russia”,legendText : “Russia” },
{ x: 52.98, y: 1.797, z:1190.86, name:”India”,legendText : “India” },
{ x: 4.3, y: 1.735, z:26.16, name:”Saudi Arabia”,legendText : “Saudi Arabia” },
{ x: 1.21, y: 1.41, z:39.71, name:”Argentina”,legendText : “Argentina” },
{ x: 5.7, y: .993, z:48.79, name:”SA”,legendText : “SA” },
{ x: 13.1, y: 1.02, z:110.42, name:”Mexico”,legendText : “Mexico” },
{ x: 2.4, y: .676, z:33.31, name:”Canada” ,legendText : “Canada” },
{ x: 2.8, y: .293, z:64.37, name:”France”,legendText : “France” },
{ x: 3.8, y: .46, z:127.70, name:”Japan”,legendText : “Japan” },
{ x: 40.3, y: .52, z:234.95, name:”Indonesia”,legendText : “Indonesia” },
{ x: 42.3, y: .197, z:68.26, name:”Thailand” ,legendText : “Thailand” },
{ x: 31.6, y: .35, z:78.12, name:”Egypt” ,legendText : “Egypt” },
{ x: 1.1, y: .176, z:61.39, name:”U.K”,legendText : “U.K” },
{ x: 3.7, y: .144, z:59.83, name:”Italy”,legendText : “Italy” },
{ x: 1.8, y: .169, z:82.11, name:”Germany”,legendText : “Germany” }
]
}]
});
chart.render();

}

[Vishwas R]

@jedddelosreyes,

legendText in dataPoint level works only in Pie, Doughnut, Funnel and Pyramid charts, whereas legendText in dataSeries level – that describes the dataSeries, works across every chart type. Setting legendText in dataSeries level should work fine in your case.

However if you are trying to show some text to every dataPoint, you can use indexLabel.

—
Vishwas R
Team CanvasJS

[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.

[Vishwas R]

@jedddelosreyes,

Adding legendText doesn’t affect zooming. The code that you have shared seems to be working fine.

Can you kindly create jsfiddle reproducing the issue, so that we can look into it, understand the use-case better and help you out?

—
Vishwas R
Team CanvasJS

[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();

}

[Vishwas R]

@jedddelosreyes,

The behavior of zooming in your case is due to number of dataPoints in each dataSeries. We will reconsider this behavior for future releases.

Showing legends to every dataPoint in bubble chart is not possible, as of now. I would suggest you to use single dataSeries with custom legends as shown in this jsfiddle.

If you have any other queries / issues, kindly create jsfiddle reproducing the issue and share the same.

—
Vishwas R
Team CanvasJS

[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

[Vishwas R]

@jedddelosreyes,

You can brighten the color of dataPoint on hovering the custom legend as shown in this jsfiddle or you can change the transparency of the color of dataPoint on mouseover as shown in this jsfiddle.

—
Vishwas R
Team CanvasJS