High Charts tooltip crosshair issues in angular - highcharts

I have two series data but on hovering I am able to get only one series data on the label.
Is it possible to have both data on label on hovering in x-axis?
Highcharts.chart('container', {
tooltip: {
crosshairs: true
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
Label has Series 1:176 and I want along with that Series 2:71.5


You need to set the tooltip.shared parameter equal to true. Then all of defined series should be visible in tooltip.
Highcharts.chart('container', {
tooltip: {
crosshairs: true,
shared: true
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
}]
});
Live example: http://jsfiddle.net/L0hg2c6r/
API Reference: https://api.highcharts.com/highcharts/tooltip.shared

Related

Using image tag as series name in highcharts

I am trying to use an image for name in Highcharts Graphs, I have tried the following approach but this doesn't to work,
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
name: '<img src="http://www.text100.com/wp-content/uploads/2013/03/icon-plug-small.png" >'
}]
Is there any other way to achieve this?

To add html images, you need to set useHTML to true option, where it's necessary (e.g. tooltip, legend): http://jsfiddle.net/a3be47f8/
$('#container').highcharts({
tooltip: {
useHTML: true
},
legend: {
useHTML: true
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
name: '<img style="width: 50px; height: 50px" src="http://www.text100.com/wp-content/uploads/2013/03/icon-plug-small.png" >'
}]
});
Note: I advice to set width/height, otherwise it may happen that tooltip/legend won't be able to reserve proper amount of space, because image won't be already loaded.

Using Highcharts to show multiple stacked bar charts next to each other

Trying to find a way to read two arrays into the Highcharts series, for 4 charts. This is example code I tried to adapt from a regular bar chart:
var charts = [],
$containers = $('table td'),
datasets = [
{
name: 'Global',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
},
{
name: 'Region',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
},
{
name: 'Role',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
},
{
name: 'Industry',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}];
$.each(datasets, function(i, dataset) {
console.log(dataset);
charts.push(new Highcharts.Chart({
chart: {
renderTo: $containers[i],
type: 'bar',
marginLeft: 50,
marginBottom: 90
},
credits: {
enabled: false
},
title: {
text: dataset.name
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [dataset]
}));
});
and then this is my HTML:
<table>
<tr>
<td id="first"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
How do I get the two arrays for stacked bars into highcharts ?
Thanks in advance.

When you need stacked bar charts, then each dataset needs to be a separate series. Demo: http://jsfiddle.net/n9xvof2y/1/
Suggested format:
datasets = [{
name: 'Global',
data: [
[29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
[144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
]
}, {
name: 'Region',
data: [
[29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
[144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
]
}, {
name: 'Role',
data: [
[29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
[144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
]
}, {
name: 'Industry',
data: [
[29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
[144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
]
}];
Series options:
series: [{
name: dataset.name,
data: dataset.data[0]
}, {
name: dataset.name,
data: dataset.data[1]
}]
If you need just one legend item for both series, use linkedTo option: http://jsfiddle.net/n9xvof2y/3/

How to disable label from Highchart

I want to disable label means that when I load a graph disable all label except first. so How can I do this?
Please help me.
Thanks, In Advance

Configure all but the first series to have visible: false:
$('#container').highcharts({
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2],
visible: false
}]
});
Example here.

Highcharts animate series on show

I would like to show/hide chart series with a animation like the initial one, meaning that if on this
$(function () {
$('#container').highcharts({
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]
}]
});
// the button action
var chart = $('#container').highcharts(),
$button = $('#button');
$button.click(function() {
var series = chart.series[0];
if (series.visible) {
series.hide();
$button.html('Show series');
} else {
series.show();
$button.html('Hide series');
}
});
});
http://jsfiddle.net/pbohny/GvkPW/
I click hide/show, on show the series should animate(build up from left to right) like the initial animation.
Is this possible?

It's not supported. You can try to get desired result by removing and adding that series back, see: http://jsfiddle.net/GvkPW/1/
// the button action
var flag = true;
var chart = $('#container').highcharts(),
$button = $('#button');
$button.click(function() {
var series = chart.get('1st');
if (flag) {
series.remove();
$button.html('Show series');
} else {
chart.addSeries({
id: '1st',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
});
$button.html('Hide series');
}
flag = !flag;
});

How to align two pie graphs (highcharts) next to each other

I would like to have two pie charts to show up on my page, next to each other. They are both the same style but different data.
Is that possible and how?
Thank you

You can have multiple series of pie chart data on the same chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: 'Group Name'
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
center: ['20%'],
name: 'foo'
}, {
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
center: ['80%'],
name: 'bar'
}],
plotOptions: {
pie: {
dataLabels: {
enabled: false
}
}
}
});
jsfiddle: http://jsfiddle.net/4NtBw/

Another solution is to set the same size for both charts. That would disable option to smart resize for pie with dataLabels and you will get two the same size charts both with enabled dataLabels.

Search center at : http://docs.highcharts.com/#polar-chart
It might help

Resources