JSFiddle - React, Tailwind, and code Playground

by canvasjs

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", {
  exportEnabled: true,
  axisX: {
    labelFontColor: '#2F4D7C',
    titleFontColor: '#2F4D7C',
    title: 'Age',
    includeZero: false,
    interval: 2,
    tickLength: 4,
    tickColor: 'white',
    lineColor: '#e5e5e5',
    lineThickness: 2,
  },
  axisY: {
    labelFontColor: '#2F4D7C',
    titleFontColor: '#2F4D7C',
    title: 'Revenue',
    prefix: "$",
    suffix: 'M',
    tickLength: 2,
    tickColor: 'white',
    lineColor: '#e5e5e5',
    lineThickness: 2,
    gridColor: 'white',
    stripLines: [{
      startValue: 2,
      endValue: 2.02,
      color: "#57bc71",
      lineDashType: "dot",
      showOnTop: true
    }]
  },
  legend: {
    fontSize: 12,
  },
  data: [{
      type: "splineArea",
      showInLegend: true,
      name: "6% Return",
      markerSize: 5,
      color: '#D9EEFF',
      lineColor: '#2B6394',
      legendMarkerType: "square",
      legendMarkerColor: '#2B6394',
      fillOpacity: 1,
      dataPoints: [{
          x: 48,
          y: 0,
          markerType: 'none'
        },
        {
          x: 50,
          y: 0.2,
          markerType: 'none'
        },
        {
          x: 52,
          y: 0.3,
          markerType: 'none'
        },
        {
          x: 54,
          y: 0.6,
          markerType: 'none'
        },
        {
          x: 56,
          y: 1,
          markerType: 'none'
        },
        {
          x: 58,
          y: 1.1,
          markerType: 'none'
        },
        {
          x: 60,
          y: 1.3,
          markerType: 'none'
        },
        {
          x: 62,
          y: 1.6,
          markerType: 'none'
        },
        {
          x: 64,
          y: 1.8,
          markerType: 'none'
        },
        {
          x: 66,
          y: 1.8,
          markerType: 'none'
        },
        {
          x: 68,
          y: 2,
          markerType: 'none'
        },
        {
          x: 70,
          y: 2.2,
          markerType: 'none'
  ...