Home forums Report Bugs Bubble Chart – Zoom Enabled does not support custom legend

Tagged: , ,

This topic contains 7 replies, has 2 voices, and was last updated by  Vishwas R 2 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #21879

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

    }

    #21881

    Vishwas R
    Keymaster

    @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

    #21882

    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.

    #21883

    Vishwas R
    Keymaster

    @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

    #21886

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

    }

    #21888

    Vishwas R
    Keymaster

    @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

    #21903

    @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

    #21905

    Vishwas R
    Keymaster

    @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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.