score:48
You were close. Instead of:
plotOptions: {
column: {
pointPadding: 0.2,
size: '95%',
borderWidth: 0
},
point: {
events: {
legendItemClick: function () {
return false; // <== returning false will cancel the default action
}
}
},
allowPointSelect: false,
},
You want:
plotOptions: {
column: {
pointPadding: 0.2,
size: '95%',
borderWidth: 0,
events: {
legendItemClick: function () {
return false;
}
}
},
allowPointSelect: false,
},
score:0
Here is a JSFiddle demonstrating how to achieve this:
plotOptions: {
series: {
events: {
legendItemClick: function () {
var visibility = this.visible ? 'visible' : 'hidden';
if (!confirm('The series is currently ' +
**strong text** visibility + '. Do you want to change that?')) {
return false;
}
}
}
}
}
score:0
from Highcharts JS API documentation (v7.1.1)
"The default action is to toggle the visibility of the point. This can be prevented by calling event.preventDefault()."
So this is what worked for me for Pie charts -
plotOptions: {
pie: {
point: {
events: {
legendItemClick: function (e) {
e.preventDefault();
}
}
}
}
}
score:0
As a useful addition to any of the other answers, you might want to disable the legend hover style as well:
legend: {
itemStyle: {
cursor: 'default',
},
itemHoverStyle: {
color: '#333333',
}
},
score:1
If using ES6 you can make it even shorter with arrow function, as it's pointing to DOM element, you can simply return false...
{
name: 'Name of this chart',
type: 'line',
lineWidth: 1,
color: '#333333',
events: {
legendItemClick: () => false // disable legend click
},
data: [1, 5, 10, 8, 19, 28, 0 , 12]
};
score:3
This is the way to make legends of Highcharts graph non-clickable because whenever you click on a particular legend than corresponding slice become disappear from graph so make graph persist as per business requirement we may make legends unclickable.
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 1,
},
series: {
events: {
legendItemClick: function (e) {
e.preventDefault();
}
}
}
}
score:15
And if you work with pies, you must do :
pie: {
showInLegend: true,
allowPointSelect: false,
point:{
events : {
legendItemClick: function(e){
e.preventDefault();
}
}
}
}
Source: stackoverflow.com
Related Query
- Disable-Click on Legend in HighCharts Column Graph
- Highcharts : Disable top spacing from column graph
- Highcharts column graph custom legend formatting not showing legend symbols
- Highcharts disable click on column
- how to enable only 1 out of 2 column column graph by default when page loads in highcharts and the 2nd one gets visible when toggled in the legend
- How to modify highcharts legend item click event?
- How to disable legend click to stop pie slice from disappearing in Highcharts?
- programmatically click on column in Highcharts
- Enable or disable data labels shown in pie charts in Highcharts on click of a button
- Highcharts - change column stacking on click
- How to pass custom data into Highcharts graph click event
- Legend and Axis titles not showing in Highcharts Graph
- Legend and Axis titles not showing in Highcharts Graph
- Highcharts - update column graph with setData() not working
- Overlapping and rounded stack in stacked column graph in Highcharts
- Make stack label disabled for a column in stacked column graph in Highcharts
- Highcharts - column color different from color in legend
- How to trigger a legend click in HighCharts with jQuery?
- Change legend symbol in Column Chart in highcharts
- highcharts change rendered image source on click
- *Highchart* Disable the legend item click
- Show tootip and select pie slice on legend click of pie chart in HighCharts
- Legend for each point in column chart in highcharts
- Dynamically set click event on bar from highcharts graph
- Highcharts on click show larger graph
- Disable legend hover in Highcharts
- How to make legend color show up in Highcharts for a line graph under certain conditions?
- Highcharts legend is overlapping on to the graph area
- HIghcharts column graph with more than 50 data points
- Highcharts column Point Click
More Query from same tag
- How to change the colour of inactive bars in Highcharts?
- Highcharts error #17 when adding series to the chart using angular 4
- How would I fill MAX MIN bullets in highcharts?
- The chartoptions in highcharts are not getting updated from function call in ngoninit
- HighMaps select map from list - Highcharts.geojson and Highcharts.mapDataIndex issues
- Highcharts: Add plotlines to legend
- About HighCharts
- Highcharts - on zoom start Y axis from 0
- How can I take a backingbean GSON string to Highcharts
- How to accomplish responsive texts in Highcharts gauges?
- displaying highchart's graphic
- Highcharts Mysql Json arrays PHP
- Alignment issue in High chart's bar chart
- Horizontal bar chart with outline behind bar
- Highcharts Render Text after animation
- Highcharts - Pinch zoom does not work on chart with multiple y axes
- Ionic V6 and highchart-angular doesnt display correctly
- Highcharts with a thick line - at 0 values the line is half hidden
- Marker is not aligning in Gauge chart using hight chart
- Unable to Create Chart in Highcharts and id is undefined
- How to add custom CSS to the highcharts.js anchor <a> tags with links
- Error: Unexpected token. A constructor, method, accessor, or property is expected. ts(1068)
- HighChart: add data series dynamically with dynamically added categories on yAxis
- Custom data and calling them during a click - highcharts
- Highcharts-legend-item.last() disappears when changing tab
- Highcharts CSS Styling Axis Font
- How can I move columns to the right in a Highcharts chart?
- Using highchart SVG images with Selenium
- r - How to set xlim and ylim range in a highcharter plot?
- Show Information From Database onclick of HighCharts