Highchart - Color Bar Chart

Highchart - Color Bar Chart

by EMIR MARQUES

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

$(document).ready(function () {
	
	$('#container').highcharts({
		
  "chart": {
    "zoomType": "x",
    "resetZoomButton": {
      "position": {
        "x": -95
      },
      "relativeTo": "chart"
    },
    "spacing": [
      20,
      20,
      20,
      20
    ],
    "type": "column",
    "style": {
      "fontFamily": "\"Roboto\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    },
    "renderTo": "5d03ba0439d897002d12774b"
  },
  "title": {
    "text": null
  },
  "exporting": {
    "enabled": false
  },
  "credits": {
    "enabled": false
  },
  "xAxis": {
    "type": "datetime",
    "dateTimeLabelFormats": {
      "second": "%I:%M:%S %p",
      "minute": "%I:%M %p",
      "hour": "%I:%M %p",
      "month": "%e. %b",
      "year": "%b"
    }
  },
  "yAxis": {
    "title": {
      "text": null
    },
    "plotLines": [
      {
        "value": 0,
        "width": 1,
        "color": "#808080"
      }
    ],
    "min": null,
    "max": null
  },
  "tooltip": {
    "dateTimeLabelFormats": {
      "millisecond": "%A, %b %e, %I:%M:%S.%L %p",
      "second": "%A, %b %e, %I:%M:%S %p",
      "minute": "%A, %b %e, %I:%M %p",
      "hour": "%A, %b %e, %I:%M %p"
    },
    "pointFormat": "<tr><td>{series.name}: </td><td><b>{point.y}</b></td></tr>",
    "footerFormat": "</table>",
    "shared": false
  },
  "plotOptions": {
    "series": {
      "stacking": null,
      "colorByPoint": true
    }
  },
  "legend": {
    "layout": "horizontal",
    "align": "center",
    "verticalAlign": "bottom",
    "borderWidth": 0
  },
  "series": [
    {
      "name": "color",
      "data": [
        [
          1567587130000,
          71,
          "green",
          null
        ],
        [
          1567587159000,
          71,
          "red",
          null
        ],
        [
          1567587166000,
          71,
          "yellow",
          null
        ],
        [
          1567587174000,
          71,
          "pink",
          null
        ]
      ],
     ...