Highcharts column chart: create color groups

Question

I took the code from highcharts demo. The columns are in the color. I would like to modify colors, smt. like to assign blue to some of them and the rest in orange. I post here the code and the link in jsfiddle below. Here is the code:

html:

<script src="https://code.highcharts.com/highcharts.js"></script

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Chart showing ...
    </p>
</figure>

js:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'World\'s largest cities per 2017'
    },
    subtitle: {
        text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            style: {
                fontSize: '10px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: 'Population in 2017: <b>{point.y:.1f} millions</b>'
    },
    series: [{
        name: 'Population',
        data: [
        ['Shanghai', 24.2],
        ['Beijing', 20.8],
        ['Karachi', 14.9],
        ['Shenzhen', 13.7],
        ['Guangzhou', 13.1],
        ['Istanbul', 19.7],
        ['Mumbai', 12.4],
        ['Moscow', 14.2],
        ['São Paulo', 12.0],
        ['Delhi', 18.7],
        ['Kinshasa', 15.5]
        ],
        dataLabels: {
        enabled: true,
        rotation: -90,
        color: '#FFFFFF',
        align: 'right',
        format: '{point.y:.1f}', // one decimal
        y: 10, // 10 pixels down from the top
        style: {
            fontSize: '10px',
            fontFamily: 'Verdana, sans-serif'
        }
    }
    }]
});

https://jsfiddle.net/dcmpg1z2/1/

I would like to see "Delhi" and "Kinshasa" in orange color. And the rest in different color. How can I do it?

This should lead you in the right direction https://stackoverflow.com/questions/7414287/how-do-you-change-the-colour-of-each-category-within-a-highcharts-column-chart — Aaron, Feb 04 '20 at 06:35

Muhammad Usman · Accepted Answer · 2020-02-04T06:45:24.153

1

if you want each category to take different color, you should set colorByPoint to true and explicitly specify the colors for the ones you want to set by passing an object with the name, y and the color property.

here is the fiddle

edited Feb 04 '20 at 06:45

answered Feb 04 '20 at 06:40

Muhammad Usman

10,039
22
39

https://jsfiddle.net/gyk0njmu/ this one is correct, I edited your code, please edit yours then I will accept it. – Nessi Feb 04 '20 at 06:43
all were correct, I just added colors manually, there is a color list. – Nessi Feb 04 '20 at 06:54

Highcharts column chart: create color groups

1 Answers1