Bar Chart with Custom Tooltip content - CanvasJS JavaScript Charts

Bar Chart with Custom Tooltip content - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
  {
  title:{
  	text: "Division of products Sold in Quarter."
  },
  axisY:{
  	title: "percent"
  },
  animationEnabled: true,
  toolTip:{
  	shared: true,
  	content: "{name}: {y} – #percent% ",
  },
  data:[
    {
    type: "stackedBar100",
    showInLegend: true,
    name: "April",
    dataPoints: [
      {y: 600, label: "Water Filter" },
      {y: 400, label: "Modern Chair" },
      {y: 120, label: "VOIP Phone" },
      {y: 250, label: "Microwave" },
      {y: 120, label: "Water Filter" },
      {y: 374, label: "Expresso Machine" },
      {y: 350, label: "Lobby Chair" }
    ]
    },
    {
    type: "stackedBar100",
    showInLegend: true,
    name: "May",
    dataPoints: [
      {y: 400, label: "Water Filter" },
      {y: 500, label: "Modern Chair" },
      {y: 220, label: "VOIP Phone" },
      {y: 350, label: "Microwave" },
      {y: 220, label: "Water Filter" },
      {y: 474, label: "Expresso Machine" },
      {y: 450, label: "Lobby Chair" }
    ]
    },
    {
    type: "stackedBar100",
    showInLegend: true,
    name: "June",
    dataPoints: [
      {y: 300, label: "Water Filter" },
      {y: 610, label: "Modern Chair" },
      {y: 215, label: "VOIP Phone" },
      {y: 221, label: "Microwave" },
      {y: 75, label: "Water Filter" },
      {y: 310, label: "Expresso Machine" },
      {y: 340, label: "Lobby Chair" }
    ]
    }
  ]
  });
  chart.render();