Moris charts alternating colours for bar chart

Question

Im currently making use of the Morris Bar chart and its working quite nicely.

Im having a problem with making the bars alternate in colour from 2 defined colours.

if( $("#publication-chart").length)
{
Morris.Bar({
  element: 'publication-chart',
  data: financeChartData,
  xkey: 'y',
  ykeys: ['a'],
  labels: ['Total'],
  barColors: ['#FF0000','#000000','#FF0000','#000000','#FF0000']
});
}

in my code, i'm trying to alternate from red to black, but it only appears to show in red every time.

Ive also tried to have the colour of the chart come from the data array, but cant seem to get greater control over the bars in the chart

possible duplicate of [Varying bar colors with morris.js bar chart?](http://stackoverflow.com/questions/26763825/varying-bar-colors-with-morris-js-bar-chart) — D4V1D, Jul 27 '15 at 06:49

score 1 · Answer 1 · answered Jul 28 '15 at 20:08

You can pass a function to barColors to override the default behavior. Try something like this to alternate the colors of the bars:

barColors: function(row, series, type) {
  if(row.x % 2 == 0)
    return '#FF0000';
  else
    return '#000000';
}

This jsBin illustrates a working example.

Moris charts alternating colours for bar chart

1 Answers1