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]
}]
Related
I made an area chart as in the example below:
Highcharts.chart('container', {
title: {
text: ''
},
plotOptions: {
series: {
allowPointSelect: true,
}
},
series: [{
data: [29.9, null, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, null, 194.1, null, 54.4],
type: 'area',
}]
});
Since my second value in a series is null, I see the first value as a dot. The same happens with the values in the end of the series. Is it possible to connect it to X axis with a line which will be colored as an area of the rest of the chart?
You need to set the series.connectNulls as a true to achieve it.
Demo: https://jsfiddle.net/BlackLabel/7qrtos3m/
API: https://api.highcharts.com/highcharts/series.area.connectNulls
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);
}
});
I have a High Chart chart similar to this bar chart: http://jsfiddle.net/s4zzpLzL/
How would I got about spliting the bar colors so that the color of the bar up until 500 is grey and the color of the bar after is the color you see on the screen? See image below.
You can set gradient color for series, demo: http://jsfiddle.net/pscwnzk7/1/
$('#container').highcharts({
chart: {
type: 'bar'
},
series: [{
color: {
linearGradient: [0, 0, 0, 500],
stops: [
[0, '#ff0ff0'],
[0.5, '#ff0ff0'],
[0.5, '#f0f00f']
]
},
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]
}]
});
The only problem with that solution is that you can't specify (in values) where will be break - try to resize chart. So you would need to update series color gradient on each window resize etc.
You can use zones in each serie like this:
zones: [{
value: 500,
color: '#A0A0A0'
}]
value is the up until value, and color is the color of that zone. Here's your edited FIDDLE
EDIT:
You can also use plotBands but it's not exactly what you would want: DEMO
There is also a plugin which I don't think covers exactly what you are asking: Plugin
Other than these I don't think there is another way unless you alter your data and use stacked bar chart. You will have to change all of your data though and it will be tiresome.
You can use concept of grouping, threshold and negativeColor to achieve this. Create 2 series with the same data and overlap them with grouping: false and a negativeColor: 'transparent'
demo: https://jsfiddle.net/1dp8L1gw/
plotOptions: {
bar: {
grouping: false,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [45.9, 71.5, 106.4],
color: 'red'
}, {
name: 'Tokyo',
data: [45.9, 71.5, 106.4],
color: 'blue',
threshold: 50,
negativeColor: 'transparent'
}]
Is there a way to trigger the chart click event, when I click on a point?
I am trying to have a consistent behavior, so I wonder if I can click on a point and in the click function of the point, call the chart click event.
Even better, if I can just disable altogether the click on the point; altho I use tooltip, so I guess that it won't work without points then.
Instaed of triggering, you can prepare a global functions and then call it in click point event.
$('#container').highcharts({
chart: {
events: {
click: function (event) {
chartClick();
}
}
},
plotOptions: {
series: {
point: {
events: {
click: function () {
alert('point click');
chartClick();
}
}
}
}
},
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]
}]
});
function chartClick() {
alert('chartClick');
}
Example: http://jsfiddle.net/sbochan/233x5698/
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.