Billboard.js: Grid lines don't match tick values on x axis

[danieloliveira117]

Description

When adding custom tick values (axis.x.tick.values) and showing the grid lines on the x axis, the grid lines don't match the tick values.

When doing the same on the y axis, the grid lines match the tick values.

Steps to check or reproduce

1. Enable grid lines on x axis
2. Add custom values to the tick on the x axis

https://jsfiddle.net/FreezinG117/xv4rzs1d/12/

[netil]

Hi @FreezinG117, thanks for the report.

x grid lines aren't aligned with the x Axis tick.

I'll check for this.

[netil]

@FreezinG117 fixed.

checkout the nightly (the version after 1.8.0-nightly-20190329101102) to use fixed version.

• https://github.com/naver/billboard.js/tree/nightly/dist

[danieloliveira117]

@netil Thank you for your quick response.

But the issue I was referring to is:

• If you notice on the y axis: the tick values are [0, 10, 20, ...] and the grid is on 10, 20, 30, ...
• But in the x axis: the values are [0, 10, 20, ...] and the grid is on 5, 10, 15, 20, ...

I don't if it's by design, but the y grid lines always match what is in the axis.y.tick.values array.
That doesn't not happen on the x axis.

Here's another fiddle to better show what I mean:
https://jsfiddle.net/FreezinG117/xv4rzs1d/20/

[netil]

x axis

I've noticed that you've been used data.x and axis.x.tick.values both.
Usually, when you declare data.x and a data with x key at data.columns, that means defining x axis tick values.
js var chart = bb.generate({ data: { x: 'x', // <-- using with 'axis.x.tick.values' is ambiguous columns: [ ["x", 40, 20, 10, 40, 50, 20], ... axis: { x: { tick: { values: [0, 10, 20, 30] // <-- using with 'data.x' is ambiguous

In this case you should remove one of the x axis tick values definition.
And also x axis tick values' count must match with the data length.

y axis

The y axis range for displaying data, is automatically fitted according the data values to be displayed.
In this case, the minimum data is 10. So, the chart is try displaying to be best fitted in a range of 10 ~ 50.

If the data contains 0, in that case the grid(y axis) will be displaying correctly.
But, in most cases the chart should be handling different data values.

So, if you don't want to be scaled automatically you set axis.y.min value to 0, which will make displaying y axis always from 0.

checkout the fiddle example below

• https://jsfiddle.net/zdp6gyL7/

[danieloliveira117]

@netil Again, thank you for your quick response, but I don't think I explained my issue correctly.

What I get:

What I want:

Notice the grid lines where there are no tick values.
Is there any way that I can get the grid lines in 10 by 10 instead of 5 by 5?

[netil]

@FreezinG117, do

bb.generate({
    data: {
        columns: [
            ["data1", 30, 10, 10, 20, 20, 50]
        ],
        type: 'scatter'
    },
    grid: {
        x: {
            show: true
        },
        y: {
            show: true
        }
    },
    axis: {
        x: {
            min: 0,
            padding: {
                left: 0
            },
            tick: {
                format: function(x) {
                    return x * 10;
                }
            }
        },
        y: {
            min: 0,
            padding: {
                bottom: 0
            },
            tick: {
                values: [0, 10, 20, 30, 40, 50, 60]
            }
        }
    }
});

[solo-way]

Hi @netil
The issue regarding grid shift relative to the ticks is still relevant :(
Just check this out: https://naver.github.io/billboard.js/demo/#Grid.GridLines

[netil]

Hi @solo-way, the issue was fixed by #821 and the fix will be included as part of v1.9(will be released by June 14th), which wasn't released yet. So, the current latest 1.8.1, doesn't reflect the changes.

If you want test fixed version, try with the nightly build meanwhile.

[solo-way]

Thank You very much. Got it.