search

chartjs / chartjs-plugin-annotation

Annotation plugin for Chart.js
MIT License
606 stars 328 forks source link

Please spare some time to work on the version control and the documentation #873

Closed YoungWoong-Cho closed 1 month ago

YoungWoong-Cho commented 1 year ago

When all I want to do is overlaying a simple annotation on a plot, chart js will still be asking me tons of configs to fill in -- which is hella tedious. . . . Config file

  1. Different versions of config file Config object looks atrociously different from version to version, and I can't find a friendly documentation about different versions of config objects nowhere. What's the difference between x and xAxes?

  2. Exception handling and type mismatch Exception handling is also terrible. Only after I add some elements to the config object it complains about type mismatch, giving me something like 

    Type '{ responsive: boolean; plugins: { legend: { display: boolean; }; title: { display: boolean; }; annotation: { annotations: { line1: { type: string; yMin: number; yMax: number; borderColor: string; borderWidth: number; }; }; }; }; layout: { ...; }; scales: { ...; }; }' is not assignable to type '_DeepPartialObject<CoreChartOptions<"line"> & ElementChartOptions<"line"> & PluginChartOptions<"line"> & DatasetChartOptions<"line"> & ScaleChartOptions<...> & LineControllerChartOptions>'.

    which is stupidly long and hard to read. On top of that, when I google the error message, there's literally NILL useful answer that I can adopt. Also, the type management is terrible. I had to use a syntax like type: 'line' as 'line'. JUST LET ME UES A SINGLE STRING VALUE. . . . Unexpected behavior

    • When I define a custom ticks, the grid is gone. When I define a custom grid, the ticks are gone.
    • Drawing a vertical / horizontal line is insanely difficult. When I add a vertical line with mode = 'vertical' and specify the value, it gives me a linear line from bottom left to the top right. Why this behavior? At least provide me some useful message that helps debugging.
    • Adding a text box using annotation plugin also gives me a linear line. Again, why? . . . There are a lot more to be complained about, but I don't have more time to waste. Please, please take some time to work on the documentation.
stockiNail commented 1 year ago

@YoungWoong-Cho I'm sorry for that. Nevertheless there are some items of your issue not clear to me, I'm sorry again.

Different versions of config file Config object looks atrociously different from version to version, and I can't find a friendly documentation about different versions of config objects nowhere. What's the difference between x and xAxes?

The chartjs-plugin-annotation options don't have any option named as x or xAxes. probably you are referring to Chart.js options where those options area changed by major version, version 3 and 4.

Exception handling and type mismatch Exception handling is also terrible.

Also here it seems something related to Chart.js and not to the plugin. Anyway a sample with the code could help, I guess.

Also, the type management is terrible. I had to use a syntax like type: 'line' as 'line'. JUST LET ME UES A SINGLE STRING VALUE.

Is this issue related to annotation type or chart one? Here I can try to do some tests and see if as 'line' is really needed.

When I define a custom ticks, the grid is gone. When I define a custom grid, the ticks are gone.

The chartjs-plugin-annotation doesn't touch anything related to grid or ticks. I think you are referring to Chart.js behavior. Anyway a sample with the code could help, I guess.

Drawing a vertical / horizontal line is insanely difficult. When I add a vertical line with mode = 'vertical' and specify the value, it gives me a linear line from bottom left to the top right. Why this behavior? At least provide me some useful message that helps debugging.

You are referring to mode='vertical' therefore I'm assuming you are using the annotation plugin 0.5.7 because that option as been removed from version 1. The mode is not needed anymore because the plugin is detecting the line orientation on the axis one. The behavior you are mentioning is usually referred to a missing axis that you set to your annotation. Do you have the annotation configuration in order to check what is not well configured? And can you share the plugin version you are using?

Adding a text box using annotation plugin also gives me a linear line. Again, why?

To evaluate if it's a bug or not, could you share the annotation config you are using? When you write "text box" is not clear if you are using a type='box' or type='label' annotation.

All options of the annotation plugin have got a default therefore it sounds weird that you should define all options. If you can share the whole chart config (with the annotations) could be really helpful to help you and to improve the documentation where it's not so clear as you expected. Thanks a lot in advance.