Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

How do you get a colorByPoint appearance in Highcharts without coloring all the bars in a group the same color?

When I add the following Highcharts snippet, the bars are styled the way I want. But ultimately I want each section to have its own color scheme. (light purple, dark purple, light blue, dark blue etc.):

plotOptions: {
     series: {
        dataLabels: {
             enabled: true,
             format: '{point.label}'
        tooltip: {
            valueSuffix: ' km'
        pointPadding: 0,
        groupPadding: 0.1,
        borderWidth: 0,
        colorByPoint: false       // Switch this to true in the jsFiddle
If you switch colorByPoint to true, the colors alternate and progress the way I want, but suddenly both bars in each group are colored the same color. 
How do I use the colorByPoint while maintaining that each POINT remains a different color (you'd think it would do this by default).
jsFiddle
                The colorByPoint sets each point's color by the index of the point to the index of the colors array you provided. This is why the points are the same. The code is doing exactly as you instructed it to. How to get a different color for each index can be done via some extra code (like a function to return the color for a given series.
– wergeld
                Jan 18, 2017 at 16:43
                @wergeld Highchart's definition of a point is "The Point object is the JavaScript representation of each data point." Considering that each bar is it's own data point isn't this functioning counter to expectation?
– leigero
                Jan 18, 2017 at 17:01
                But your plot options are for the series so it is plotting each point in the series as a different color. All options under plotOptions.series are applied to all series.
– wergeld
                Jan 18, 2017 at 17:02
As was mentioned in the comment, colorByPoint works per series, so it won't work with the global color arrays. However, you can define colors array per series just as colorByPoint works. Then you can split the initial array and assign them to series.
var colors = ['#CDAED1', '#82368C', '#94B8D2', '#2a71a5', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', 'orange'];
var splitColors = [
colors.forEach((color, i) => {
  splitColors[i % 2].push(color)
In chart config:
series: [{
  colors: splitColors[0]
  colors: splitColors[1]
example: http://jsfiddle.net/u59176h4/33/
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.