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 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.
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]
}
]
};