CODEWITHSUNDEEP
javascriptjqueryhighchartschart.js
Anish Sharma
Anish Sharma

Reputation: 177

Need to put border on variablepie highchart?

1.Need to put border to the variablepie chart.

2.Need to Change color of the chart. 2.Need to change text size of the legend.

I tried but its shows error. Is this possible to do above thinks?

enter image description here

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>

 <div id="container"></div>



Highcharts.chart('container', {
chart: {
    type: 'variablepie'
},
title: {
    text: 'Countries compared by population density and total area.'
},
tooltip: {
    headerFormat: '',
    pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
        'Area (square km): <b>{point.y}</b><br/>' +
        'Population density (people per square km): <b>{point.z}</b><br/>'
},
series: [{
    minPointSize: 10,
    innerSize: '20%',
    zMin: 0,
    name: 'countries',
    data: [{
        name: 'Spain',
        y: 505370,
        z: 92.9
    }, {
        name: 'France',
        y: 551500,
        z: 118.7
    }, {
        name: 'Poland',
        y: 312685,
        z: 124.6
    }, {
        name: 'Czech Republic',
        y: 78867,
        z: 137.5
    }, {
        name: 'Italy',
        y: 301340,
        z: 201.8
    }, {
        name: 'Switzerland',
        y: 41277,
        z: 214.5
    }, {
        name: 'Germany',
        y: 357022,
        z: 235.6
    }]
}]
});

Need to draw border top of the chart like that image.

Upvotes: 0

Views: 194

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

1 - To add the border use Highcharts. SVGRenderer:

chart: {
    type: 'variablepie',
    events: {
        load: function() {
            this.renderer.circle(
                this.chartWidth / 2,
                this.plotHeight / 2 + this.plotTop,
                this.plotHeight / 2
            ).attr({
                fill: 'rgba(0,0,0,0)',
                stroke: 'green',
                'stroke-width': 2
            }).add()
        }
    }
}

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle

2 - To change the colors of points set the colors array:

colors: ['#4286f4', '#19e597', '#e84a4a', '#bbd827', '#27cfd8', '#d827cf', '#3a1c0f'],

API: https://api.highcharts.com/highcharts/colors

3 - To change text size in the legend set fontSize in itemStyle:

legend: {
    itemStyle: {
        fontSize: 16
    }
}

API: https://api.highcharts.com/highcharts/legend.itemStyle

Live demo: https://jsfiddle.net/BlackLabel/dLv2e0hq/

Upvotes: 2

Related Questions