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: 400px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  theme: "light2",
  title: {
    text: "Efficiency Optimization by Branch"
  },
  axisY: {
    title: 'Employees'
  },
  axisY2: {
    title: 'Profit (millions)'
  },
  toolTip: {
  	shared: true,
    contentFormatter: function(e) {
    	var content = e.entries[0].dataPoint.label + "<br/>";
    	for(var i = 0; i < e.entries.length; i++) {
      	content += "<span style='color:" + e.entries[i].dataSeries.color + "'>" + e.entries[i].dataSeries.name + ":</span> " + (e.entries[i].dataPoint.y.length ? e.entries[i].dataPoint.y[1] : e.entries[i].dataPoint.y) + "<br/>";
      }
      return content;
    }
  },
  data: [
    {      
      showInLegend: true,
      name: 'Employees',
      color: 'rgba(165,170,217,1)',
      dataPoints: [      
        { label: "Seatle HQ", y: 150 },
        { label: "San Francisco", y: 73 },
        { label: "Tokyo", y: 20 }
      ]
    },
    {
      type: "error",
      showInLegend: true,
      name: 'Employees Optimized',
      color: 'rgba(126,86,134,.9)',
      whiskerThickness: 0,
      dataPoints: [
        { label: "Seatle HQ", y: [0, 140] },
        { label: "San Francisco", y: [0, 90] },
        { label: "Tokyo", y: [0, 40] }
      ]
    }, 
    {      
      showInLegend: true,
      name: 'Profit',
      color: 'rgba(248,161,63,1)',
      axisYType: "secondary",
      dataPoints: [
        { label: "Seatle HQ", y: 183.6 },
        { label: "San Francisco", y: 178.8 },
        { label: "Tokyo", y: 198.5 },
      ]
    },
    {
      type: "error",      
      showInLegend: true,
      name: 'Profit Optimized',
      color: 'rgba(186,60,61,.9)',
      whiskerThickness: 0,
      axisYType: "secondary",      
      dataPoints: [
        { label: "Seatle HQ", y: [0, 203.6] },
        { label: "San Francisco", y: [0, 198.8] },
        { label: "Tokyo", y: [0, 208.5] }
      ]
    }	
  ]
});

chart.render();
chart.data[1].set("stemThickness", chart.get("dataPointWidth") /...