feat: Multi Y-Axis Support & Y-Axis Label Support

[cujojp]

Explanation About What Code Achieves:

@frlinw mentioned in issue #160 the desire for multi axis support. However, it's been more than a year and we haven't seen that feature added. I decided to go ahead and work on that feature and this is it! 🎉 Also included is the ability to label the y-axis which was requested by @lasalesi in #219.

The configurations is pretty simple. Within the axisOptions configuration property you will need to include a new yAxis array which contains your yAxis objects. Within each yAxis object you will include the following properties:

property	definition
id	id of the axis
position	positioning of axis on the chart (left or right)
yAxisMode	span or tick (default is span)
title	the label of the axis (optional)

The datasets array need to include an axisID to match with the name of the coexisting y-axis id that was defined in the yAxis configuration object.

Here is an example of how the configuration should look:

new Chart('#Chart', {
    axisOptions: {
        xIsSeries: true,
        yAxis: [
            {
                id: 'right-axis',
                position: 'right',
                yAxisMode: 'span',
                title: 'Label Right'
            },
            {
                id: 'left-axis',
                position: 'left',
                yAxisMode: 'span',
                title: 'Label Left'
            }
        ]
    },
    barOptions: {
        stacked: false,
        spaceRatio: 0.7
    },
    data: {
        labels: [
            '12am-3am',
            '3am-6pm',
            '6am-9am',
            '9am-12am',
            '12pm-3pm',
            '3pm-6pm',
            '6pm-9pm',
            '9am-12am'
        ],
        datasets: [
            {
                axisID: 'left-axis',
                name: 'Price',
                type: 'line',
                values: [25, 40, 30, 35, 8, 52, 17, 0]
            },
            {
                axisID: 'right-axis',
                name: 'Visits',
                type: 'line',
                values: [12000, 18760, 11290, 25800, 19240, 17200, 8200, 16050]
            }
        ]
    },
    type: 'axis-mixed',
    animate: 1,
    height: 500,
    colors: ['#FBD1A2', '#7DCFB6']
});

Note: If you only need one y-axis you can only include one object within the yAxis array in the axisConfiguration object.

This should be a non-breaking change and is backwards compatible with existing configuration settings, users will not need to change any existing configurations.

Here is a JSFiddle with the working feature.

Screenshots/GIFs:

TODOs:

• Currently if you define a y-axis label with a smaller-height chart, the labels will clash with the values.

[cujojp]

@scmmishra or any maintainers want to give this a gloss over?

I feel it might be a huge step in the right direction for adding this feature. The want for this feature has been mentioned a couple times. 🎉

[vronnieli]

@scmmishra Hi Shivan, just wanted to flag this PR to your attn again. Would love to see this feature added as well.

[Kikobeats]

This feature is super convenient, hope it will be land soon 😭

[azarai]

Any updates on that? It's been open for over a year now with no visible progress.

[uhrjun]

Any updates on that? It's been open for over a year now with no visible progress.

The project was stale and unattended for a while. Look forward to work on this PR over the next few days.