We use highcharts to display different types of data. It all works fine.
Now, our goal is to add a call out functionality.
The callouts should be added to very specific instances wherever the hikes in the points are found.
I saw this example
Adding call outs to a Highcharts - Stacked Bar
but this adds callouts for all the points. As per my use case, I need add callouts only for John as per the above example.
You can use Pawel's solution from similar topic: Adding call outs to a Highcharts - Stacked Bar
You can add if statement inside your dataLabels formatter to check if your dataLabel is connected with specific series. Then you can show the callout or remove label, depending on the series name.
formatter: function() {
return this.series.name === 'John' ? '<div class="callout top" data-name="Jane">Callout for John!</div>' : false;
}
Here you can find an example how it can work: http://jsfiddle.net/5joufkwa/30/
Related
I have a multi-series column chart in Highcharts with three series ("Western", "Eastern", and "Central"). Clicking the label of a series in the legend shows or hides the series. I'd like to add a little link at the end of each label with a link to download details about the underlying data for that series.
So a label would look like: Western (details)
I tried simply adding an <A> link to the "name" of the series, and the link appears, but clicking on it doesn't open the link. Instead, it merely toggles the series display as before. I guess the "onClick" event for the label itself supersedes the <A> behavior.
Is there any way, without hacking Highcharts or creating a whole custom legend, to make a link in a series label functional? Maybe something with CSS to make the link jump out of its parent element?
Your idea is very good. You need to only call e.stopPropagation() after click on a link to prevent toggling series.
Highcharts.chart('container', {
series: [{
name: 'Series name <a id="seriesDetails" href="https://www.google.pl/">Details</a>',
...
}]
});
document.getElementById('seriesDetails').addEventListener('click', function(e) {
e.stopPropagation();
// prevent redirect
//e.preventDefault();
console.log('click');
});
Live demo: http://jsfiddle.net/BlackLabel/kaLrmjd7/
API Reference: https://api.highcharts.com/highcharts/series.line.name
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
My chart is composed of multiple chart series. I have created a custom legend with buttons so the user can press a button and show or hide a chart series as desired. I have implemented a solution where the number of series are redefined after each button press but this requires a call to reloadData which is an expensive operation.
How do I hide a chart series without calling reloadData? I am looking for a solution that only requires the chart to be redrawn using redrawChart.
SChartSeries objects (from which all series types inherit) have a hidden property. You can set this property to NO or YES to show or hide the series. You must call redrawChart after changing the value.
For example, the following method toggles the visibility of the first series in a chart:
- (IBAction)handleTogglePressed:(id)sender {
SChartSeries *series = _chart.series[0];
series.hidden = !series.hidden;
[_chart redrawChart];
}
On Highcharts graph, can we show a tool tip when mouse over label
other tool tip than shown when mouse over columns (point)?
thanks
Chanan
I've managed to achieve this - you need two steps:
1.) For the xAxis or yXis, set the labels options; the 'formatter' property should include a html title attribute. Utilise a function for dynamic outputs. Ensure the 'useHTML' property is set to true. eg:
useHTML: true,
formatter: function () {
return '<div class="label_tip" style="font-size:12px; font-weight:500;" title="'+this.value+'">'+this.value+'</div>'; }
2.) Use any tooltip library to alter the titles to a tooltip. This should be triggered in the Highcharts load or redraw event.
In this example I'm using qTips to create the label tooltips - http://jsfiddle.net/amichaels/quXLg/
How do I create a simple chart with a single horizontal bar. Xaxis is time and yaxis is one category named execution. I want to show a chart that shows a bar during the times when I have state executing and for states in between I want to display a blank in the same horizontal bar.
What you are looking for, I think, is a Gantt chart. Check out this example: http://jsfiddle.net/highcharts/KNGba/. It is a basic chart with just one element. Now check out this one: http://jsfiddle.net/highcharts/r6emu/. This shows you events during a time line.