CODEWITHSUNDEEP
jqueryhighcharts
Jake
Jake

Reputation: 26117

Highcharts - Make text inside pie chart responsive

I have created the following Pie Chart:

http://jsfiddle.net/niftyhawk/6Ljnkmwe/

I would like to center the number "100" in the pie chart and make it responsive when window is resized. Currently, the text is centered, but it's not responsive.

function(chart) { // on complete
        var textX = chart.plotLeft + (chart.series[0].center[0]);
        var textY = chart.plotTop  + (chart.series[0].center[1]);

        var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;">';
        span += '<span style="font-size: 32px">Upper</span><br>';
        span += '<span style="font-size: 16px">Lower</span>';
        span += '</span>';

        $("#container").append(span);
        span = $('#pieChartInfoText');
        span.css('left', textX + (span.width() * -0.5));
        span.css('top', textY + (span.height() * -0.5));
    }

Upvotes: 0

Views: 2643

Answers (1)

Andrii Bugai
Andrii Bugai

Reputation: 156

Put the number "100" into subtitle and center it. Instead of using the function that @Jake developed, that adds number "100" into the chart after the chart is rendered, it is better to render this number by means of Highcharts.js. One of the possible ways to do it is to use subtitle field inside Highcharts.Chart. As in the example below, you should set to it align: 'center', verticalAlign: 'middle'. This will center your number and will be responsive.

The should be a solution to your problem: http://jsfiddle.net/6Ljnkmwe/5/

$(function() {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie'
    },
    plotOptions: {
        pie: {
            innerSize: '40%'
        }
    },
    title: {
        text: 'Browser Series Chart'
    },
    subtitle: {
            text: '150',
            align: 'center',
            verticalAlign: 'middle',
                            style: { "fontSize": "22px" },
                            y: 15
            },
    credits: { enabled: false},
    series: [{
        data: [
            ['Firefox', 2262],
            ['IE7', 3800],
            ['IE6', 1000],
            ['Chrome', 1986]
            ]}]
});
});

Upvotes: 3

Related Questions