[Research] Improve configuration options for Charts

[kodeaben]

• [x] I have written a good issue

Describe the research request

It is difficult for the users of the Kirby charts to make changes/additions to the charts.

This results in either requests to the Kirby team to fix bugs or add functionality, or the teams implementing their own charts, thus not using Kirbys.

This issue investigates how Kirby can offer a chart which gives the implementer more freedom to modify and add functionality to the table.

This will include talking to developers who are using charts.

Whats the outcome?

The outcome of this investigation is a plan on how to improve the usage of Kirbys charts for its users.

Have you considered any alternatives?

This issue is considering ALL possibilities.

Are there any additional context?

No

[MartinCBBankdata]

Yes, this is very a nice post to have and I have a few comments.

• First of all we have chosen to use chartjs-plugin-labels because we found that label placement was too difficult using Annotations since you have to specify the location manually versus the plugin which have built in placement of label. The custom setting are top, bottom, left, right and offset. However the plugin is not perfect: it does not take into consideration the axises and graph itself. If the label goes over the linechart or one of the axis, it does not switch to a new location. (It is our plan to switch to Annotation since there now is a task to fix the problem with overlapping labels with axis).
  • Improvement suggestions to Kirby Annotation:
    • Label placement relative to point which contains the label.
    • Offset for relative placement.
    • Readjust placement of labels if it overlaps with graph.
• Secondly we chose to use chartjs zoom plugin. It is used to create a date range selector with buttons "2 week", "1 month" etc and a custom date range selector with input fields (When custom date range is selected the input fields replaces the hard coded date range selector with buttons). Our problem was when Chart.register(zoomPlugin); is executed, only the ChartJS register the plugin however Kirby Chart does not. To fix this we made a hack where we get the ChartJS object from the Kirby Chart and from this we can use functions like ChartJS.zoomScale to adjust the view with a new date range. This "hack" also solved another problem we had which was the Kirby Chart does have a function called update(); to force an update to the Chart. We still have one problem and that is making the graph wait with first draw until data is ready. The initialize function is so that we can wait to create the Chart when our data is ready to be shown and our Chart.Option has been set up the right data.
  • Improvement suggestions to Kirby Chart functionality:
  • The Kirby register plugin functions and Kirby Chart gets an update() function and an initialize function to create the Chart.
  • If the above is not possible it would be nice to have "get" function on the ChartJS object so it is accessible.
  • It would be nice to have the date range selector as a part of the Kirby framework.
• Thirdly we already know we are going to have challenges with displaying a legend for the graph because we need to show an icon that matches color and/or type of the line shown in the graph. An example would be a blue dashed line the icon should be blue colored "--" in the legend with a label describing what it is.
  • Improvement to Kirby Chart Legend:
    • Icons of line type with color and custom label.