CODEWITHSUNDEEP
highcharts
Jack Arturo
Jack Arturo

Reputation: 67

Highcharts polar area label customization

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?

Upvotes: 3

Views: 2746

Answers (3)

Mike Zavarello
Mike Zavarello

Reputation: 3554

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!

Upvotes: 1

Jack Arturo
Jack Arturo

Reputation: 67

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.

Upvotes: 1

yuk
yuk

Reputation: 933

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/

Upvotes: 0

Related Questions