naver / billboard.js

📊 Re-usable, easy interface JavaScript chart library based on D3.js
https://naver.github.io/billboard.js/
MIT License
5.83k stars 350 forks source link

Doughnut slice disappears when data label is same as a html colour #3321

Closed manijbasnet closed 1 year ago

manijbasnet commented 1 year ago

Description

On a doughnut chart, if i have a label that is also a html colour name (e.g. Gold, Silver, etc), the slice with that colour disappears when my cursor enters the area. The slice does not reappear when my cursor leaves the area. Below is the example i used from the demo link (https://naver.github.io/billboard.js/demo/#Chart.DonutChart) but i have changed the label.

Steps to check or reproduce

var chart = bb.generate({
  data: {
    columns: [
    ["data1", 30],
    ["data2", 120]
    ],
    type: "donut", // for ESM specify as: donut()
    onclick: function(d, i) {
    console.log("onclick", d, i);
   },
    onover: function(d, i) {
    console.log("onover", d, i);
   },
    onout: function(d, i) {
    console.log("onout", d, i);
   }
  },
  donut: {
    title: "Iris Petal Width"
  },
  bindto: "#donutChart"
});

setTimeout(function() {
    chart.load({
        columns: [
            ["gold", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
            ["silver", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
            ["bronze", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
        ]
    });
}, 1500);

setTimeout(function() {
    chart.unload({
        ids: "data1"
    });
    chart.unload({
        ids: "data2"
    });
}, 2500);
watnab commented 1 year ago

the slice with that colour disappears

The "d" attribute of the path element of the slice seems to be broken. d="M 0 0"

watnab commented 1 year ago

https://github.com/naver/billboard.js/blob/e35d0d00d4b23625b84ea68693247315ace2aeae/src/ChartInternal/shape/arc.ts#L358 It seems updated can be null when the label is same as a html color. I could not see the reason though.

netil commented 1 year ago

Hi @manijbasnet, it seems a side effect from #2938 (starting from v3.7)