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]; };
Related
Whats the best way to achieving the below chart using Highcharts library?
You can create additional pie charts as data labels:
chart: {
events: {
load: function() {
var points = this.series[0].points,
container;
points.forEach(function(p) {
container = p.dataLabel.div.querySelector('.dataLabelChart');
Highcharts.chart(container, {
chart: {
margin: 0,
backgroundColor: 'transparent'
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
series: [{
innerSize: 30,
dataLabels: {
enabled: false
},
type: 'pie',
data: [1, 2, 3]
}],
legend: {
enabled: false
}
});
});
}
}
},
series: [{
dataLabels: {
verticalAlign: 'middle',
enabled: true,
useHTML: true,
formatter: function() {
return '<div class="dataLabelChart" id="' + this.point.index + '"></div>'
}
},
...
}]
Live demo: http://jsfiddle.net/BlackLabel/y46ubx1L/
API Reference: https://api.highcharts.com/highcharts/series.scatter.dataLabels.formatter
i made a bar stacked chart using highcharts and i want the legend to be on top, i used the attribute verticalAlign with the value top but it didn't work !
here is my jsfiddle http://jsfiddle.net/rchod/sbtt6/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
legend: {
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
labels: {
enabled: false
},
categories: ['']
},
yAxis: {
labels: {
enabled: true
},
min: 0,
title: {
text: ''
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
minPointLength: 3,
dataLabels: {
color: 'white',
align: 'center',
enabled: true,
format: '{y} %'
},
stacking: 'percent'
},
bar: {
events: {
legendItemClick: function () {
vote(1,this.userOptions.id);
return false;
}
}
,
showInLegend: true
}
},
series: [
{
name: 'yes',
data: [{ y : 73.91, id : '1' }],
id: '1'
},
{
name: 'no',
data: [{ y : 26.09, id : '2' }],
id: '2'
},
]
});
});
You have the legend property twice in your options. The 2nd one is overriding the first. Put them together:
legend: {
backgroundColor: '#FFFFFF',
reversed: true,
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100
},
Updated fiddle.
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
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/