JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.anychart.com/releases/8.0.1/css/anychart-ui.min.css">
<link rel="stylesheet" href="https://cdn.anychart.com/releases/8.0.1/fonts/css/anychart-font.min.css">
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-ui.min.js"></script>
<div id="container"></div>

CSS

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

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

anychart.onDocumentReady(function () {
    // create data set on our data
    var dataSet = anychart.data.set([
        ['P1', 174, 5854, 3242],
        ['P2', 197, 4171, 3171],
        ['P3', 155, 1375, 700],
        ['P4', 15, 1875, 1287],
        ['P5', 66, 2246, 1856],
        ['P6', 85, 2696, 1126],
        ['P7', 37, 1287, 987],
        ['P8', 10, 2140, 1610],
        ['P9', 44, 1603, 903],
        ['P10', 322, 1628, 928]
    ]);

    // map data for the first series, take x from the zero column and value from the first column of data set
    var seriesData_1 = dataSet.mapAs({'x': 0, 'value': 1});

    // map data for the second series, take x from the zero column and value from the second column of data set
    var seriesData_2 = dataSet.mapAs({'x': 0, 'value': 2});

    // map data for the third series, take x from the zero column and value from the third column of data set
    var seriesData_3 = dataSet.mapAs({'x': 0, 'value': 3});

    // create column chart
    var chart = anychart.column();

    // turn on chart animation
    chart.animation(true);

    // set chart title text settings
    chart.title('Combination of Column, Spline-Area and Spline Chart');

    // create scale for line series and extraYAxis
    // it force line series to not stuck values with over series
    var scale = anychart.scales.linear();

    // create extra axis on the right side of chart
    chart.yAxis(1)
            .title('Secondary Y-Axis')
            .orientation('right')
            .scale(scale);

    // create second series with mapped data
    var columnSeries = chart.column(seriesData_2);
    columnSeries.name('Column');

    // create third series with mapped data
    var splineSeries = chart.splineArea(seriesData_3);
    splineSeries.name('Spline');

    // create line series and set scale for it
    var lineSeries = chart.spline(seriesData_1);
    lineSeries.name('Line')
            .yScale(scale)
            .stroke('2.5 #ef6c00');

   ...