High Charts Center Series Label

0
votes

I'm working with High Charts (http://www.highcharts.com/) to get some interactive charts for my webpage. I'm attempting to create a timeline of sorts using a column range chart and a bunch of series.

http://jsfiddle.net/asrm5zL0/

dataLabels: {
                enabled: true,
                align: 'middle',
                crop: false,
                style: {
                    fontWeight: 'bold'
                },
                verticalAlign: 'middle',
                formatter: function () { return 'CenterThis' }
            }

Currently I've created the above example. I've been trying to find a way to center the labels for a given series in the bar itself, however it seems to always want to label each data point. Is there a simple way to do this that I'm not seeing? The high charts documentation for series (http://api.highcharts.com/highcharts#plotOptions.series.dataLabels) didn't seem to have a property for this sort of thing.

Thank you for any help.

2
javascriptchartshighcharts
Do you mean that you want a single data label for each bar? If so, what do you want the value to be? There is not a simple solution for this, as far as I know. I would approach this with a separate scatter series, using the center of the range as the y value, and apply the data labels to that series. – jlbriggs
Yes, I am attempting to get a single data label for each bar. The value would be determined by a simple function. Do you have an example of a scatter series? – Night Train

2 Answers

2
votes

Try setting inside to true for dataLabels.

             ...
             dataLabels: {
                 align: 'center',
                 inside: true,
             ...

API reference, example: http://jsfiddle.net/asrm5zL0/7/

0
votes

Example using a scatter series to split the difference:

.

{
    linkedTo: ':prev',
    name: 'Data Label Series',
    type: 'scatter',
    enableMouseTracking: false,
    marker: { radius : 0 },
    dataLabels: {
        enabled: true,
        align: 'center',
        verticalAlign: 'middle',
        style: {
            fontSize:'.75em',
            fontWeight: 'normal'
        },
        formatter: function () { return 'CenterThis' }
    },
    data: [[3, Date.UTC(2015, 09, 01, 17, 30, 0)]]
}