Highcharts Demo

author(s): Torstein Hønsi

by isqua

HTML

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

<div id="container" style="height: 150px; width: 400px;"></div>

CSS

.highcharts-series-0 { transform: translate(7px,9px); }
.highcharts-series-2 { transform: translate(7px,10px); }

.highcharts-series-1 { transform: translate(11px,9px); }
.highcharts-series-3 { transform: translate(11px,10px); }

JavaScript

var data = {
  xAxis: { type: "datetime" },
	plotOptions: {
    column: {
	    pointWidth: 3,
      borderWidth: 0,
      grouping: false
    }
  },
  series: [
    {
      color: "#6db2eb",
      data: [
        [ 1, 0 ],
        [ 2, 2 ],
        [ 3, 4 ],
        [ 4, 6 ],
        [ 5, 8 ],
        [ 6, 0 ],
        [ 7, 10 ],
        [ 8, 12 ],
        [ 9, 10 ],
        [ 10, 8 ],
        [ 11, 6 ],
        [ 12, 6 ],
        [ 13, 6 ],
        [ 14, 6 ],
        [ 15, 6 ],
        [ 16, 6 ]
      ]
    },
    {
      color: "#3c63c2",
      data: [
        [ 1, 0 ],
        [ 2, 1 ],
        [ 3, 3 ],
        [ 4, 5 ],
        [ 5, 7 ],
        [ 6, 0 ],
        [ 7, 10 ],
        [ 8, 12 ],
        [ 9, 10 ],
        [ 10, 8 ],
        [ 11, 6 ],
        [ 12, 6 ],
        [ 13, 6 ],
        [ 14, 6 ],
        [ 15, 6 ],
        [ 16, 6 ]
      ]
    },
    {
      color: "#ff7b79",
      data: [
        [ 1, 0 ],
        [ 2, -2 ],
        [ 3, -4 ],
        [ 4, -6 ],
        [ 5, -8 ],
        [ 7, -10 ],
        [ 6, 0 ],
        [ 8, -12 ],
        [ 9, -10 ],
        [ 10, -8 ],
        [ 11, -6 ],
        [ 12, -3 ],
        [ 13, -3 ],
        [ 14, -5 ],
        [ 15, -7 ],
        [ 16, -1 ]
      ]
    },
    {
      color: "#ff2000",
      data: [
        [ 1, 0 ],
        [ 2, -1 ],
        [ 3, -3 ],
        [ 4, -5 ],
        [ 5, -7 ],
        [ 6, 0 ],
        [ 8, -12 ],
        [ 9, -10 ],
        [ 10, -8 ],
        [ 11, -6 ],
        [ 12, -3 ],
        [ 13, -3 ],
        [ 14, -5 ],
        [ 15, -7 ],
        [ 16, -1 ]
      ]
    }
  ]
};

var style = {
  	chart: {
    	"type": "column",
			"plotBorderWidth": 1,
			"plotBorderColor": "#e5e5e5",
      "title":{ "text":null }
    },
    credits: { enabled: false	},
	  exporting: { enabled: false },
    legend: { enabled: false },
    title: { text: null },
    navigator: { enabled: false },
  	xAxis: {
 	    labels: { enabled: false },
      max: 25,
      gridLineColor:...