I use solid-gauge of highchart
I want to send callback to click event, not on the data area but on the grey area.
(You can see this sample for understand what I mean 'grey area'. https://www.highcharts.com/demo/gauge-solid)
(I use version 4.1.7 - this is by customer design and I cannot change it, but let me know what is the options - I will 'convert' them to 4.1.7 options)
Thanks
You can add click event on a pane:
chart: {
type: 'solidgauge',
events: {
load: function() {
this.pane[0].group.on('click', function() {
console.log('Clicked on pane!')
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/e5muf7j1/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#on
Related
In this Highcharts column chart the user can drill down by clicking on the column.
This works fine, however all the data, including the data of the drilled column, needs to be available when the chart is firstly created.
What I need is to capture the drilldown event click and populate the chart with that information, sending the data only when the user clicked on a specific column. Is this possible?
Yes, it is possible and simple. You need to use drilldown event callback function, call API request in it and use addSeriesAsDrilldown method - as in the example below:
chart: {
type: 'column',
events: {
drilldown: function(e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
...
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function() {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/e9m74kgp/
API Reference:
https://api.highcharts.com/highcharts/chart.events.drilldown
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeriesAsDrilldown
I want to show some bars' tooltip as default (not all of them) without hovering on them. is there any way to do this?
After chart is loaded, you can use onMouseOver point's method to display a tooltip.
chart: {
events: {
load: function() {
this.series[0].points[3].onMouseOver();
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/dnao0rv6/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#onMouseOver
I want to have an effect like this when I hover over or select a country
hover effect
Ignore the tooltip present here
You can add this functionality in your point.mouseOver and point.mouseOut events callback functions.
You can use point.graphic.shadow() for adding shadow to your point and then remove this shadow manually on mouseOut.
Here you can see code that may help you:
point: {
events: {
mouseOver: function() {
this.graphic.shadow({
width: 10
})
},
mouseOut: function() {
Highcharts.each(this.graphic.shadows, function(p) {
p.remove();
})
}
}
}
And here you can find live example how it can work: http://jsfiddle.net/x4j0d6dy/1/
Regards,
I found a plugin that is able to show current price line on highstock candlestick chart, but it only displays the latest data.
I have tried to find a way to display the horizontal price line when user hovers over the data.
I thought it might be related to tooltip event, but I have no idea how to do it.
Could someone give me a hint? Thanks,
tooltop:{
formatter: function () {
}
},
http://jsfiddle.net/RolandBanguiran/nf7ne/
There is a couple of ways to achieve that. Problem is a little missing description (do you want to display current price on hover, or actually hovered value?).
Anyway, the easiest way would be to enable crosshairs: demo.
Another way is to add/remove plotLine on mouseOver event for series.point, demo and code:
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
chart.yAxis[0].removePlotLine("tooltip-line");
chart.yAxis[0].addPlotLine({
width: 2,
color: "black",
id: "tooltip-line",
value: this.y
});
}
}
}
If you want to hide that line, use mouseOut event and simply remove plotLine like above.
Third option bases on the above one - in case you want to display current price instead of hovered one. In such case, change value for the plotLine, demo and code:
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
chart.yAxis[0].removePlotLine("tooltip-line");
chart.yAxis[0].addPlotLine({
width: 2,
color: "black",
id: "tooltip-line",
value: this.series.yData[this.series.yData.length - 1][0]
});
},
mouseOut: function() {
this.series.yAxis.removePlotLine("tooltip-line");
}
}
}
Extra tip:
Check out more option for plotLines in the API (like dash style, or label).
I want to disable the use of navigator in highcharts but still show it as "full" small chart.
Is it possible?
Yes, you can hide them in callback: http://jsfiddle.net/nX37D/
But user still will have possibility to change extremes by using handles (even if they are invisible). To change that behavior, you will need to edit sources.
$('#container').highcharts('StockChart', options, function (chart) {
var handles = chart.scroller.handles;
setTimeout(function () {
handles[0].hide();
handles[1].hide();
}, 1);
});
Another way to hide them within the API is:
navigator: {
handles: {
backgroundColor: 'transparent',
borderColor: 'transparent'
}
},
Fiddle here.