I've been trying to hide the max value splitLine on Y axis. It is marked in the image below:
What I am trying to achieve is to have the max value of Y axis be 30% larger than the max value of the actual data I get but without the splitLine showing for that max value. That way the Y axis is longer and it looks nicer. Without adding the max option the Y axis stops at the max value of the data array.
Chart settings:
export const chartConfig = { max: (value: { max: number; min: number }) => value.max * 1.3, xAxis: { type: 'category', data: ["Q1 '24", "Q2 '24", "Q3 '24", "Q4 '24"], axisTick: { show: false, }, }, yAxis: { type: 'value', axisLine: { show: true, }, axisLabel: { showMaxLabel: false, }, name: 'Y axis', nameGap: 50, nameLocation: 'middle', nameTextStyle: { fontSize: 14, }, }, legend: { type: 'plain', bottom: '2%', left: '10%', }, tooltip: { show: true, }, grid: { left: '10%' }, series: [ { data: [13000], type: 'bar', stack: 'a', name: 'First value', itemStyle: { color: 'rgb(69, 101, 76)', }, }, { data: [8000], type: 'bar', stack: 'a', name: 'Second value', itemStyle: { color: 'rgb(245, 218, 102)', }, }, ],};
I've tried playing with the interval
and splitNumber
settings to no avail. Went through anything related to ticks, intervals, splitLines and Y axis in the docs: https://echarts.apache.org/en/option.html#yAxis
Any suggestions are more than welcome.