Chart's Y-axis does not re-render properly in Billboard.js

Question

There is a chart generated in Billboard.js which has the possibility to introduce custom values as minimum and maximum for the Y-axis.

The problem that I encounter is that even the axis is changing when the values are modified, they are not very close to the introduced value.

For example this screenshot:

On the maximum value I don't think it is a great problem. But on the minimum one it is. The default value was 0, after there was introduced 300 I would expect to start from a closer value to it, not 0 as before. The Y-axis just moved few pixels after that change.

The html code:

<input type="number" ng-change="$ctrl.updateY('max')" ng-model="$ctrl.max">

The JS code:

updateY(val) {
    if(val=== 'max') {
        if(this.max || this.max === 0) {
            this.maxValue = this.max;
        }
    } else {
        if(this.min || this.min === 0) {
            this.minValue = this.min;
        }
    }
    const maxNumber = Number(this.maxValue);
    const minNumber = Number(this.minValue);
    this.lineView.chart.axis.range({max: {y: maxNumber}, min: {y: minNumber}});
    this.resetY = false;
}

This is the code for max, same one for min.

I think that maybe the problem is from range, it doesn't generate the Y-axis with the values introduced.

Any suggestions?

Could you provide a working reproducible demo? and what is the value for the orange color line? — Jae Sung Park, Feb 26 '18 at 06:36
probably it's very difficult to make a working demo for this one. the value for orange line it's between 0 and 20 most of the time — Samurai Jack, Feb 26 '18 at 08:19

score 0 · Accepted Answer · answered Feb 26 '18 at 08:21

0

It is rendering much closer to the introduced values if it is added a padding in bb.generate:

const chart = bb.generate({
...
"axis": {
...
"y": {
...
        "padding" : {
        top: 0,
        bottom: 10
        }

...

answered Feb 26 '18 at 08:21

Samurai Jack

2,985
8
35
58

Chart's Y-axis does not re-render properly in Billboard.js

1 Answers1