Line is diagonal if yAxis options set

[victorbnl]

If no title is set for yAxis, it behaves correctly, there is an horizontal line

But if we set a title, the line becomes diagonal:

To reproduce,

Go on https://www.chartjs.org/chartjs-plugin-annotation/master/guide/types/line.html#configuration and add in the options:

scales: {
    yAxis: {
        title: {
            display: true,
            text: "My First Dataset"
        }
    }
},

[victorbnl]

Update: it's not only with a title, it's for everything that uses yAxis; it even works with

scales: {
    yAxis: {}
},

[victorbnl]

Update 2: it's because these options makes the Y axis ID become yAxis while chartjs-plugin-annotation expects it to be y.

Two solutions:

1. Use y as the ID:

   scales: {
       y: {
           // ...
       }
   },

2. Specify the name of your axis in chartjs-plugin-annotation's options:

   plugins: {
       annotation: {
           annotations: {
               _: {
                   yScaleID: 'yAxis'
               }
           }
       }
   }

I think this should be explicited in the documentation, even more given that the name yAxis is used a lot in chartjs' one.

[stockiNail]

@victorbnl thank you very much for feedback.

As of Chart.js version 3, the default axes ids are x and y and this is the reason why the plugin is using x and y as default for x/yScaleID options.

I think x/yAxis is coming from Chart.js version 2 where the axes were defined in x/yAxes options as an array of axes.

As you can see from plugin documentation, https://www.chartjs.org/chartjs-plugin-annotation/master/guide/types/line.html#configuration, x/yScaleID have got a default and is reported in the documentation (see last column of the options table).

How do you think we can improve it that documentation?

[kurkle]

I think we could improve the defaults to be the first axes in the chart, which would mean you only need to specify when more than two scales are involved. That would be a breaking change, so something to consider for v2.

[stockiNail]

Maybe there is not a breaking change because if you are using it, you are already defining which axis you want, if not it will use the what it's defined in the chart and therefore it will be x/y and nothing should change.

[victorbnl]

I totally agree! And maybe chartjs' documentation should use x and y for the samples, maybe I could make them a pull request

[stockiNail]

I have set this issue and the PR #678 as breaking change because the x/yScaleID options defaults are changed.