JSFiddle - React, Tailwind, and code Playground

JavaScript

/*

Non functional fiddle just showing configuration options for each chart and the domStats helper I whipped up for timing, and to count child nodes and listeners.

data and stats libraries are custom. stats code is shown below. data just loads a json file

*/


// rickshaw

data.getManagerReturns(function (data) {
    console.log('returns: ' + data.length);

    var rickshaw_fmt_data = data.map(function (obj) {
        return {
            name: obj.name,
            data: obj.returns.map(function (y, i) {
                return {
                    x: i,
                    y: y
                };
            }),
            color: 'steelblue'
        }
    });

    stats.start('Random Chart', document.getElementById('randomChart'));

    var graph = new Rickshaw.Graph({
        element: document.getElementById("randomChart"),
        renderer: 'line',
        height: 300,
        width: 800,
        series: rickshaw_fmt_data

    });

    var y_ticks = new Rickshaw.Graph.Axis.Y({
        graph: graph,
        orientation: 'left',
        element: document.getElementById('randomChart_y_axis')
    });

    var x_ticks = new Rickshaw.Graph.Axis.X({
        graph: graph,
        orientation: 'bottom',
        element: document.getElementById('randomChart_x_axis')
    });

    graph.render();

    stats.stop('Random Chart');
    stats.report();

});



// vega


data.getManagerReturns(function (data) {
    console.log('returns: ' + data.length);

    var trans = data.reduce(function (a, datum) {
        return a.concat(
        datum.returns.map(function (obj, i) {
            return {
                name: datum.name,
                x: i,
                y: obj
            };
        }));

    }, []);

    var randomChartDef = {
        "width": 800,
            "height": 400,
            "padding": {
            "top": 10,
            "left": 50,
            "bottom": 80,
            "right": 10
        },
            "data": [{
            name: "table",
    ...