*highcharts* Get Rid Of The Color In The Percentage Area Chart

I have a percentage area chart like this: http://www.highcharts.com/demo/area-stacked-percent and want to ask that are there any ways to get rid of the area's color ? so that we ha

Solution 1:

I guess this is what you're looking for:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        title: {
            text: 'Historic and Estimated Worldwide Population Distribution by Region'
        },
        subtitle: {
            text: 'Source: Wikipedia.org'
        },
        xAxis: {
            categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: 'Percent'
            }
        },
        tooltip: {
            pointFormat: '<span style="color:#ffffff">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
            shared: true
        },
        plotOptions: {
            area: {
                stacking: 'percent',
                lineColor: '#ffffff',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#ffffff'
                }
            }
        },
        series: [{
            name: 'Asia',
            data: [502, 635, 809, 947, 1402, 3634, 5268]
        }, {
            name: 'Africa',
            data: [106, 107, 111, 133, 221, 767, 1766]
        }, {
            name: 'Europe',
            data: [163, 203, 276, 408, 547, 729, 628]
        }, {
            name: 'America',
            data: [18, 31, 54, 156, 339, 818, 1201]
        }, {
            name: 'Oceania',
            data: [2, 2, 2, 6, 13, 30, 46]
        }]
    });
});

<scriptsrc="https://code.highcharts.com/highcharts.js"></script><scriptsrc="https://code.highcharts.com/modules/exporting.js"></script><divid="container"style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

Solution 2:

You can use fillColor inside plotOptions --> area something like below.

plotOptions: {
    area: {
        fillColor:'rgba(0, 0, 0, 0)',
        stacking:'percent',
        lineWidth:1,
        marker: {
            lineWidth:1,
            lineColor:'#ffffff'
        }
    },
}

The working fiddle can be found here.

For demonstration i have used the same example as high chart.

Solution 3:

$(function() {
$('#container').highcharts({
    chart: {
        type:'area'
    },
    title: {
        text:'Historic and Estimated Worldwide Population Distribution by Region'
    },
    subtitle: {
        text:'Source: Wikipedia.org'
    },
    xAxis: {
        categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
        tickmarkPlacement:'on',
        title: {
            enabled:false
        }
    },
    yAxis: {
        title: {
            text:'Percent'
        }
    },
    tooltip: {
        pointFormat:'<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
        shared:true
    },
    plotOptions: {
        area: {
                color:'white',
            stacking:'percent',
            lineColor:'black',
            lineWidth:1,
            marker: {
                lineWidth:1,
                lineColor:'black'
            }
        }
    },
    series: [{
        name:'Asia',
        data: [502, 635, 809, 947, 1402, 3634, 5268]
    }, {
        name:'Africa',
        data: [106, 107, 111, 133, 221, 767, 1766]
    }, {
        name:'Europe',
        data: [163, 203, 276, 408, 547, 729, 628]
    }, {
        name:'America',
        data: [18, 31, 54, 156, 339, 818, 1201]
    }, {
        name:'Oceania',
        data: [2, 2, 2, 6, 13, 30, 46]
    }]
});

});

the only problem is that line color will be same.