Stacked Bar Chart with Index Labels placed inside - CanvasJS

HTML5 Stacked Bar Chart with Index Labels placed inside

by Hanoj

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<p class="description">Built using <a href="http://canvasjs.com" title="CanvasJS HTML5 Charts" target="_blank">CanvasJS HTML5 Charts</a>
</p>

CSS

.description{
    margin-top: 50px;
    text-align:left;
    font-family: calibri;
    font-size: 16px;
    color: gray;
}
a:link, a:visited, a:active{color: #4F81BC;}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {

  data: [{
      type: "stackedBar100",
      toolTipContent: "{label}<br><b>{name}:</b> {y} (#percent%)",
      name: "The Guardian",
      dataPoints: [{
          y: 103,
          label: "27 Jun",
          indexLabel: "The Guardian",
        },
        {
          y: 34,
          label: "28 Jun",
          indexLabel: "The Guardian",
        },
        {
          y: 57,
          label: "29 Jun",
          indexLabel: "The Guardian",
        },
        {
          y: 23,
          label: "30 Jun",
          indexLabel: "The Guardian",
        },
        {
          y: 73,
          label: "01 Jul",
          indexLabel: "The Guardian",
        },
      ]
    },
    {
      type: "stackedBar100",
      toolTipContent: "{label}<br><b>{name}:</b> {y} (#percent%)",
      name: "Daily Mail",
      dataPoints: [{
          y: 64,
          label: "27 Jun",
          indexLabel: "Daily Mail",
        },
        {
          y: 57,
          label: "28 Jun",
          indexLabel: "Daily Mail",
        },
        {
          y: 48,
          label: "29 Jun",
          indexLabel: "Daily Mail",
        },
        {
          y: 82,
          label: "30 Jun",
          indexLabel: "Daily Mail",
        },
        {
          y: 24,
          label: "01 Jul",
          indexLabel: "Daily Mail",
        },
      ]
    },
    {
      type: "stackedBar100",
      toolTipContent: "{label}<br><b>{name}:</b> {y} (#percent%)",
      name: "CNBC",
      dataPoints: [{
          y: 81,
          label: "27 Jun",
          indexLabel: "CNBC",
        },
        {
          y: 27,
          label: "28 Jun",
          indexLabel: "CNBC",
        },
        {
          y: 52,
          label: "29 Jun",
          indexLabel: "CNBC",
        },
        {
          y: 62,
          label: "30 Jun",
          indexLabel: "CNBC",
        },
        {
          y: 73,
          label: "01 Jul",
          indexLabel: "CNBC",
        },
 ...