Setting color options on Highchart bar chart

Question

I am working on this demo. Why is the plot options color not getting the bar colors from the Color options (two colors)? As you can see it is taking color from only one for both colors.

$(function () {
    chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
          type: 'bar'
        },
        plotOptions: {
            column: {
                colorByPoint: true
            },
              series: {
                pointWidth: 50
            }
        },
        colors: [
            '#D9844B',
            '#3F4539'],
        credits: {
            enabled: false
        },
        title: {
            text: 'Test',
            style: {
                color: '#2d2d2d',
                fontWeight: 'normal',
                fontSize: '11',
                marginBottom: '30'
            }
        },

        xAxis: {
            categories: ['Ecology & Economics', 'Economics Only'],

        },
        yAxis: {
            tickInterval: 50,
            max: 300,
            title: {
                text: 'Number of ROR Facilities'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function () {
                return this.x + '  <b> : ' + this.y + '</b>';
            }
        },
        series: [{
            data: [29.9, 71.5],
            dataLabels: {
                enabled: true,

                color: '#2d2d2d',
                align: 'right',
                x: -40,
                y: 0,
                style: {
                    fontSize: '12px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });
});

Answer 1

Referring to @Mark answer, the Highcharts documentation is correct.

There is a difference between defining options in every series in Highcharts, especially bar and column series are different series.

You are using bar series (chart.type: 'bar'), but in plotOptions you are defining colorByPoint only for a column series which, obviously, does not even exist in your chart.

You have many solutions:

1) You can define colorByPoint inside a specific series options:

  chart: {
    type: 'bar'
  },

  series: [{
    colorByPoint: true,
    data: [4, 3, 5]
  }]

2) you can define colorByPoint for all series:

chart: {
    type: 'bar'
  },

  plotOptions: {
    series: {
        colorByPoint: true
    }
  },

  series: [{
    data: [4, 3, 5]
  }]

3) You can define colorByPoint for all bar type series:

chart: {
    type: 'bar'
  },

  plotOptions: {
    bar: {
        colorByPoint: true
    }
  },

  series: [{
    data: [4, 3, 5]
  }]

4) You can use inverted column type series (which is actually a bar series):

chart: {
    type: 'column',
    inverted: true
  },

  plotOptions: {
    column: {
      colorByPoint: true
    }
  },

  series: [{
    data: [4, 3, 5]
  }]

5) You can also define the color for each bar separately:

series: [{
    type: 'bar',
    data: [{
      y: 4,
      color: 'red'
    }, {
      y: 3,
      color: 'blue'
    }, {
      y: 5,
      color: 'green'
    }]
  }]

And even more. Above solution should be enough for you. Remember, plotOptions.column will not work for chart.type: 'bar'.

Answer 2

I think the documentation is wrong. It says that colorByPoint is a bar/column option but you are correct it isn't working. Moving it to a series option and it does work:

    plotOptions: {            
          series: {
            pointWidth: 50,
            colorByPoint: true
        }
    },

Updated fiddle.