Develop Reference

Use series data but display custom text on top of columns Highchart

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

xaxis label text words overlapping each other

How can i make the label text in the fiddle to be displayed the same way when exporting to image or pdf?
fiddlehttp://jsfiddle.net/hy5gx3v9/2/

You need to set the exporting: allowHTML: true if you would like to use HTML elements during exporting the chart.
exporting: {
allowHTML: true
}
The set the xAxis.labels.style.textOverflow equal to none.
After setting mentioned things, additionally you can delete the style attribute within returned string of the xAxis.labels.formatter:
labels: {
align: 'right',
useHTML: true,
formatter: function() { //use formatter
return '<span class="qTitle">' + this.value + '</span>';
},
style: {
textOverflow: 'none',
}
},
Live example: http://jsfiddle.net/song62xr/
API Reference: https://api.highcharts.com/highcharts/exporting.allowHTML
Kind regards!

To the best of my knowledge, you can't, however, the best way to do it would be making images and a pdf yourself, and then making buttons for it.
By the way, when I removed all the gibberish, it exported just fine.

Response highcharts datalabels on series

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.

Incorrect data point value in highcharts navigator series when extending min and max date

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

Highcharts markers on line only where there are labels

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/