Highcharts Demo

author(s): Torstein Hønsi

by Rajesh Danabal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/item-series.js"></script>

<div id="container"></div>

CSS

#container {
    max-width: 420px;
    min-width: 360px;
    margin: 1em auto;
}

JavaScript

var symbol = {
  star: "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KPHBhdGggZD0iTTUwLDNsMTIsMzZoMzhsLTMwLDIybDExLDM2bC0zMS0yMWwtMzEsMjFsMTEtMzZsLTMwLTIyaDM4eiIKZmlsbD0iI0ZGMCIgc3Ryb2tlPSIjRkMwIiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+Cg==)",
  circle: "url(data:image/svg+xml;base64,PHN2ZyBpZD0iZmVtYWxlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgNTEyIj48cGF0aCBkPSJNMTI4IDBjMzUuMzQ2IDAgNjQgMjguNjU0IDY0IDY0cy0yOC42NTQgNjQtNjQgNjRjLTM1LjM0NiAwLTY0LTI4LjY1NC02NC02NFM5Mi42NTQgMCAxMjggMG0xMTkuMjgzIDM1NC4xNzlsLTQ4LTE5MkEyNCAyNCAwIDAgMCAxNzYgMTQ0aC0xMS4zNmMtMjIuNzExIDEwLjQ0My00OS41OSAxMC44OTQtNzMuMjggMEg4MGEyNCAyNCAwIDAgMC0yMy4yODMgMTguMTc5bC00OCAxOTJDNC45MzUgMzY5LjMwNSAxNi4zODMgMzg0IDMyIDM4NGg1NnYxMDRjMCAxMy4yNTUgMTAuNzQ1IDI0IDI0IDI0aDMyYzEzLjI1NSAwIDI0LTEwLjc0NSAyNC0yNFYzODRoNTZjMTUuNTkxIDAgMjcuMDcxLTE0LjY3MSAyMy4yODMtMjkuODIxeiIgZmlsbD0iI0YyM0EyRiIvPjwvc3ZnPg==)",
  hexagon: ""
};
Highcharts.chart('container', {

  chart: {
    type: 'item'
  },
  xAxis: {
    categories: ['Stars', 'Circle', 'Triangle', 'Apr', 'May', 'Jun', 'July']
  },
  legend: {
    enabled: false
  },
  title: {
    text: 'Highcharts item chart'
  },

  subtitle: {
    text: 'Rectangular view with specific row count'
  },

  series: [{
    name: 'Representatives',
    layout: "horizontal",
    data: [{
        name: 'Stars',
        y: 8,
        marker: {
          symbol: 'cross'
        }
      },
      {
        y: (17 - 8),
        name: "Empty",
        color: "#FFF"
      },
      ['Circle', 17],
      ['Hexagon', 5],
      {
        y: (17 - 5),
        name: "Empty",
        color: "#FFF"
      },
      ['Triangle', 12],
      {
        y: (17 - 12),
        name: "Empty",
        color: "#FFF"
      },
      ['Square', 10],
      {
        y: (17 - 10),
        name: "Empty",
        color: "#FFF"
      },
      ['Star 2', 8],
      {
        y: (17 - 8),
        name: "Empty",
        color:...