CODEWITHSUNDEEP
javascriptchartshighcharts
Night Train
Night Train

Reputation: 781

High Charts Center Series Label

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.

Upvotes: 0

Views: 105

Answers (2)

jlbriggs
jlbriggs

Reputation: 17800

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

Upvotes: 0

Kacper Madej
Kacper Madej

Reputation: 7886

Try setting inside to true for dataLabels.

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

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

Upvotes: 2

Related Questions