Updating chart.ygrids in Billboard.js does not update the class

Question

I want to update the ygrids of the chart. It works fine instead of a part: it doesn't update the css class of it.

Probably this example is not the best way to show it, but when I'm looking in console, even if the message is changed with respect to the value, the class is not changing from min-message to max-mesagge or the other way around.

Does anyone have an idea why is this happening?

var chart = bb.generate({
  data: {
   columns: [
    ["data1", 30, 200, 100, 400, 150, 250],
    ["data2", 130, 250, 140, 200, 150, 50],
    ["data3", 100, 200, 340, 300, 250, 250],
    ["data4", 80, 230, 240, 100, 350, 150]
   ],
   type: "bar"
  },
  grid: {
   y: {
    lines: [
     {value: 100, text: 'Label 1'}
    ]
   }
  },
  transition: {
   duration: 0
  }
 });

 function toggle(remove, add) {
  setTimeout(function() {
   chart.ygrids([{
    value: remove, text: "value bigger than y max", position: "start", class: "min-message"
   }])
  }, 0);
  
  setTimeout(function() {
   chart.ygrids([{
    value: add, text: "value bigger than y max", position: "start", class: "max-message"
   }]);
  }, 100);
 }

#chart {width:400px; height:250px; }
.min-message line{
 stroke: red;
}
.min-message text{
 fill: red;
}
.max-message line{
 stroke: green;
}
.max-message text{
 fill: green;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
    <title>billboard.js</title>
</head>
<body>
<div id="chart"></div>

<button onclick="toggle(100, 300)">one</button>
<button onclick="toggle(300, 100)">two</button>
</body>
</html>

score 0 · Answer 1 · answered Apr 25 '18 at 09:50

It's a bug and will treated at https://github.com/naver/billboard.js/issues/389.

To solve for now, remove before setting grid.

setTimeout(function() {
    // remove all current grids, before adding
    chart.ygrids.remove();

    chart.ygrids([{
                value: remove, text: "value bigger than y max",
                position: "start",
                class: "min-message"
    }])
}, 0);

Updating chart.ygrids in Billboard.js does not update the class

1 Answers1