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.
Related
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
I have more than one chart in one page, all of them uses same data but in different chart types.
I would like to change all of their time with only one navigator on the top. like using it as a datepicker input, how can i achieve that?
Use afterSetExtremes event callback function and apply the same extremes on the rest charts:
xAxis: {
events: {
afterSetExtremes: function(e) {
var min = e.userMin,
max = e.userMax;
chart1.xAxis[0].setExtremes(min, max, true, false);
chart2.xAxis[0].setExtremes(min, max, true, false);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/8gc9qwsp/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
https://api.highcharts.com/highstock/xAxis.events.afterSetExtremes
I'd like to remove the value box from a Highcharts angular gauge.
I'm not sure it is possible...I have tried messing around with the JSFiddle demo trying to remove it and haven't been able to.
I was able to remove the minor and major ticks by adding
minorTickInterval: 'none',
tickPixelInterval: 'none'
But I can't figure out how to remove the value from the middle of the gauge.
or you can achieve the result you want just by adding the following lines:
series: [{
dataLabels: {
enabled: false
}
}]
You should add dataLabels.formatter to the series part of your gauge to remove it.
dataLabels: {
formatter: function () {
return null;
}
},
Live example: jsFiddle
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 hide the default exporting button. But I dont want to set each chart as
exporting: {
enabled:false
}
This will be too much work because I have lots of highcharts pages.
Any other way to do this?
Thanks.
You can modify the global Highcharts options :
Highcharts.setOptions ( {
exporting: {
enabled: false
}
} )
This piece of code just have to be included in each page you have a chart, You don't have to modify every chart to change this option.
Example
You can disable by disabling context buttons.
http://jsfiddle.net/sbochan/45kqw/
exporting:{
buttons:{
contextButton:{
enabled:false
}
}
},