I am using Pie Highchart, I want to call a function on click event. I don't want to write this function logic as below. Is it possible to call a external function here.
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
point:{
events:{
click: function(oEvent){
alert(oEvent.point.name);
}
}
}
}
},
This call back function will have many lines of code, so I want to define it somewhere else and call it in plotoptions. Let me know, how to achieve it
It done following way
Fiddle
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
point: {
events: {
click: function(oEvent) {
callExternalFunction(oEvent.point.name); //call function with arguments
}
}
}
}
},
function callExternalFunction(obj){
console.log(obj);
}
Heading ##I have done it by using this way
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: this.barClickedFun.bind(this)
}
}
}
Outside function:-
barClickedFun(data) {
console.log(data.point.index);//data of click event, One can found point's value or index
}
Related
I've created a donut chart using vue-highcharts/highcharts, and am trying to append text on mouseover to the center of the donut. I've got it appending static text, however I'm trying to return the data from the point I hover over, to display that in the center, however I can't seem to find any relevant data from within the event object. Does anyone know how I might be able to access that data?
chartOptions: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
legend: {
align: 'right',
enabled: true,
layout: 'vertical',
verticalAlign: 'middle'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
center: ['50%', '50%'],
showInLegend: true,
events: {
mouseOver: (e) => {
const { chart } = this.$refs.highchartsRef;
const height = chart.chartHeight / 2;
const width = e.target.center[3];
console.log({ chart });
console.log({ e });
chart.renderer
.text('Top Test</br>Bottom Test', width, height, true)
.css({
color: '#4a4a4a',
fontSize: '16px',
fontWeight: 700
})
.addClass('highcharts-center-label text-center')
.add();
},
mouseOut: () => {
document.querySelector('.highcharts-center-label').remove();
}
}
}
},
series: [{
name: 'Categories',
colorByPoint: true,
size: '100%',
innerSize: '60%',
data: this.categories.map(category => {
return {
name: category.name,
y: calculateCategoryWeight(category)
};
})
}],
title: null,
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
}
}
Use point.events and a basic function instead of the arrow one.
plotOptions: {
pie: {
point: {
events: {
mouseOver: function() {
var point = this,
series = point.series,
chart = series.chart;
console.log(point.y);
}
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/7oub1xzj/
API Reference: https://api.highcharts.com/highcharts/plotOptions.pie.point.events
I need select area near column.
How to make the region and column stand out when you click, as when you hover over it.
This is my example:
https://jsfiddle.net/alexserden/wq6j0tnp/9/
$(function () {
let chart = Highcharts.chart('bar', {
tooltip: {
shared: true,
hideDelay:100,
useHTML: true,
outside: true,
style: {
fontSize: "13px",
color: '#505050'
}
},
credits: {
enabled: false
},
plotOptions: {
column: {
dataLabels: {
enabled: false,
style: {
fontSize: '13px',
fontWeight: 'bold',
textOutline: undefined,
color: '#505050'
}
}
},
...
},
...
}
});
You'll need to add an event handler for the click:
series: {
cursor: 'pointer',
marker: {
enabled: false
},
point: {
events: {
click: function () {
// Handle selection
}
},
}
}
Inside this event you'll need to handle the area selection, there is a similar post here. The selected area is a category. (API reference)
API documentation for click event: https://api.highcharts.com/highcharts/plotOptions.area.point.events.click
You can render the plotBands as a crosshair and use the select for highlighting the point inside the click callback.
Demo: https://jsfiddle.net/BlackLabel/k4d9nrwf/
point: {
events: {
click() {
let chart = this.series.chart;
chart.series.forEach(s => {
s.points.forEach(p => {
if(p.category === this.category) {
p.select()
}
})
})
chart.xAxis[0].update({
plotBands: [{
from: this.x -0.5,
to: this.x + 0.5,
}]
})
}
}
},
API: https://api.highcharts.com/highcharts/xAxis.plotBands
API to style the selected point: https://api.highcharts.com/highcharts/series.line.states.select
I've set up a U.S. Map using HighMaps with several series of data points. I've disabled the onmouseover default behavior and am using onclick instead for accessibility and mobile usage. However, when I click on a map point, the map zooms in. How do I disable this?
I don't want to disable all zooming because some points are quite close. The issues seems to be in the plotoptions section of code (when I remove it, it doesn't zoom, but the onclick doesn't work either)
See JS Fiddle code here: https://jsfiddle.net/sfjeld/znd03gxL/47/
var tooltipEnabled = true;
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'countries/us/us-all'
},
title: {
text: 'InSPIRE Project Sites'
},
legend: {
title: {
text: 'Select from the options below to display all sites using that technology.'
}
},
credits: {
enabled: false
},
mapNavigation: {
enabled: false,
buttonOptions: {
verticalAlign: 'top'
}
},
tooltip: {
headerFormat: '',
pointFormat: '<span style="color:#0079C2;font-weight:bold; font-size:110%"><b>{point.name}</b></span><br><b>Primary Research:</b> {point.research}<br>{point.desc}<br><br><b>Partners:</b> {point.partners}',
useHTML: true,
enabled: false
},
plotOptions: {
series: {
events: {
click: function() {
this.chart.update({
tooltip: {
enabled: tooltipEnabled
}
});
tooltipEnabled = tooltipEnabled ? false : true;
disableHover = false;
}
},
dataLabels: {
enabled: false
},
marker: {
states: {
hover: {
enabled: true
}
}
}
}
},
I expect it not to zoom when I click on a point.
You can achieve what you expect by making an update on tooltip itself and not updating the whole chart. Check demo and code posted below.
plotOptions: {
mappoint: {
events: {
click: function() {
this.chart.tooltip.update({
enabled: tooltipEnabled
});
tooltipEnabled = tooltipEnabled ? false : true;
disableHover = false;
}
},
dataLabels: {
enabled: false
},
marker: {
states: {
hover: {
enabled: true
}
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/6ps8bk2q/
I want to show tree map with different on different levels by using property 'colorByPoint' true.
Highcharts.chart('container', {
chart: {
marginTop: 50,
events: {
load: function() {
this.bread = {
'': makeNode('', this.series[0].name, this.series[0])
}
}
}
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true,
align:'left',
verticalAlign:'Top'
},
borderWidth: 1
},
{
level: 2,
colorByPoint: true,
dataLabels: {
enabled: true,
},
borderWidth: 1
}
],
data: points
}],
credits:false,
plotOptions: {
series: {
dataLabels: {
color: '#fff',
textOutline:0,
style: {
fontWeight: 'bold'
}
},
point: {
events: {
click: function(e) {
const hasChildren = !!this.node.childrenTotal
if (hasChildren) {
const bread = this.series.chart.bread
bread[this.id] = makeNode(this.id, this.name, this.series, bread[this.node.parent])
}
}
}
}
}
},
title: {
text: ''
}
});
Here is my js fiddle. https://jsfiddle.net/irfanbsse/8djawts9/
But I dont want show second level color on first level.Same for second level and so on. how i can do it ? Thanks
Here's a demo that shows how to change color of child nodes on point.click.event:
click: function() {
var points = this.series.points;
this.node.children.forEach(function(child, i) {
var point = points.find(function(point_) {
return child.id === point_.id
});
point.update({
color: color[i % (color.length - 1)]
});
});
Live demo: https://jsfiddle.net/BlackLabel/sgkah0fq/
The next thing to implement is reverting the original colors while clicking on the previous level in navigation (label with callout shape).
Is it possible to have tool tip on clicking of points instead of mouse move.
I have tried with showing values in java script alert as below
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
alert ('Category: '+ this.category +', value: '+ this.y);
}
}
}
}
}
Requirement is to show high chart tool tip on click.
Please help. Thanks!
As #PawelFus states, it's not officially supported but you can fudge this in by taking control of the visiblity of the tooltip.
First on chart load, hide it:
chart: {
events: {
load: function(){
$('.highcharts-tooltip').hide();
}
}
},
Disable sticky tracking, and on mouseout hide it, on click show it:
plotOptions: {
series: {
stickyTracking: false,
events: {
click: function() {
$('.highcharts-tooltip').show();
},
mouseOut: function() {
$('.highcharts-tooltip').hide();
}
}
}
},
Here's a fiddle example.
First attempt only worked in chrome, here's another:
Disable the default tooltip:
tooltip: {
enabled: false
},
In the chart load event, create your own:
chart: {
events: {
load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
}
},
In the click and mouseout control it:
plotOptions: {
series: {
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
}
},
I tested this in IE and Chrome, I won't install Firefox anymore.
Update to code 9/7/2017 with new stack snippet:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
tooltip: {
valueSuffix: '°C',
enabled: false
},
chart: {
events: {
load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
}
},
plotOptions: {
series: {
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.options.enabled = true;
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
this.chart.myTooltip.options.enabled = false;
}
}
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Adding for those who have problems like me with useHTML: true and wants to display tooltip only on click and not on hover.
tooltip: {
useHTML: true
}
Here is a fiddle.
Just add for those who has the same problems as myself (see comment from #kevinandrada just after correct answer, i can't comment): if you call tooltip.refresh when your tooltip.shared = true you'll get an exception Uncaught TypeError: Cannot read property 'category' of undefined.
You should provide an array of points as a first argument:
plotOptions: {
series: {
stickyTracking: false,
events: {
click: function(evt) {
var points = this.chart.series.map(function(d) {
return d.searchPoint(evt, true)
});
this.chart.myTooltip.refresh(points, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
}
},
The problem of first mouse-over tooltip showing in Alexandra Espichán excellent fiddle can be solved via css and the mouseover event omit by replacing his invisibility class with:
.highcharts-tooltip:not(.clone){
visibility: hidden !important;
}
Here is the fix for "Cannot read category of undefined". I just take hovered points of chart and pass them to refresh.
point: {
events: {
mouseOver: function(evt) {
var hoveredPoints = a.hoverPoints;
a.tooltip.refresh(hoveredPoints);
},
mouseOut: function() {
a.tooltip.hide();
}
}
}
Sample fiddle here: http://jsfiddle.net/2swEQ/153/