gridColor applied to wrong axis

[ixje]

• I have searched for existing issues
• I have provided detailed instructions that can reproduce the issue (including code and data necessary)

The newly added gridColor option (see #121) has the axis swapped. Specifying a gridColor on the x-axis options will cause it to draw vertical lines in that color, and for the y-axis options it draws horizontal lines.

Example:

            axisX: {
                gridColor: 'red',
                tickColor: 'red',
                ...
            }
            axisY: {
                gridColor: 'green',
                tickColor: 'green',
                ...
            }

produces the following:

I'm new to the whole library, but as far I think it works is that the lines are drawn from the tick positions and then up (for x-axis) or right (for y-axis) to create the gridlines. With that assumption I found the quickest solution to be just swapping the values around to the correct axis. Each chart seems to start with
let options = new Options(this.props)

So I have a quick fix in the constructor of the Options class that I can PR for, if

• we agree this is actually an issue and not intended behaviour
• the below suggestion is the right place to solve the problem (that depends if my above understanding about how the grid lines are drawn was correct)

In the Options class:

       this.options = props.options || {}
        if (this.options.axisX && this.options.axisY) {
            // get axis color if any
            let yGridColor = this.options.axisX.gridColor || null
            let xGridColor = this.options.axisY.gridColor || null
            // swap to correct axis
            this.options.axisX.gridColor = xGridColor
            this.options.axisY.gridColor = yGridColor
        }

This simply swaps the gridColor for the axises before the charts start using them. If the gridColor key is not specified it will use the default.

[marzolfb]

The current behavior is intended. Gridlines beginning at the x-axis and going upward/vertically should be styled using the axisX property for the chart options and, correspondingly, gridlines beginning at the y-axis and going rightward/horizontally should be styled using the axisX property for the chart options.

Its possible I am misunderstanding something, so I will just ask why do you think the axis properties in the chart options are reversed from what they should be?

[ixje]

Its possible I am misunderstanding something, so I will just ask why do you think the axis properties in the chart options are reversed from what they should be?

The reason why I think it's reversed for the gridColor only is as follows. y-axis is naturally associated with vertical, and x-axis with horizontal. When you want to change e.g. the horizontal labels, you change them on the x-axis. If you want to change the vertical axis title or labels you look at the y-axis. When I want to change horizontal lines, I would expect to do that on the x-axis, but only for the grid lines it should be done on the y-axis. The default behaviour makes sense from an implementation perspective, but from usability it does not (to me at least). Either way, it's not a big deal and I read now that this is intended behaviour so I'll close the issue.