score:1
First of all, you will need to use legendItemClick
to set your action.
API Reference: https://api.highcharts.com/highcharts/series.column.events.legendItemClick
If you want to only remove xAxis.labels
, just update them by labels.formatter
:
plotOptions: {
column: {
stacking: "normal",
events: {
legendItemClick: function () {
let name = this.name;
if (this.visible) {
this.chart.update({
xAxis: {
labels: {
formatter() {
if (this.value === name) {
return "";
} else {
return this.value;
}
}
}
}
});
} else if (!this.visible) {
this.chart.update({
xAxis: {
labels: {
formatter() {
return this.value;
}
}
}
});
}
}
}
}
},
Demo: https://codesandbox.io/s/highcharts-react-demo-forked-gcbz2g
API Reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter
If you want to remove labels and the space left by a hidden category, you need to use the broken-axis.js
module
plotOptions: {
column: {
stacking: "normal",
grouping: false,
pointPlacement: null,
events: {
legendItemClick: function () {
if (!this.visible) {
breaks[this.index] = {};
this.chart.xAxis[0].update({
breaks: breaks
});
} else {
breaks[this.index] = {
from: this.xData[0] - 0.5,
to: this.xData[0] + 0.5,
breakSize: 0
};
this.chart.xAxis[0].update({
breaks: breaks
});
}
}
}
}
},
Demo: https://codesandbox.io/s/highcharts-react-demo-forked-n502os?file=/demo.jsx:678-1453
API Reference: https://api.highcharts.com/highcharts/xAxis.breaks
Source: stackoverflow.com
Related Query
- Highcarts: Hide xAxis categorie when serie is not visible
- Code works on fiddle but not when I do /show
- Highcharts - Small column not clickable when covered with a (sp)line serie
- x-axis, y-axis lines does not appear, when I include 3D chart library of HighChart in my code
- Highcharts does not display years on Xaxis when data with NULL values
- Highstock data not showing when setting xAxis min and max
- Some series are not visible in a time serie chart with columns
- xAxis label is not visible properly in Highcharts
- Highchart (stockchart) Yaxis on opposite side miss align when left axis is not visible
- Highcharts hide not active series from legend when taking screenshot
- Highchart: xAxis Label text not displayed when plotting 2 points
- Resolve Conflict When Using Highchart and Highmap together (TypeError: ma is not a function)
- Highcharts area fillOpacity do not work when changing the color
- Highcharts saying undefined is not a function when trying to add a new chart
- Javascript Highcharts v3.0.5 - How to hide Y Axis Title when using multiple Y Axis
- Highcharts stacked bar chart hide data labels not to overlap
- highcharts: fire animation when visible instead of on page load
- Can I with highcharts column stacking on hover not highlighting the whole serie
- Panning in Highcharts will not allow to go back to the max of the xAxis
- Uncaught TypeError: undefined is not a function when using highcharts
- Highcharts : How to fix labels to the top when xAxis rotation is 90°?
- Highchart not resized when hidden
- HighCharts: Hide tooltip when value is zero when using 'split: true'
- JavaScript code inside TypeScript file .ts not working
- highcharts xaxis navigator not showing
- using angular directive to draw highchart pie chart but when i am using it in success function it is not working
- Multi-Line Title is not working when we export to PNG using CanVG - Highcharts
- highcharts hide xAxis
- HiChart click event 1st time it's working but when I update the data then click event is not working
- Is it possible to set Highcharts to hide tooltip when the mouse pointer is 30px away
More Query from same tag
- Highcharts master detail chart with irregular time intervals
- HighCharts - How to create dynamic chart that exports EVERYTHING
- HIghCharts PHP MySQL
- Highcharts tickInterval every hour
- How to extract the data from highstock chart
- PHP add another array
- Highcharts xAxis has extra gap when multiple yAxis
- Highcharts tooltip functionality lost from version 2.2.1 to version 3.0.1
- how to add dynamic data in a highchart?
- How to export a python-highcharts chart for use in flask or django?
- Highcharts Bar - Display DataLabel at the right end of the plot
- Prevent Area plot Y-axis from starting with ZERO
- use a service inside a funcion
- Create highcharts vue component
- Highcharts Not Displaying AreaRange in Legend
- y-axes of Highcharts line chart
- putting a semi-transparent div over a highcharts graph
- How to hide a specific x-axis label programmatically?
- highcharts xAxis density
- ASP.Net Chart controls Vs Highcharts
- Display highchart dashstyle (svg) in select element
- Display year in x axis of line graph highcharts
- Interpolate or use a variable inside a string in javascript
- Issues with custom border around Highcharts Stacked Bars and disabling hover effect
- Reserve space for text in exported Highchart
- highchart not displaying in the center on mobile screen
- background color change in jquery highcharts
- Highchart: Background color of Axis
- highcharts not showing decimal points coming from xml
- Highcharts Bubble Chart with dynamic data