This question already has an answer here:
Own back button for drilldown charts
(1 answer)
Closed 5 years ago.
I have my own custom btton to dril up highchart chart by using chart.drillUp(); function but I still getting highchart built in drill up button so I tried to disable default button by setting it's text to empty string as:
Highcharts.setOptions({
lang: {
drillUpText: ''
}
});
Demo
but still there is a small button in the chart in drill-down. Can you please let me know how to get rid of it completely?
You're able to enable/disable the button dynamically:
var chart = $('#container').highcharts();
chart.showDrillUpButton(); // enable
chart.drillUpButton = chart.drillUpButton.destroy(); // disable
Running example here: http://jsfiddle.net/9buhzzbh/
In your case, you can put the disable line in the drillDown event function to disable it.
Update the css way to do this:
https://stackoverflow.com/a/23080111/1589218
Related
This is my selection event handler in my code which I am for specific zoom timezones as you can see. What I am trying to achieve is to change the xAxis labels based on the zoom. Currently the following code does not work but I can not seem to find a solution to this problem online. Any thought?
Real question would be how can I alter highchart options through events. From the event parameter in the function I can access information but I can not change it.
I have two aproach, the first with changing inside event chart.redraw() will be called every time when chart is redrawn, for testing I added fired from a button.
redraw: function() {
let chart = this;
console.log(chart);
chart.xAxis[0].userMax = 8;
chart.xAxis[0].userMin = 2;
},
The next way is to update the axis object with a new set of userMax and userMin options.
chart.xAxis[0].update({
userMax: 8,
userMin: 2
}, true);
Live demo:
https://jsfiddle.net/BlackLabel/fcsd9hyo/
API References:
https://api.highcharts.com/highcharts/chart.events.redraw
https://api.highcharts.com/class-reference/Highcharts.Axis#update
Currently it is possible for me to manually trigger hover event of highcharts like below code to show tooltip and highlight the series.
chart.series[0].points[2].onMouseOver()
However the state can be easily changed after moving the mouse.Is there a way for me to keep the state?
If you want to keep your tooltip visible when mouse pointer is out you need to disabled tooltip.hide functionality.
Highcharts.Tooltip.prototype.hide = function() {};
and highligt point again after mouse out:
events: {
mouseOut() {
let series = this;
series.points[2].onMouseOver();
}
}
Demo: https://jsfiddle.net/BlackLabel/xjzc25aL/
For those who are simply trying to make the tooltip visible for a longer time, there is the hideDelay property.
For example, to make it last 5 seconds you can write
chart.tooltip.options.hideDelay = 5000;
I have a charts done in highcharts in which I show and hide series depending on a checkbox (if the user clicks on a checkbox and all series are shown, if he unchecks the checkbox, some series are hidden).
It is working great.
Now I have an issue with the legends in the chart: if the series are hidden and the users enables a legend, the segment of all series (hidden or not) are shown in the chart.
I would like to handle the click item so I only handle series that are being shown.
To do that, I created an eventhandler for the legendItemClick event.
Inside it, I am able to access the legend (using this) but I am only able to call functions in a legend level, affecting all series. Is there anyway I could get to a series level?
Thanks!
Edit: created a jsfiddle as an example: http://jsfiddle.net/JLkGm/1/
Steps to reproduce:
1- unmark the checkbox
2- click twice in john + joe
Note that the segment related to Jane + Janet will show up
I would like to prevent this segment from showing if the checkbox is not checked.
ps: sorry for the js code in the checkbox event handler, we are using coffeescript, the original code was this one
toggleCompareData: (toggle) ->
columnName = COLUMN_HIGHCHARTS_TOKEN + #secondaryPrefix
if toggle
for serie in #chart.series
serie.show() if serie.stackKey is columnName
else
for serie in #chart.series
serie.hide() if serie.stackKey is columnName
It looks like bug, reported to our developers here: https://github.com/highslide-software/highcharts.com/issues/3309
The highstock api for navigator.handles provides only parameters for background color and border color. My requirement is to disable the handle bar dragging and the range should be selected only via range selector menu.
I read this post Disabling Handlebars in HighStock charts navigator
But it does not serve my purpose.
Is there a way where if I set the property as enabled: false, or enableDragging: false then it hides the handle bar thus disabling the dragging functionality for highstock handle bars.
Unforunately it is not available, only solution mentioned by you.
You have ability to request your suggestion in our uservoice page http://highcharts.uservoice.com/
Finally I found it..
This is the coffeescript code for the same.
chart:
events:
load: ->
#handlebars = $('g').filter ->
$(#).css('cursor') == 'e-resize'
#handlebars.css('visibility', 'hidden')
I'm developing a chart that have 2 splines and 2 scatter. I use the default tooltip formatter to exhib a tooltip based in the spline data. But when I hover a scatter despite I hide the default tooltip, before show the scatter one, it appears to have triggered again.
How can I prevent the default tooltip to be triggered?
ps: im using Highcharts 3.0.1
EDITED: I tried "chartObj.tooltip.enabled = false" but it didn't work.
If you don't want to show the tooltip for a particular serie in the chart, see if setting
enableMouseTracking: false
on you desired serie's properties does it.
Hope this help.
I solved using this code:
chartObj.tooltip.options.enabled = false;
Setting to "false" when I hover and to "true" on mouseout.