Column Charts with stripes

Question

Can I do something like this?

I have 2 categories here. (First 5 are relevant and last 2 or not, that is why last 2 are in gray color.)

In First category, If the value is below say 6, it should be one color, if it between 6 and 8, it should have other color and greater than 8, it should have 2 colors, up to 8 one color, and >8 another color. I like to know whether we can provide stripes as well?

I have used Highcharts and Amcharts before, even I built a small library around it also. But did not able to achieve this functionality. Any help is appreciated in either of these libraries

Answer 1

While not doable out-of-the-box, it can be implemented using amCharts with a little custom code.

The complete working code is below, but the general idea is this.

When the chart loads (using addInitHandler)we do these steps:

1. Check the chart config for custom properties for setting thresholds and colors;
2. Set graph's negativeBase and negativeFillColors properties, so that the chart itself could handle coloring of columns above or below certain value threshold;
3. Iterate through the data and see if there are any columns over certain threshold (8 in your example). If there are, we create two additional values in our data which we will use later to put differently colored floating column graph to color the "tips" of those columns;
4. Add floating graph for tips; (as per above)
5. Finally add an additional graph over the rest of the graphs that uses pattern fill to apply the nice striped effect.

The last two column colors are handled by setting their colors in data and using fillColorsField to auto-color them accordingly.

Here's the complete working code:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  /**
   * These are not built-in properties
   * We are just setting those to be used by our custom plugin
   */
  "customProperties": {
    "threshold1": 6.1,
    "thresholdColor1": "#93bcdc",
    "threshold2": 8,
    "thresholdColor2": "#eab144"
  },
  "dataProvider": [{
    "country": "USA",
    "visits": 9
  }, {
    "country": "China",
    "visits": 10
  }, {
    "country": "Japan",
    "visits": 8
  }, {
    "country": "Germany",
    "visits": 6
  }, {
    "country": "UK",
    "visits": 8,
    "fillColor": "#cccccc"
  }, {
    "country": "France",
    "visits": 8,
    "fillColor": "#cccccc"
  }],
  "valueAxes": [{
    "gridAlpha": 0.1,
    "dashLength": 0,
    "stackType": "regular"
  }],
  "startDuration": 1,
  "graphs": [{
    "fillAlphas": 1,
    "fillColors": "#345e80",
    "fillColorsField": "fillColor",
    "lineAlpha": 0,
    "type": "column",
    "valueField": "visits",
    "xpattern": {
      "url": "patterns/white/pattern10.png",
      "width": 4,
      "height": 8
    }
  }],
  "chartCursor": {
    "zoomable": false,
    "cursorAlpha": 0
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
  }
});

/**
 * Custom plugin
 */
AmCharts.addInitHandler(function(chart) {

  // check if customProperties is set
  // do nothing if it's not
  if (chart.customProperties === undefined)
    return;

  // let get our custom properties into a easy variable
  var c = chart.customProperties;
  
  // we'll just assume that we'll use the first graph in the chart
  var graph = chart.graphs[0];

  // first let's set negative base values and colors
  // so the chart automatically handles coloring of 
  // graphs lower than threshold1
  if (c.threshold1 !== undefined) {
    graph.negativeBase = c.threshold1;
    graph.negativeFillColors = c.thresholdColor1;
  }

  // now the hardest part - color top sections of 
  // columns over certain threshold
  // for that we'll neet to iterate through the data
  for( var i = 0; i < chart.dataProvider.length; i++) {
    var row = chart.dataProvider[i];
    if (row[graph.valueField] > c.threshold2) {
      // bigger value
      // let's add a floating values for our floating oeverlay graph
      row[graph.valueField + 'Close'] = row[graph.valueField];
      row[graph.valueField + 'Open'] = c.threshold2;
    }
  }
  
  // now let's add a separate floating graph that will color the tips
  var tipGraph = new AmCharts.AmGraph();
  tipGraph.valueField = graph.valueField + 'Close';
  tipGraph.openField = graph.valueField + 'Open';
  tipGraph.stackable = false;
  tipGraph.clustered = false;
  tipGraph.lineAlpha = 0;
  tipGraph.fillAlphas = 1;
  tipGraph.fillColors = c.thresholdColor2;
  tipGraph.type = "column";
  tipGraph.showBalloon = false;
  chart.addGraph(tipGraph);
  
    // now let's add dummy graph with patterns to go over the 
  // actual graph to provide the striped effect
  var stripeGraph = new AmCharts.AmGraph();
  stripeGraph.valueField = graph.valueField;
  stripeGraph.stackable = false;
  stripeGraph.clustered = false;
  stripeGraph.lineAlpha = 0;
  stripeGraph.fillAlphas = 1;
  stripeGraph.type = "column";
  stripeGraph.showBalloon = false;
  stripeGraph.pattern = {
    "url": "patterns/white/pattern10.png",
    "width": 4,
    "height": 8
  };
  chart.addGraph(stripeGraph);

}, ["serial"]);

#chartdiv {
  width: 500px;
  height: 300px;
}

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>

Or the same code on Codepen.