JSFiddle - React, Tailwind, and code Playground

by Melony Barrett

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 500px">

JavaScript

var myLineThickness = 0.1;
var myFillOpacity = 0.9;
 
  var chart = new CanvasJS.Chart("chartContainer",
  {
          zoomEnabled: true,
          width: 500,
          height: 400,
          toolTip: {
            shared: true,
            borderColor: "gray",
            contentFormatter: function (e) {
              var content = null;
              for (var i = 0; i < e.entries.length; i++) {
                //get color and name of dataseries   
                dsx = e.entries[i].dataPoint.x;                    
                dscolor = e.entries[i].dataSeries.color;
                dsname = e.entries[i].dataSeries.name;  
                dstop = e.entries[i].dataPoint.y[1];    
                if (e.entries[i].dataPoint.y[0] === null){
                  e.entries[i].dataPoint.toolTipContent = null;
                }
                else{                  
                  content = (content || "") + "<span style='color:" + dscolor + "'>" + dsx + " " + dsname + " " +  dstop.toFixed(2) +"</span>";
                  content = (content || "") + "<br/>";
                };          
              }
              return content;
            }            
          },
          axisX: {            
            valueFormatString: " ",
            tickLength: 0
          },
          axisY:{
            title: "Elevation (meters)",
            titleFontSize: 20,
            labelFontSize: 14,
            suffix: " m",
            minimum: 150,
            maximum: 370,
            interval: 50,
            includeZero: false
          },    
          data: [               //array of dataSeries
          
          {
            type: "rangeArea",
            showInLegend: false,
            lineThickness: myLineThickness,
            fillOpacity: myFillOpacity,
            color: "rgba(191,239,255,1)",
            name: "Water",
            dataPoints: [
        {x:  45, y: [null, null] },
        {x:  46, y: [null, null] },
        {x:  47, y: [null, null] },
  ...