[V3] 2 y axis for one data

[JeremieBergeron]

Here is my chart criteria:

• I would like to have 2 y axis for the same data.
  Y left axis: "Dollars"
  Y right axis: "Percentage"

• The 100% percentage will be a value that is not in my datasets.
  In this example, 10 would be my 100% value s (in reality, 10 would be a variable)

• I want my dollars and percentage axis to beginAtZero and it could finish at any number (even number more than 100%).

• I want my percentage axis to do stepSize of 10

• I would like to have a horizontal line at 70%. It is basically this answer.

Could someone please help me to construct a chart that would respect these criteria?

Here is what I currently have: Quickchart

I have also try that, but I am not able to not display the bar from the right-y-axis

        const config = {
            type: 'bar',
            data: {
                labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                datasets: [
                    {
                        label: 'Money',
                        data: [18, 12, 6, 9, 12, 3, 9],
                        yAxisID: 'left-y-axis',
                        backgroundColor: 'rgba(255, 26, 104, 0.2)',
                    },
                    {
                        data: [18, 12, 6, 9, 12, 3, 9],
                        //hidden: true,
                        yAxisID: 'right-y-axis',
                    },
                ],
            },
            options: {
                scales: {
                    'left-y-axis': {
                        position: 'left',
                        title: {
                            display: true,
                            text: 'Dollars',
                        },
                    },
                    'right-y-axis': {
                        position: 'right',
                        beginAtZero: true,
                        ticks: {
                            showLabelBackdrop: false,
                            callback: function (value, index, ticks) {
                                /*console.log(value)
                                console.log(index)
                                console.log(ticks)
                                console.log()*/
                                return (value / 10) * 100 + "%";
                            },
                        },
                        title: {
                            display: true,
                            text: 'Percentage',
                        },
                    },
                },
                plugins: {
                    annotation: {
                        annotations: {
                            line1: {
                                type: 'line',
                                yMin: -1000,
                                yMax: 1000,
                                borderColor: 'rgb(255, 99, 132)',
                                borderWidth: 20,
                                borderDash: [10, 10],
                                yScaleID: 'right-y-axis',
                            },
                        },
                    },
                },
            },
        };