Currently I am using Compose Chart of Rechart, and I have two Y-Axis (left and right). I was able to make my right y-axis to display 0-100% regardless of the value of bar and line. However, my left y-axis is scaling automatically and it seems domain and tickcounts not working together.
I need the domain[0, 'datamax'] so that my line is always in 100%, please see my current code.
I wanted that my left and right y-axis to display 0-100%.
<ComposedChart
width={setWidth}
height={setHeight}
data={chartData}
margin={{
top: 20,
right: 80,
bottom: 20,
left: 20,
}}
className={classes.textSize}
>
<CartesianGrid stroke="#f5f5f5" />
<XAxis
dataKey="name"
scale="band"
interval={0}
tick={<CustomizedAxisTick />}
/>
<YAxis
yAxisId="left"
orientation="left"
label={{
value: 'Porcentaje',
angle: -90,
position: 'insideLeft',
fill: theme.palette.text.primary,
}}
domain={[0, 'datamax']}
tickCount={11}
tick={<CustomYAxisTicks />}
/>
<YAxis
yAxisId="right"
orientation="right"
ticks={ticks}
tickCount={11}
tick={{ fill: theme.palette.text.primary }}
/>
<Bar yAxisId="left" dataKey="pv" barSize={30} fill="#FC6A03" />
<Line
yAxisId="left"
type="monotone"
dataKey="amt"
stroke="#eaed40"
dot={<CustomizedDot />}
isAnimationActive={false}
/>
