JSFiddle - React, Tailwind, and code Playground

by Heena Mahour

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 268px; width: 428px"></div>

JavaScript

$(function () {
var data = [{"name":"P&L YTD Book","data":[[1422684000000,26300674.4],[1425103200000,132831954.61],[1427778000000,280563558.88],[1430370000000,377999751.82],[1433048400000,426597207.83],[1435640400000,410800948.07],[1438318800000,449011091.15],[1440997200000,453736223.27],[1443589200000,620075877.17],[1446267600000,663461524.34],[1448863200000,701482149.19],[1451541600000,765153249.89]],"yAxis":0},{"name":"Current Fair Value","data":[[1422684000000,4188060519.839997],[1425103200000,4148131106.0899987],[1427778000000,4244287153.6299973],[1430370000000,4294915072.1399975],[1433048400000,4268288340.719999],[1435640400000,4639826724.239998],[1438318800000,4627384836.069998],[1440997200000,4486656276.299998],[1443589200000,4712263204.149996],[1446267600000,4749857723.039997],[1448863200000,5188824079.389997],[1451541600000,5110521350.969997]],"yAxis":1}]
var chartParams ={"navigator":{"enabled":false},"legend":{"enabled":true},"scrollbar":{"enabled":false},"yAxis":[{"gridLineWidth":0,"title":{"enabled":true,"text":"CFV","align":"high","offset":0,"x":15,"y":20,"rotation":0},"labels":{"align":"left"},"lineWidth":0},{"gridLineWidth":0,"title":{"enabled":true,"text":"P&L Book","align":"high","offset":0,"x":-15,"y":15,"rotation":0},"labels":{"align":"right"},"lineWidth":0,"opposite":false}],"series":[{"name":"P&L Book","type":"spline"},{"name":"CFV","type":"spline","color":"#686870"}],"plotOptions":{"series":{"dataGrouping":{"enabled":false}}}};

if (chartParams.series) {
  for (var i = 0; i < data.length; i++) {
    if (chartParams.series[i]) {
      data[i] = $.extend(data[i], chartParams.series[i]);
    }
  }
}


        // Create the chart
        $('#container').highcharts('StockChart', {
      // Overriden properties
  title: {
    text: chartParams.title ? chartParams.title : ' '
  },

  yAxis: [{
    "gridLineWidth": 0,
    //offset: 50,
    tickPosition: 'outside',
    
    offset: -10,
    title: {
      enabled: true,
      text: 'CFV',
     ...