Hi Highcharts community,
I'm curious to know if there is a way to disable a single legend item by default. For example, if there were 3 legend items- "Accepted" "Ideal" "Prediction", is it possible to have ONLY the "Prediction" legend item disabled after the chart loads without having to click on the legend item first? (Note: I don't want to eliminate the legend item altogether, I just want it to be greyed out initially, and still retain the functionality to enable the legend item again after clicking it).
Any help would be greatly appreciated.
Thanks!
Yes, you can do this. In the series options for the data element you do not want to show set the visible property to false.
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],
visible: false
}, {
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]
}]
Updated to set visibility after load.
To handle the case you talk about where you cannot inject the visible series property you can do this in the chart.events.load using series.update():
chart: {
events: {
load: function () {
this.series[0].update({
visible: false
});
}
}
},
Demo.
In this example I have used the index 0 for Tokyo series. You can do check for other series properties with if statements.
Below code works for me,(i am binding dynamic series)
$(Chart.series).each(function (i, val) {
if (val.name == "All Entity") {
val.setVisible(true);
}
});
Related
I try to hide the labels for which the values are zero, and at the same time format other labels. This does not look to work properly. I used the property "format" and the "formatter" trick. But combine both does not look to be possible.
dataLabels:{
enabled:true,
format: "{point.y:.1f}",
formatter:function(){
if(this.y > 0)
return this.y;
}
}
fiddle: http://jsfiddle.net/laloune/p74p2s91/
any idea?
You must change '0' to 'null' in the dataset.
http://jsfiddle.net/mnpL7zu4/
series: [{ data: [11, 71.5, null, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}]
I have a line chart with multiple y axes and two x axes, i.e. time and distance. I would like to display the chart allowing the user to toggle between the two x axes. I'm struggling with how to define the chart so that it will show the xAxis as distance and have tried setting ordinal to false on the xAxis, using categories, specifying multiple xAxes and can't seem to crack the code. The working solution should produce two graphs as in the linked picture https://drive.google.com/file/d/0B5768Z0sc7d7TFBPVDExU1NXWHc/edit?usp=sharing (as this is my first post, I don't have the reputation to post the image here...)
Here are some simplified code snippets and the related jsFiddle's for your perusal.
$('#container').highcharts({
xAxis: {
categories: [2,4,6,8,12,16,22,24,32,36,44,56], // representing distance
ordinal: false
},
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]
}] });
This produces an equally spaced xAxis where each category element takes up one position, i.e. no "stretching" of the data series is introduced. http://jsfiddle.net/robertvizza/LLExL/2141/
$('#container').highcharts({
xAxis: {
ordinal: false
},
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: [2,4,6,8,12,16,22,24,32,36,44,56], // representing distance
xAxis: 0
}] });
This displays two series over equally spaced xAxis values.(jsFiddle is 2142 - again, first post and therefore can only post 2 links...)
I am hopeful that Highcharts can manage this as I would hate the need to recalculate all the data points to fake out the display across two different xAxes...Thanks in advance for your help.
Since your base xAxis is changing between charts you can try to actually change the chart completely. I created two chartOptions sets and a button to toggle between the two.
$('#btn').click(function () {
if (set == true) {
chartMainLoc = new Highcharts.Chart($.extend(true, {}, window.optionsChartDistance));
set = false;
} else {
chartMainLoc = new Highcharts.Chart($.extend(true, {}, window.optionsChartSpeed));
set = true;
}
});
I am pretty sure there is some one-liner jquery toggle but it is late in the day.
Here is an example fiddle.
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
I have a chart with several points and I want the dataLabels to appear only on those points which have been selected by the user.
I have tried several versions but it seems that the dataLabels are either on or off (There is an option to declare the datalabel in the series itself but this won't respond to select events.)
Many thanks
Here is how to toggle the display of a dataLabels. You need to explicitly set the dataLabels option on each point (as far as I can tell) to false. You then add an events option and do this:
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
this.options.dataLabels.enabled = !this.options.dataLabels.enabled;
this.update();
}
}
}
}
},
Here is an updated jsFiddle. Note that if you pick anything other than the first 2 points it fails and gives error.
Old answer which is not "dynamic":
You just enable the dataLabels for the points you want to have it on.
Example:
series: [{
data: [29.9, 71.5, {
y: 106.4,
dataLabels: {
enabled: true
}
},
129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
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]
}]