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?
Share Improve this question asked Mar 20 at 11:35 Master_TMaster_T 8,05116 gold badges90 silver badges171 bronze badges 3 |1 Answer
Reset to default 1Echarts 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]
}
]
};
fixOnBandTicksCoords, (Axis.ts#L318), after the user options for setting up ticks were already used, possibly includingaxisTick.intervaloraxisTick.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 tointervalorcustomValues(as the first one is). IMO that qualifies as a bug and should be reported as such. – kikon Commented Mar 20 at 21:59