JavaScript Chart

Set the toolTipFormatFunction property of the jqxChart. Author: http://jqwidgets.com

by jqwidgets

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/sampledata/nasdaq_vs_sp500.txt"></script>
<div id='jqxChart' style="width:530px; height:400px"></div>

JavaScript

var data = [{
      Person: "Planning",
      M1_From: 2,
      M1_To: 5,
      M2_From: 5,
      M2_To: 10
  }, {
      Person: "Dev 1",
      M1_From: 5,
      M1_To: 7,
      M2_From: 9,
      M2_To: 17
  }, {
      Person: "Dev 2",
      M1_From: 5,
      M1_To: 12,
      M2_From: 14,
      M2_To: 22
  }, {
      Person: "QA 1",
      M1_From: 7,
      M1_To: 14,
      M2_From: 14,
      M2_To: 25
  }];
  var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
      var dataItem = data[itemIndex];
      return '<DIV style="text-align:left"><b>Team: ' + categoryValue +
          '</b><br />Start day: ' + value.from +
          '<br />End day: ' + value.to;
  };
  // prepare jqxChart settings
  var settings = {
      title: "Monthly Project Schedule",
      description: "Website update plan",
      enableAnimations: true,
      showLegend: true,
      padding: {
          left: 5,
          top: 5,
          right: 10,
          bottom: 5
      },
      titlePadding: {
          left: 90,
          top: 0,
          right: 0,
          bottom: 10
      },
      source: data,
      categoryAxis: {
          text: 'Category Axis',
          dataField: 'Person',
          showTickMarks: true,
          tickMarksInterval: 1,
          tickMarksColor: '#888888',
          unitInterval: 1,
          showGridLines: true
      },
      colorScheme: 'scheme03',
      seriesGroups: [{
          orientation: 'horizontal',
          type: 'rangecolumn',
          columnsGapPercent: 100,
          toolTipFormatFunction: toolTipCustomFormatFn,
          valueAxis: {
              flip: true,
              unitInterval: 1,
              displayValueAxis: true,
              description: 'Day',
              axisSize: 'auto',
              tickMarksColor: '#888888',
              minValue: 1,
              maxValue: 30
          },
          series: [{
              dataFieldFrom: 'M1_From',
              dataFieldTo: 'M1_To',
     ...