Stacked Chart With Zingchart

I'm making stacked bar chart with ZingChart library. Here is a sample http://jsfiddle.net/api/post/library/pure/ but suppose i need a limit , e.g the color should only change if i

Solution 1:

I think this might be what you're looking for. Feel free to let me know if not.

This demo assumes that you start with one array of totals like this:

var origSeries = [10316,23988,39643,40708,9857,18558,42194,28130,26569,23148,31424,41053,27838,38383,36105,47613,35903,40775,37769,24143];

We'll programmatically split these into two series: one that is below threshold and one that is above. Then we set the desired background color on each series.

Run the snippet to see it in action. Remember, you could do this an infinite number of times to create additional stacks using different thresholds.

Again, I'm on the ZC team so don't hesitate to reach out for help!

var origSeries = [10316, 23988, 39643, 40708, 9857, 18558, 42194, 28130, 26569, 23148, 31424, 41053, 27838, 38383, 36105, 47613, 35903, 40775, 37769, 24143];
var series1 = [];
var series2 = [];

functioncalcThreshold(array, threshold) {
  var difference;
  array.forEach(function(el, index, array) {
    difference = el - threshold;
    if (difference <= 0) {
      series1.push(el);
      series2.push(null);
    } else {
      series1.push(threshold);
      series2.push(difference);
    }
  });
}

calcThreshold(origSeries, 15000);

var myConfig = {
  "type": "bar",
  "stacked": true,
  "stack-type": "normal",
  "background-color": "#FFFFFF",
  "title": {
    "text": "Mobile OS Sales  - ",
    "font-family": "arial",
    "x": "40px",
    "y": "5px",
    "align": "left",
    "bold": false,
    "font-size": "16px",
    "font-color": "#000000",
    "background-color": "none"
  },
  "subtitle": {
    "text": "<i>Since January 14, 2013</i>",
    "font-family": "arial",
    "x": "175px",
    "y": "5px",
    "align": "left",
    "bold": false,
    "font-size": "16px",
    "font-color": "#7E7E7E",
    "background-color": "none"
  },
  "plot": {
    "bar-width": "25px",
    "hover-state": {
      "visible": false
    }
  },
  "scale-x": {
    "values": [
      "JAN",
      "FEB",
      "MAR",
      "APR",
      "MAY",
      "JUN",
      "JUL",
      "AUG",
      "SEP",
      "OCT",
      "NOV",
      "DEC"
    ],
    "line-color": "#7E7E7E",
    "tick": {
      "visible": false
    },
    "guide": {
      "visible": false
    },
    "item": {
      "font-family": "arial",
      "font-color": "#8B8B8B"
    }
  },
  "scale-y": {
    "values": "0:70000:10000",
    "short": true,
    "line-color": "#7E7E7E",
    "tick": {
      "visible": false
    },
    "guide": {
      "line-style": "solid"
    },
    "item": {
      "font-family": "arial",
      "font-color": "#8B8B8B"
    }
  },
  "series": [{
    "values": series1,
    "background-color": "#787878"
  }, {
    "values": series2,
    "background-color": "#ff4900"
  }],
  "tooltip": {
    "visible": false
  }
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 500,
  width: 725
});

<scriptsrc="https://cdn.zingchart.com/zingchart.min.js"></script><divid="myChart"></div>