I have successfully labeled a time series for a subset of the points (where the time is either 3am or 3pm), but now to make the chart look cleaner I would like to only have the markers show up at the points where there are labels. Anyone out there know how to accomplish this? I am trying to add a graphic.destroy command in the label but I can't seem to get it to work.
js fiddle: http://jsfiddle.net/abbike18/z2k8h/1/
dataLabels: {
enabled: true,
y: -10,
formatter: function() {
if(Highcharts.dateFormat('%l',this.x) == '3')
{return Highcharts.numberFormat(this.y, 0, '.');}
//else{data.graphic.destroy();}
}
}
You can use this.point.destroy() function
http://jsfiddle.net/z2k8h/2/
Related
I'm trying to use highchart, working with colums.
My series data are some hours.
For example, if my data is 23.75, it means 23:45 hours.
I would like to use my 23.75 data so that my colums are in the right place, but the little text on top of my column displays "23:45".
Is it possible ? I can't find the right option to do this.
Thanks in advance !
you can format data label values by formatter
dataLabels: {
enabled: true,
formatter: function () {
return this.y; // you can update datalabel values here
}
}
Found it !
stackLabels: {
enabled: true,
formatter: function() {
return this.total // custom text label here
}
}
I have been working with http://api.highcharts.com/highcharts/plotOptions.series.dataLabels
And my current set up for labels looks like this:
plotOptions = {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter() {
if(this.y != 0) {
return formatValue(this.y, prefix, suffix);
}
}
}
}
};
But the problem I have is that if my column chart has let's say 30 columns, all of the labels run into each other. I see that I can set the allowOverlap param to false and so then they would not overlap....but then it looks messy with data labels all over the chart to prevent overlap. Is there a way to configure my highcharts to just hide all datalabels if there are too many labels (too many overlaps to handle)?
I've taken a look at Removing Highchart datalabels on windows resize but ideally would like to see if highcharts handles this.
I'm using Highcharts and I want to format all numbers showed anywhere in the chart (tooltips, axis labels...) with comma-separated thousands.
Otherwise, the default tooltips and labels are great, and i want to keep them exactly the same.
For example, in this chart, the number should be 2,581,326.31 but otherwise exactly the same.
How can I do this?
I tried adding:
tooltip: {
pointFormat: "{point.y:,.0f}"
}
But this got rid of the nice circle and series label in the tooltip - I'd like to keep that. And ideally I'd prefer to use a single option to set global number formatting, across the whole chart.
This can be set with the thousandSep (API) global option.
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
See this JSFiddle example.
This way worked with me.
I configured in yAxis option.
yAxis: {
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value, 2);
}
}
}
In case you want to show numbers without commas and spaces.
eg. by default 9800 shows as 9 800.
If you want 9800 to be shown as 9800
you can try this in tooltip:
tooltip: {
pointFormat: '<span>{point.y:.f}</span>'
}
This way work for me.
I use Angular 10 and I did this for Tooltip and yAxis.
for yAxis use numberFormat:
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
},
formatter: function() {
return Highcharts.numberFormat(this.value, 3);
}
},
and for Tooltip :
{point.y:.f}
I recently updated highstock in which I used a chart that displayed values with an "extended range", i.e. where the min and max date is set outside the boundaries of the chart data.
After the update (which fixed some other bugs) I noticed that the last data point in the navigator series at the bottom is not correct according to the data in the actual series. As can be seen, there's an additional data point at the far right in the bottom that doesn't exist in the actual series.
This can be viewed at http://jsfiddle.net/ab96pnjf/ as well
The code that creates the chart is the following
$(function () {
var fromdate = new Date('2011-04-01');
var todate = new Date('2012-05-21');
var series = [{
color: 'red',
data: MSFT,
name: 'MSFT'
}];
$('#container').highcharts('StockChart', {
navigator: {
series: {
data: series[0].data,
color: '#4572A7',
fillOpacity: 0.05
}
},
xAxis: {
ordinal: false,
min: fromdate.getTime(),
max: todate.getTime()
},
legend: {
enabled: true
},
series: series
});
});
Now, if I change the navigator.series property to
navigator: {
series: series
}
the navigator chart is correct, as in the values are cut off at the right when there is no more data available. This is what I want; the only problem is that the color is the same as the series, and I want it to use my custom color, as in the first example.
So how do I configure HighStock to cut off the last value in the navigator chart while at the same time being able to use a custom color for the series?
Hm, well I have a "quick fix" to this problem, as I am not sure how I would configure highcharts to do it for me.
Using jQuery I can extract the line in the navigator, since highcharts (at least) applies a class to the series. It sets the class name for all series including the one in the "main area", but the last one is the navigator series it seems, or every odd series if there is more than one highcharts chart in the document.
$(function () {
// ... as previous
$('#container').highcharts('StockChart', {
navigator: {
series: series
},
// ... as previous
});
// added code to apply a custom style to the navigator line diagram
var navseries = $('.highcharts-series:last').children();
// can be undefined if the series has no data points
if (navseries) {
navseries.css('stroke', '#4572A7');
navseries.css('strokeWidth', 1);
navseries.css('fillOpacity', 0.05);
}
});
I'm creating a Highcharts line chart based upon some user input. The user can select 1 or more groupings and a date range and I create a series for each group. This works fine except for that when they select over 3 groups, the chart looks terrible because there are way too many data labels.
I'd like to conditionally enable data labels only when where are less than 4 series on a chart. How can I do that? I'm trying like this but I can't seem to get it to work.
plotOptions: {
line: {
dataLabels: {
enabled: function() {
return !!(chart.series.length > 3);
},
color: '#000000',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}
}
}
}
When you create the series, keep track of how many you create. Also have a javascript variable 'showDataLabels=true'. If the number of series goes above 4 when you are creating them, set showDataLabels=false;
var showDataLabels = true;
// start creating the series.
If num series > 4
showDataLabels = false;
Once you are ready to generate the chart, use:
plotOptions: {
line: {
dataLabels: {
enabled:showDataLabels,
color: '#000000',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}
}
}
},
Use Formatter fucntion in dataLables
formatter: function () {
if(this.y!=0)
return this.y;
else`enter code here`
return "";
}