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]}]
Related
Seems like it should be an easy enough thing but i cant see how i pass x values to a line chart.
Ive found examples like: https://jsfiddle.net/9r0sfehc/1/
Highcharts.chart('container', {
xAxis: {
type: 'datetime'
},
plotOptions: {
series: {
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000// one day
}
},
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]
}]
});
So they pass in the y values and then have a point start in the plot options. That works fine. But im just wondering how i pass in x values too in the case i need something like that.
I tried
data: [{1,29.9}, {2,71.5}, ...]
but that isnt correct
Highcharts can take data in several different ways. I think the one you're looking for is:
An array of arrays with 2 values. In this case, the values correspond to x,y. If the first value is a string, it is applied as the name of the point, and the x value is inferred.
data: [
[0, 1],
[1, 2],
[2, 8]
]
https://api.highcharts.com/highcharts/series.line.data
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 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.
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.
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]
}]