Multi axis line chart

[misaki-web]

Here's an example of multi axis line chart in the Chart.js documentation:

Scales settings must have y and y1, and each dataset must be linked to a specific axis. Here's a very quick and dirty way just to get an idea of what's needed:

# In the `functions.php` theme file:
function chartjs_filter($output, $tag, $atts) {
    if ($tag == 'chartjs') {
        $custom_scales = <<<SCALES
            scales: {
              y: {
                type: 'linear',
                display: true,
                position: 'left',
              },
              y1: {
                type: 'linear',
                display: true,
                position: 'right',
              },
            }
        SCALES;
        $output = str_replace('}} };', '}},' . $custom_scales . '};', $output);
        $output = str_replace('datasets:[{', 'datasets:[{"yAxisID": "y",', $output);
        $output = str_replace('"showLine":true}]};', '"showLine":true,"yAxisID":"y1"}]};', $output);
    }

    return $output;
}
add_filter('do_shortcode_tag', 'chartjs_filter', 10, 3);

The shortcode to test:

[chartjs type="line"]Year,Dataset1,Dataset2
2016,125,2451.32
2017,158,1878.00
2018,215,1256.32
2019,325,34521.32
2020,500,1896.32
2021,251.32,2725.32[/chartjs]

The result:

[bobbingwide]

Reopening to enable the multi axis logic to be made active in the block editor.

• The input field labeled Y-axes hold the attribute called yAxes.
• This is implemented in the server code as a comma separated list of y's or y1's.
• For each set of numbers the code determines the applicable y-axis
• When empty there's only one y-axis.
• When it contains values they can either be y or y1
• Unset / invalid values are assumed to be y

In the editor code each object in datasets needs to have the yAxisID attribute set to "y" or "y1".

Also when multiple axes are required options.scales.y1 needs to be set similar to scales.y but with "position":"right"

eg

"y1":{"beginAtZero":true,"position":"right","stacked":false}}};

[bobbingwide]

Here's a screenshot of the front-end for 4 charts with identical values but different setttings for the y-axes.

Here's a screenshot of the block editor for the same 4 charts.

Notes:

• The charts look the same; the columns and axes are the same.
• The x-axis font size is not being applied on the front end.
• It's not easy that to tell which y-axis applies to each range of numbers
• The scale for the right y-axis in the fourth chart ( left,right,left ) comes from the only set of numbers marked as y1 ( 30, 40, 50 )

Current limitations

• It's not possible to choose to have the right y-axis ( y1 ) only; the left y-axis will default from 0 to 1.0
• The y-axis logic doesn't work for horizontal bar charts.

[bobbingwide]

The x-axis font size is not being applied on the front end.

That's because we haven't completed #21

[bobbingwide]

Note: If you deselect all the lines that are used for a particular y-axis the scales are reset. This is standard chart.js behaviour that probably isn't easy to change.

When there are more than 2 lines the result of deselection is quite interesting.

[bobbingwide]

The block editor should support charts where the yAxes attribute is not set. It currently produces an error Cannot read properties of undefined (reading 'includes') at

if ( this.attributes.yAxes.includes( 'y1' ) ) {

[bobbingwide]

Deliveredin v1.2.0