Develop Reference

Removing/Hiding Null label from x-axis of Chart

I'm looking to hide the null label from my chart here. I'm working in Actuate/Opentext designer. I originally needed for there to always be 28 column slots but there isn't always data points for each of those days. If there isn't- the label on the x-axis is showing up as null. I'd like to hide this label but can't figure out how. Even changing the color of it to white but I can't get around how to manipulate this label to never show when null. Here is an image of what I'm trying to remove from my chart and the current code
beforeGeneration: function(options) { options.xAxis.max = 27
//You can change options here.
options.plotOptions = {
series: {
pointWidth: 25, //size of column
pointPadding: 0.25, //size of padding between each bar
groupPadding: 0 //padding between each value groups in x axis
}
};
},

Use formatter function:
xAxis: {
...,
labels: {
formatter: function(){
return this.value || '';
}
}
}
API Reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter

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

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/

highcharts Set Position of dataLabels not work

I want to show a long pie chart (vertical) not the default (Horizontal)
so I set dataLabels of every data , to move the position to label
but seem like a bug or something , it didn't work
or maybe have another way to do this?
I am very need to solve this issue
very thankful
here is my code:
http://jsfiddle.net/arhspt8011/Jgrdz/1
data: [
{
name:'Label1',
y:50,
dataLabels:
{
ebabled:false,
y:-200
}
},
{
name:'Label2',
y:50,
dataLabels:
{
ebabled:true,
y:-200
}
},
{
name:'Label3',
y:50,
dataLabels:
{
ebabled:true,
y:200
}
}
]
the y of dataLabels didn't work OTZ

You can increase width of chart, add spacingLeft / spacingRight, reduce chart size by "size" paramter. In case when you would like to have vertical datalabels, your can try to useHTML / formatter.