#container
View Compiled
@import "compass/css3";

View Compiled
$ ->
  $("#container").highcharts(
    chart:
      type: "column"
  
    title:
      text: "Stacked column chart"
  
    xAxis:
      categories: ["Apples", "Oranges", "Pears", "Grapes", "Bananas"]
  
    yAxis:
      min: 0
      title:
        text: "Total fruit consumption"
  
    legend:
      align: "right"
      x: -100
      verticalAlign: "top"
      y: 20
      floating: true
      backgroundColor: (Highcharts.theme and Highcharts.theme.legendBackgroundColorSolid) or "white"
      borderColor: "#CCC"
      borderWidth: 1
      shadow: false
  
    tooltip:
      formatter: ->
        "<b>" + @x + "</b><br/>" + @series.name + ": " + @y + "<br/>" + "Total: " + @point.stackTotal
  
    plotOptions:
      column:
        pointPadding: -0.7
  
    series: [
      name: "John"
      data: [5, 3, 4, 7, 2]
      color: "rgba(69, 114, 167, 0.5)"
    ,
      name: "Jane"
      data: [2, 2, 3, 2, 1]
      color: "rgba(114, 69, 167, 0.5)"
    ,
      name: "Joe"
      data: [3, 4, 4, 2, 5]
      color: "rgba(169, 114, 67, 0.5)"
    ]
  )
  
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://code.highcharts.com/highcharts.js