Hiding the last tick of an axis in Apache ECharts - Stack Overflow

admin管理员组

文章数量:1403366

I have a bar chart in Apache ECharts that looks like this:

I am trying to configure it so that the first and last ticks of the X (category) axis are not visible.

So, after checking the documentation, it seems it is possible to show or hide a specific tick by defining a dedicated interval() function in the chart options, like this:

xAxis: {
    type: 'category',
    data: myData,
    axisTick: {
        show: true,
        interval: (index, value) => {
            return index !== 0 && index !== myData.length;
        }
    }
}

However, this doesn't work properly and here is the problem: as you can see from the screenshot the X axis has 6 ticks, but the interval() function only gets called 5 times (I'm guessing once for every bar?). This means that the function is never called for the last tick, and thus there is no way to hide it.

To demonstrate, the result of the configuration I've shown above is this, as you can see the first tick is correctly hidden, but the last isn't:

So my question is simple: how can we hide the last tick?

I have a bar chart in Apache ECharts that looks like this:

I am trying to configure it so that the first and last ticks of the X (category) axis are not visible.

So, after checking the documentation, it seems it is possible to show or hide a specific tick by defining a dedicated interval() function in the chart options, like this:

xAxis: {
    type: 'category',
    data: myData,
    axisTick: {
        show: true,
        interval: (index, value) => {
            return index !== 0 && index !== myData.length;
        }
    }
}

However, this doesn't work properly and here is the problem: as you can see from the screenshot the X axis has 6 ticks, but the interval() function only gets called 5 times (I'm guessing once for every bar?). This means that the function is never called for the last tick, and thus there is no way to hide it.

To demonstrate, the result of the configuration I've shown above is this, as you can see the first tick is correctly hidden, but the last isn't:

So my question is simple: how can we hide the last tick?

• echarts

Share Improve this question Follow asked Mar 20 at 11:35 Master_TMaster_T 8,0511616 gold badges9090 silver badges171171 bronze badges 3

• That last tick is added unconditionally in fixOnBandTicksCoords, (Axis.ts#L318), after the user options for setting up ticks were already used, possibly including axisTick.interval or axisTick.customValues; the unconditional addition of the last tick is defeating the purpose of both those options. That is a very bad solution - there's no reason the last tick shouldn't be subject to interval or customValues (as the first one is). IMO that qualifies as a bug and should be reported as such. – kikon Commented Mar 20 at 21:59
• 1 @kikon: good idea, I will bring it up in their GitHub issues – Master_T Commented Mar 21 at 8:54
• There are already issues regarding this bug: github/apache/echarts/issues/19365 – Matthias Mertens Commented Mar 21 at 9:59

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Echarts does not provide an inbuilt way to remove the last tick. As a workaround you can use a second xAxis with min / max set to 0 and the number of categories on your main axis.

Example:

option = {
  xAxis: [
    {
      type: 'category',
      data: ['Bar 1', 'Bar 2', 'Bar 3', 'Bar 4', 'Bar 5'],
      axisTick: { show: false }
    },
    {
      type: 'value',
      position: 'bottom',
      axisLine: { show: false },
      axisLabel: { show: false },
      splitLine: { show: false },
      min: 0,
      max: 5,
      axisTick: {
        customValues: [1,2,3,4]
      }
    }
  ],
  yAxis: { type: 'value' },
  series: [
    {
      type: 'bar',
      data: [120, 200, 150, 80, 70]
    }
  ]
};

本文标签： Hiding the last tick of an axis in Apache EChartsStack Overflow