How to disable label from Highchart - ruby-on-rails

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.

Related

High Charts tooltip crosshair issues in angular

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

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/

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;
});

Why are the labels for my opposite yaxis in Highcharts not showing up?

I am puzzled why the second yaxis in my Highcharts graph shows, but without any values. Both of my two graphs are still bound to the first yaxis. Can't get one of them attributed to the second yaxis. Here is a fiddle.
Thanks for any hints!

The charts options are case sensitive. You specified 'yaxis' when it should be 'yAxis'. That took me a while to spot !
series: [{
yAxis: 1,
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]
},{
yAxis: 0,
data: [19.9, 21.5, 6.4, 29.2, 44.0, 76.0, 35.6, 48.5, 16.4, 94.1, 95.6, 54.4]
}]

Resources