JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<div id="chart"></div>

JavaScript

var datajson = []
for (var i = 0; i < 50; i++)
datajson.push({
    total: Math.random() * 10
});
var k = 0


var chart = c3.generate({
    point: {
        r: function (d) {
            if (d.value != null) {
                var size = datajson[k++]["total"];
                d.size = size;
                return size;
            }
        }
    },
    tooltip: {
        contents: function (d) {
            if (d[0].value != null) {
                return d[0].size;
            }
        }
    },
    data: {
        xs: {
            'Dataset 1': 'ds1_x'
        },
        columns: [
            ["ds1_x", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            ["Dataset 1", 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 2, 3, 4]
        ],
        type: 'scatter'
    },
    axis: {
        x: {
            max: 11
        }
    }
});