how can I put a scale on the right side for mixed chart type with chartjs 3? also how to reduce scale size

[afshinmoshrefi]

I am trying to migrate a react app to chartjs3.

I have a mixed, bar chart, linechart:

2 issues with this chart:

1. how can I place the bar scale to the right side
2. how can I set the maximum of the bar chart to only take 10% of the chart height instead of 100% of the chart height?

code :

`import React, { useState } from 'react';
import { Line, defaults } from 'react-chartjs-2';

const LineChart = () => {

// default values are just for testing

const [dataClose, setDataClose] = useState([21.02, 7.92, 1.73, 3.65, 4.13, 1.36, 3.56, 5.02, 1.85, 1.17, 6.29, 24.07])
const [labels, setLabels] = useState(['2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'])
const [dataVolume, SetDataVolume] = useState([41000, 28000, 62000, 43000, 36000, 48000, 41000, 28000, 62000, 43000, 36000, 48000])

return (

    <div style={{ backgroundColor: "lightblue" }}>
        <Line
            data={{
                labels: labels,
                datasets: [
                    // first dataset
                    {
                        // yAxisID:'yLine',
                        pointRadius: 3,
                        pointHoverRadius: 4,
                        lineTension: 0.3,
                        label: '',
                        data: dataClose,
                        backgroundColor: 'black',
                        borderColor: 'black',
                        borderWidth: 3,  //line thickness
                    },
                    {
                        yAxisID: 'yBar',
                        type: 'bar',
                        data: dataVolume,
                        label: labels,
                        position: 'right'
                    }
                ],
            }}
            height={200}
            width={600}
            options={{
                // maintainAspectRatio: false, //removes scroll bars
                scales: {
                    y: [
                        {
                            id: 'yLine',
                            display:false,
                            ticks: {
                                // beginAtZero: true, //sets the scale minimum to 0
                            },
                        },
                        {
                            id:'yBar',
                            ticks: {
                                // beginAtZero: true, //sets the scale minimum to 0
                            },
                        },
                    ],
                },
            }}
        />
    </div>
)

}

export default LineChart`

[SoloNoah]

I am having the same problem. I want my Y axis on the right and I can't seem to find a way to make it happen.
Did you find a way by any chance? @afshinmoshrefi

[MNKCrypto]

Can you try with the below code?
Looks like - 'id' property is no longer used. They are expecting us to name the scale property with the yAxisID used in datasets

yBar: { ticks: { // beginAtZero: true, //sets the scale minimum to 0 }, }, }, }} /> </div>

[AndyyTaylor]

Having this problem too, @MNKCrypto tried your suggestion but no luck

Any other ideas?

Seems the example is broken as well http://reactchartjs.github.io/react-chartjs-2/#/multi-axis-line

[AndyyTaylor]

nvm got it still had the keys nested in yAxes which is incorrect, this works

scales: {
  price: {
    type: 'linear',
    position: 'left',
  },
  equity: {
    type: 'linear',
    position: 'right',
  },
}

[nomikeeper]

For me, setting the options as follows:

        {
          scales: {
            screenY: {
              type: 'linear',
              display: true,
              position: 'right'
            }
          }
        }

worked for me.

The current option is set for mixed charts too ( more accurately, I'm using bar and line mixed charts).

The code I'm using for the mixed chart is:

      <Chart type='bar' 
        data={data} 
        options={{
          responsive: true,
          scales: {
            screenY: {
              type: 'linear',
              display: true,
              position: 'right'
            }
          }
        }}
      />

One thing I realized is that the property names are quite different than the charts, so you have to find the options you are looking for one by one I guess.

Hope this helps you out.

@afshinmoshrefi