I am simply trying to disable the DRILL-DOWN effect on my 'Column Chart'. Can anyone help? Here is the sample code at Fiddle http://jsfiddle.net/D8Ez3/
*as you can see, the graph's legend is clickable. I need the items in the legend to not be clickable because when you click all items, the chart returns empty. I rather not have any drill-down for the chart. Any ideas?
chart = new Highcharts.Chart({
chart: {
renderTo: 'impact',
type: 'column',
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0,
backgroundColor: null,
events: {
load: function (event) {
console.log(this);
}}},
exporting: {
buttons: {
exportButton: {
enabled:false
},
printButton: {
enabled:false
}}},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: ['Reporting Year']
},
yAxis: {
min: 0,
title: {
text: 'Millions (mm)'
}
},
legend: {
enabled:false,
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 50,
y: 30,
floating: true,
shadow: true
},
tooltip: {
formatter: function () {
return '' + this.x + ': ' + this.y + ' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
size: '95%',
borderWidth: 0},
point: {
events: {
legendItemClick: function () {
return true; // <== returning false will cancel the
default action }}},
allowPointSelect: false,
},
series: [{
name: 'Yr 1',
data: [23.7] },
{
name: 'Yr 2',
data: [13.6] },
{
name: 'Yr 3',
data: [49.9] },
{
name: 'Yr 4',
data: [83.6] }]
});
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,
},
And if you work with pies, you must do :
pie: {
showInLegend: true,
allowPointSelect: false,
point:{
events : {
legendItemClick: function(e){
e.preventDefault();
}
}
}
}
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();
}
}
}
}
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]
};
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;
}
}
}
}
}
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();
}
}
}
}
}
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',
}
},
See: https://jsfiddle.net/oyps4fj6/
Related
I want to apply style to the bar
But this code does not working
Please help!
plotOptions.series.className <<=== not working
https://api.highcharts.com/highcharts/plotOptions.series.className
//css
._chart_bar {
border-radius: 3px;
width: 8px;
}
//js
Highcharts.chart(containerId, {
chart: {
type: 'bar',
spacingBottom: 0,
spacingTop: 0,
spacingLeft: 20,
spacingRight: 20,
height: 150,
},
title: {
text: '',
},
xAxis: {
categories,
labels: {
useHTML: true,
formatter: xAxisFormatter,
},
lineWidth: 0,
},
yAxis: {
min: 0,
title: {
text: '',
},
labels: {
enabled: false,
},
gridLineWidth: 0,
},
legend: {
enabled: false,
},
exporting: {
// 상단 우측 context 메뉴 없애기
buttons: {
contextButton: {
enabled: false,
},
},
},
plotOptions: {
series: {
stacking: 'percent',
className: '_chart_bar', <=============== here is not working
color: barColor,
},
},
series: seriesValues,
credits: {
enabled: false,
},
}, () => {});
}, [categories, seriesValues, barColor]);
The className property works correctly - you can see that your CSS class is added to a series group element correctly.
To style the columns, you need to use .highcharts-point CSS class or the custom one, added by className property for points.
Live demo: http://jsfiddle.net/BlackLabel/4xz2rwfp/
API Reference: https://api.highcharts.com/highcharts/series.column.data.className
I want to add a maker when a point is clicked same like alerting a selected point...the code for selecting a point :
cursor: 'pointer',
events: {
click: function(event) {
alert('x: ' + event.xAxis[0].value+' y: '+event.yAxis[0].value);
}
}},
Now what should I write in place of alert to mark the point when it is clicked?
instead of click event for this you can use marker states
plotOptions > series > marker > states > select > radius: 10
plotOptions: {
series: {
allowPointSelect: true,
marker: {
radius: 1,
states: {
select: {
radius: 10,
fillColor: 'red'
}
}
}
}
}
here is a working example
API reference : http://api.highcharts.com/highcharts#plotOptions.line.marker.states.select
Hope this will help you to achieve what you need.
I assume that is correct with that scenario:
http://jsfiddle.net/rV7As/
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
click: function (event) {
alert('aaa');
}
}
}
}
},
Thanks to all for your help...I got it what I wanted. I created a js fiddle accordingly.
$(function () {
$('#container').highcharts({
chart: {
type: 'line',
margin: [70, 50, 60, 80],
events: {
click: function(e) {
var ren = this.renderer;
// find the clicked values and the series
var x1 = e.xAxis[0].value;
x1 = this.xAxis[0].toPixels(x1);
y1 = e.yAxis[0].value;
y1 = this.yAxis[0].toPixels(y1);
series = this.series[0];
ren.circle(x1, y1, 5).attr({
'stroke-width': 2,
stroke: 'red',
fill: 'yellow',
zIndex: 3
})
.add();
// Add it
// series.addPoint([x, y]);
}
}
},
title: {
text: 'User supplied data'
},
subtitle: {
text: 'Click the plot area to add a point. Click a point to remove it.'
},
xAxis: {
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60
},
yAxis: {
title: {
text: 'Value'
},
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
lineWidth: 1,
point: {
events: {
'click': function() {
if (this.series.data.length > 1) this.remove();
}
}
}
}
},
series: [{
data: [[20, 20], [80, 80]]
}]
});
});
http://jsfiddle.net/das_palash89/WN3XC/3/
I have an array options like this:
var options = {
chart: {
type: 'bar',
events: {
click: function(event) {
}
}
},
xAxis: {
categories: '',
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Aantal keer gekozen',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
//valueSuffix: ' aantal keer gekozen'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
color: 'black',
formatter: function() {
if (this.y === 0) {
return null;
} else {
return this.y;
}
}
},
stacking: 'normal'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
exporting: {
enabled: true
},
series: []
}
As you can see I don't do anything on the click function.
I create the highcharts in jQuery in a foreach (so I create multiple charts).
options.chart.renderTo = 'container' + index;
chart = new Highcharts.Chart(options);
Now how can I add an event click like I did with renderTo?
You probably need to read about closures in javascript - otherwise you add the same event for each chart.
Another solution is to create array of id's for charts and then use: options.chart.events.click = function() { window.location.href = '/path/' + ids[index]; };
Kindly take a look at following fiddle in which i tried to remove the categories but on removing categories its placing numbers instead of it by default and also showing those numbers in tooltip.
All I am trying to do is that categories or numbers doesnot display on chart or on tooltip and only stackedbar appears on the chart , So kindly let me know how can i do it .Thanks,
http://jsfiddle.net/EJFsH/3/
$(function () {
var data = [ {
name: 'Year 2008',
data: [0, 914, 4054, 732, 34]
}];
data = $.grep(data, function (category) {
return $.grep(category.data, function (item) {
return item > 0;
}).length > 0;
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: data
});
});
I'm not 100% sure of what you are asking for. But, to turn off the XAxis or yAxis labels, juse labels : {enabled:false} and to change the tooltips use tooltip:{formatter: function() {...}}
see this fiddle:
http://jsfiddle.net/6ypq4/
xAxis: {
title: {
text: null
},
labels : {
enabled: false
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify',
enabled: false
}
},
tooltip: {
formatter: function() {
return this.y + ' millions';
}
},
I want to build a lightweight dashboard with Highcharts. First, look at this graphic http://jsfiddle.net/jerryvermanen/Zr7zE/.
I want to make a dashboard with this visualization. When clicking on a point, I want to display additional information below the visualisation. For instance, I want to show a picture (.jpg), some more information about this point and a URL to the specific source.
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
exporting: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'DAYS BETWEEN RELEASE AND CEREMONY',
style: {
fontSize: '22px'
}
},
subtitle: {
text: ''
},
xAxis: {
min: 0,
reversed: true,
title: {
enabled: true,
text: 'Days difference'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
color: 'black',
dashStyle: 'longdashdot',
width: 1,
value: 365,
label: {
text: 'ONE YEAR',
y: 580,
rotation: 0,
textAlign: 'left',
}
}]
},
yAxis: {
min: 1929,
max: 2012,
title: {
text: 'Year'
},
labels: {
formatter: function() {
return this.value;
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
'In<b>'+this.y +'</b>this movie was released<br/><b>'+ this.x +'</b>days from the ceremony.';
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
scatter: {
marker: {
radius: 4,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: 'Nominees',
marker: {
symbol: 'circle'
},
Can anyone help me out with this project?
You can bind a click event to the point using the following code.
plotOptions: {
scatter: {
point: {
events: {
click: function() {
// do what you want
// you can get the point reference using `this`
}
}
}
}
}
demo