javascript - Column Charts with stripes -

can this?

i have 2 categories here. (first 5 relevant , last 2 or not, why last 2 in gray color.)

in first category, if value below 6, should 1 color, if between 6 , 8, should have other color , greater 8, should have 2 colors, 8 1 color, , >8 color. know whether can provide stripes well?

i have used highcharts , amcharts before, built small library around also. did not able achieve functionality. appreciated in either of these libraries

while not doable out-of-the-box, can implemented using amcharts little custom code.

the complete working code below, general idea this.

when chart loads (using addinithandler)we these steps:

1. check chart config custom properties setting thresholds , colors;
2. set graph's negativebase , negativefillcolors properties, chart handle coloring of columns above or below value threshold;
3. iterate through data , see if there columns on threshold (8 in example). if there are, create 2 additional values in our data use later put differently colored floating column graph color "tips" of columns;
4. add floating graph tips; (as per above)
5. finally add additional graph on rest of graphs uses pattern fill apply nice striped effect.

the last 2 column colors handled setting colors in data , using fillcolorsfield auto-color them accordingly.

here's complete working code:

var chart = amcharts.makechart("chartdiv", {    "type": "serial",    /**     * these not built-in properties     * setting used 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 set    // nothing if it's not    if (chart.customproperties === undefined)      return;      // let our custom properties easy variable    var c = chart.customproperties;        // we'll assume we'll use first graph in chart    var graph = chart.graphs[0];      // first let's set negative base values , colors    // chart automatically handles coloring of     // graphs lower threshold1    if (c.threshold1 !== undefined) {      graph.negativebase = c.threshold1;      graph.negativefillcolors = c.thresholdcolor1;    }      // hardest part - color top sections of     // columns on threshold    // we'll neet iterate through data    for( var = 0; < chart.dataprovider.length; i++) {      var row = chart.dataprovider[i];      if (row[graph.valuefield] > c.threshold2) {        // bigger value        // let's add floating values our floating oeverlay graph        row[graph.valuefield + 'close'] = row[graph.valuefield];        row[graph.valuefield + 'open'] = c.threshold2;      }    }        // let's add separate floating graph color 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);          // let's add dummy graph patterns go on     // actual graph provide 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 same code on codepen.