Improve the author's ability to configure axis tick label density and format

[charlesons]

This support request is based on feedback from a content author using Chart Builder to create a line chart for figure 2 in the following article:

https://staging.climate-change.data.gov.uk/articles/measuring-greenhouse-gas-emissions

The data for the chart are a quarterly time series however the desired X axis tick label density is annual.

The X axis tick labels are currently rendering as YYYY-QX where YYYY is the year and X is the quarter.

The chart we are aiming to replicate is as follows:

On the original chart above the annual tick labels render as YYYY (but the quarterly data point are still plotted).

A simple workaround is to average the data per year (upstream in CSV or PMD) and then plot the annual averages but we would lose some granularity of the data that way.

This case illustrates the need for more control over the tick label density on the axes, and perhaps also the ability to adjust the label format (e.g. ability to remove the QX at the end of the year label).

Tasks:

• [x] Investigate how we can implement this capability (e.g. via the Plotly API)
• [x] Establish the range of likely scenarios where tick label customisation may be required
• [x] Implement the capability

[charlesons]

Implementation offers multiple options to the user to customise the axis tick labels:

The new capabilities have been applied to both X and Y axes.

At the top level there are auto and manual modes:

Auto mode

This is the default Plotly behaviour and is what was previously available in Chart Builder. We have added an additional property show n ticks that shows in auto mode . When the user enters a number in this property the chart will show the specified number of ticks on the axis.

Manual mode

Manual mode offers more configuration options for the axis tick labels:

• Truncate the labels to a certain length
• Tick interval property to set ticks to show and the specified interval
• Start label property to specify the text of the first tick label on the axis
• Last label property to specifiy the text of the last tick label on the axis

[charlesons]

Screenshots showing the new capability applied against the dataset that highlighted the issue.

Auto mode with show n ticks set to 14

Manual mode with Tick label max. length set to 4, Tick interval set to 4 and Last tick label set to "2021"

[charlesons]

Note that in manual mode there is a minor issue in that the hover info label doesn't show the X value where an X value isn't available in the axis tick labels (e.g. the quarterly X values in this example). This appears to be a limitation of what is possible with the Plotly API.