JSFiddle - React, Tailwind, and code Playground

by Shestac92

HTML

<script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/regression/1.4.0/regression.min.js"></script>
<div id="container"></div>

CSS

html, body, #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

JavaScript

// create data
//for regression-js use two-dimensional arrays only
var data = [
    [0, 44.26],
    [5.60, 43.38],
    [10.70, 42.85],
    [17.60, 42.33],
    [20.10, 41.99],
    [25.40, 41.18],
    [30.70, 39.39],
    [32.70, 39.59],
    [37.80, 38.58],
    [47.10, 36.18],
    [50.10, 35.02],
    [56.70, 33.56],
    [62.70, 31.64]
];
/*  get object with regression
as parameters set order of polimon (2 or 3 for your actual data)
and precision at least 5 or higher   */
// for regression-js 2.0
// const result = regression.polynomial(data, { order: 2, precision: 7 });

// for regression-js 1.4
var result = regression('polynomial', data, 2);

anychart.onDocumentReady(function () {

    chart = anychart.line();

    // create a spline and set raw data
    var series0 = chart.spline(data);
    series0.name('Raw data spline');
    series0.stroke("#00f41d", 3, "5 8", "round");

    /*  create a spline and set calculated data by regression-js
    .points provides an array containing the predicted data
    in the domain of the input */
    var series1 = chart.spline(result.points);
    series1.name("Polinomial trendline");
    series1.stroke("#3ca1f4", 3);

    chart.legend(true);
    chart.xScale(anychart.scales.linear());

    // initiate rendering chart
    chart.container("container");
    chart.draw();
});