Basic column

author(s): Torstein Hønsi

by Salehin Modasiya

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill-v2.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

var colors = ["#FF0000","#FF0000",  "#FF8C00", "#FF8C00", "#FFFF00", "#FFFF00", "#00FF00", "#00FF00"];

var series = [{
  "color": "#FF0000",
  "name": "High",
  "data": [298, 199]
}, {
showInLegend: false,             
  "color": "#FF0000",
  "name": "High",
  "data": [130, 32] 
}, {
  "color": "#FFFF00",
  "name": "Medium",
  "data": [141, 163]
}, {
  "color": "#FFFF00",
  "name": "Medium",
  "data": [42, 8]
},{
  "color": "#FF0000",
  "name": "Low",
  "data": [298, 199]
}, {
  "color": "#FF0000",
  "name": "Low",
  "data": [130, 32]
}, {
  "color": "#FFFF00",
  "name": "lowest",
  "data": [141, 163]
}, {
  "color": "#FFFF00",
  "name": "lowest",
  "data": [42, 8]
}];

function getPatterns(colors) {
  return colors.map(function(color, i) {
    return {
      id: 'custom-pattern-' + i,
      path: {
        d: 'M 10 0 L 0 0 M 10 0 L 0 0 M 10 0 L 0 0',
        stroke: color
      }
    };
  });
}

function getMappedSeries(series) {
  return series.map(function(serie, i) {
    return {
    showInLegend: i % 2 ? false : true,             
      color: colors[i],
      name: serie.name,
      data: serie.data.map(function(value, j) {
        return i % 2 ? {            
          y: value,
          color: 'url(#custom-pattern-' + i + ')'
        } : value;
      })
    };
  });
}

Highcharts.chart('container', {
    defs: {
      patterns: getPatterns(colors)
    },

    "chart": {
      "renderTo": 'container',
      "type": 'bar'
    },

    "style": {
      " fontFamily": "Arial"
    },
    "credits": {
      "enabled": false
    },
    "navigation": {
      "menuItemStyle": {
        "fontFamily": "Arial",
        "fontsize": "12px"
      }
    },
    "chart": {
      "type": "column"
    },
    "lang": {
      "tooltip_key": "Show Risk Level View"
    },
    "exporting": {
      "fallbackToExportServer": false,
      "buttons": {
        "customButton": {
          "_titleKey": "tooltip_key",
          "text": "Show Risk Level View"
        }
      }
    },
 ...