Highcharts polar area label customization

2
votes

I'm creating a polar area chart in Highcharts. I'm having issues with the labels being positioned inside the chart. See an example here:

$('#container').highcharts({

        chart: {
            polar: true,
            backgroundColor: 'transparent',
            plotBorderWidth: null,
            margin: [0, 0, 0, 0],
            spacingTop: 0,
            spacingBottom: 0,
            spacingLeft: 0,
            spacingRight: 0
        },

        title:{
            text:''
        },

        subTitle:{
            text:''
        },

        pane: {
            startAngle: 0,
            endAngle: 360
        },

        legend: {
            enabled: false
        },

        xAxis: {
            tickInterval: 45,
            min: 0,
            max: 360,
            lineWidth: 0,
            minorGridLineWidth: 0,
            gridLineColor: 'transparent',
            labels: {
               enabled: false
            },
        },

        yAxis: {
            min: 0,
            lineWidth: 0,
            minorGridLineWidth: 0,
            gridLineColor: 'transparent',
            labels: {
               enabled: false
            },
        },

        plotOptions: {
            series: {
                pointStart: 0,
                pointInterval: 45,
                pointPlacement: 'between',
                states: {
                    hover: {
                        enabled: true
                    }
                },
                dataLabels: {
                    enabled: true,
                    format: '<span class="wheel-label" style="color: {point.color}">{point.name}</span>',
                    style: {
                        textShadow: false,
                        width: 150,
                        fontSize: "16px"
                    },
                }
            },
            column: {
                pointPadding: 0,
                groupPadding: 0,
                borderWidth: borderWidth
            },
        },

        series: [{
            showInLegend: false,
            type: 'column',
            name: 'Column',
            data: data
        }],

        credits: {
            enabled: false
        }
    });

http://jsfiddle.net/c904atb3/

I notice with the pie charts there are options for "distance" but no such option exists for the polar chart. I'd also like to be able to use "connectors" if possible but I don't see this available for polar either. How can I get more control over these labels?

3
highcharts
Pie chart has specific options. Your polar chart looks like a pie chart, so maybe use pie chart with options you want to use? Here you can find list of all options for dataLabels for column series type. Useful are x/y/align/verticalAlign etc. - Paweł Fus
I did the JSFiddle with all columns to a value of 10 but in production some columns will be shorter than others, so a pie won't work. - Jack Arturo

3 Answers

1
votes

I've had similar problems getting labels to be "pushed" out from the borders of a polar/spider chart. The way I solved this was to use plot bands to put a ring around the outside rim.

My test can be found here: http://jsfiddle.net/brightmatrix/j3v0zstk/

In this case, I added the following line to your yAxis:

plotBands: [ { from: 8, to: 15, color: '#FFFFFF', zIndex: 5 } ]

The values I used are merely for illustration. If you wanted the colored wedges in your chart to truly go out to 10, define a max value for your yAxis and have the plot bands cover what would extend past the chart edges.

The zIndex value of "5" makes sure the plot bands sit on top of your chart wedges to give the desired effect.

I hope this is helpful!

1
votes

I managed to fix it by allowing the labels to extend outside the container, then setting the container to overflow:visible. Not ideal but it works.

dataLabels: {
    enabled: true,
    crop: false,
    overflow: 'none',
    padding: 50,
    useHTML: true,
    verticalAlign: 'middle',
    format: '<div class="wheel-label" style="color: {point.color}">{point.name}</div>',
    style: {
        textShadow: false,
        width: 250,
        fontSize: '22px'
    },
}

http://jsfiddle.net/c904atb3/2/

In my production code I added a CSS class to each label based on the name so I can tweak positioning in CSS.

0
votes

You can set label's coordinates like this:

 var data = [{
            name: "Label 1",
            dataLabels: {
                    x:100,
                    y:100
            },
            y: 10,
            color: "#9fe642"
        },

http://jsfiddle.net/c904atb3/1/