JSFiddle - React, Tailwind, and code Playground

by navinleon

JavaScript

renderUsage(sessionData) {
    // Create chart instance
    am4core.options.commercialLicense = true;
    var chart = am4core.create('chartdiv', am4charts.XYChart);
    chart.maskBullets = false;
    chart.paddingRight = 20;

    // Add data
    chart.data = sessionData;

    chart.legend = new am4charts.Legend();

    // Create axes
    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = 'day';
    categoryAxis.renderer.minGridDistance = 50;
    categoryAxis.renderer.grid.template.location = 0.5;
    categoryAxis.startLocation = 0.2;
    categoryAxis.endLocation = 0.8;
    categoryAxis.renderer.minGridDistance = 20;
    categoryAxis.stroke = '#c1c7cb';
    categoryAxis.fontSize = 12;
    categoryAxis.fontFamily = `"Montserrat", "Helvetica Neue", Arial, sans-serif`;
    categoryAxis.fontWeight = 300;

    categoryAxis.renderer.grid.template.disabled = true;

    // Create value axis
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.baseValue = 0;
    valueAxis.stroke = '#c1c7cb';
    valueAxis.fontSize = 12;
    valueAxis.fontFamily = `"Montserrat", "Helvetica Neue", Arial, sans-serif`;
    valueAxis.fontWeight = 300;
    valueAxis.renderer.grid.template.stroke = '#c1c7cb';
    valueAxis.title.text = 'Sessions';

    //valueAxis.renderer.grid.template.disabled = true;

    // Create series
    var lmseries = chart.series.push(new am4charts.LineSeries());
    lmseries.dataFields.valueY = 'LM_session';
    lmseries.dataFields.categoryX = 'day';
    lmseries.strokeWidth = 2;
    lmseries.tensionX = 0.77;
    lmseries.fillOpacity = 0;
    //lmseries.stacked = true;
    lmseries.stroke = '#673ab7';

    lmseries.tooltipHTML = `<div><span style='font-size:14px; color:#000;font-weight:300;'><b>Total sessions: {valueY.value}</b></span></div>
    <div style="color:#9A9A9A;">Date: {lastmonth}-{day}-{year}</div>`;

    lmseries.tooltip.getFillFromObject = false;
   ...