Remove the max value splitLine on Y axis

59 views Asked by At

I've been trying to hide the max value splitLine on Y axis. It is marked in the image below:

Chart with the problematic splitLine

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.

0

There are 0 answers