JSFiddle - React, Tailwind, and code Playground

by efkan

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<body>
  <div id="chartContainer" style="height: 550px; width: 1000px;">
  </div>
</body>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{
		title: {
			text: "zooming doesn't work"
		},
    toolTip: {
      enabled: true
    },
    zoomEnabled: true,
    zoomType: "y",
		axisY: {
      labelFontSize: 12,
      gridThickness: 1,
      lineThickness: 1,
      tickLength: 8,
      margin: 22,
		},
    axisX: {
      valueFormatString: ' ',
      labelFormatter: e => "",
      tickLength: 0,
      lineThickness: 0,
    },
		data: [
		{
			type: "stackedBar",
			dataPoints: [
				{y: 17}, 
			]
		},
		{
			type: "stackedBar",
			dataPoints: [ 
				{y: 35},
			]
		},
		{
			type: "stackedBar",
      toolTipContent: "zoom needed - y: {y}",
			dataPoints: [
				{ y: 1},
			]
		},
		{
			type: "stackedBar",
      toolTipContent: "zoom needed - y: {y}",
			dataPoints: [
				{ y: 1},
			]
		},
		{
			type: "stackedBar",
      toolTipContent: "zoom needed - y: {y}",
			dataPoints: [
				{ y: 0.25},
			]
		},
		{
			type: "stackedBar",
      toolTipContent: "zoom needed - y: {y}",
			dataPoints: [
				{ y: 0.5},
			]
		},
		{
			type: "stackedBar",
      toolTipContent: "zoom needed - y: {y}",
			dataPoints: [
				{ y: 0.03},
			]
		},
		{
			type: "stackedBar",
      toolTipContent: "zoom needed - y: {y}",
			dataPoints: [
				{ y: 0.1},
			]
		},
		{
			type: "stackedBar",
      toolTipContent: "zoom needed - y: {y}",
			dataPoints: [
				{ y: 0.1 },
			]
		},
		{
			type: "stackedBar",
      toolTipContent: "zoom needed - y: {y}",
			dataPoints: [
				{ y: 0.01 },
			]
		},
		{
			type: "stackedBar",
      toolTipContent: "zoom needed - y: {y}",
			dataPoints: [
				{ y: 0.1},
			]
		},
		{
			type: "stackedBar",
      toolTipContent: "zoom needed - y: {y}",
			dataPoints: [
				{ y: 0.15},
			]
		},
		{
			type: "stackedBar",
      toolTipContent: "zoom needed - y: {y}",
			dataPoints: [
				{ y: 0.12},
			]
		},
		{
			type: "stackedBar",
      toolTipContent: "zoom needed - y: {y}",
			dataPoints: [
				{ y: 0.15},
			]
		},
		{
			type: "stackedBar",
  ...