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",{
  axisY: {
    //includeZero: false
  },
  axisX: {
  	valueFormatString: "####"
  },
  data: [{
    type: "area",  
    indexLabelFormatter: function ( e ) {
      if(e.dataPoint.value > 0){
        return e.dataPoint.y + " "+ e.dataPoint.value + "\u2191";
      }  else {
        return e.dataPoint.y + " "+ e.dataPoint.value + "\u2193";
      }         
    },
    dataPoints: [
      { x: 2011, y: 310, value: 0.05 },
      { x: 2012, y: 320, value: 0.03 },
      { x: 2013, y: 310, value: 0.03 },
      { x: 2014, y: 310, value: 0.07 },
      { x: 2015, y: 320, value: 0.05 },
      { x: 2016, y: 320, value: 0.03 },
      { x: 2017, y: 310, value: -0.01 },
      { x: 2018, y: 310, value: -0.02 }
    ]
  }]
});

chart.render();