JSFiddle - React, Tailwind, and code Playground

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: "Showing Extra Information in Tooltip"
  },
	axisY: {
  	includeZero: false
  },
  data: [
    {
      type: "candlestick",
      toolTipContent: "{x}<br/> Open: {y[0]} <br/> High: {y[1]} <br/> Low: {y[2]} <br/> Close: {y[3]} <br/> {info}",
      dataPoints: [
        { x: new Date(2016, 0), y: [101, 112, 89, 112], info: "Extra Information of Datapoint 1" },
        { x: new Date(2016, 1), y: [112, 117, 96, 106] },
        { x: new Date(2016, 2), y: [107, 116, 104, 114], info: "Extra Information of Datapoint 3" },
        { x: new Date(2016, 3), y: [113, 120, 106, 117] },
        { x: new Date(2016, 4), y: [117, 121, 115, 118] },
        { x: new Date(2016, 5), y: [118, 119, 108, 114] },
        { x: new Date(2016, 6), y: [114, 128, 112, 123], info: "Extra Information of Datapoint 7" },
        { x: new Date(2016, 7), y: [123, 126, 122, 126] },
        { x: new Date(2016, 8), y: [126, 131, 125, 128] },
        { x: new Date(2016, 9), y: [128, 133, 126, 130] },
        { x: new Date(2016, 10), y: [131, 131, 113, 118] },
        { x: new Date(2016, 11), y: [118, 122, 114, 115] }
      ]
    }
  ]
});

chart.render();