JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    google.charts.load('current', {
        'packages': ['sankey'],
        language: 'es'
    });

</script>
<div id="flujos1" style="width: 100%; height: 270px; margin-bottom: 1em;"></div>

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'De');
            data.addColumn('string', 'Para');
            data.addColumn('number', 'Cantidad');
            data.addRows([
                ['John', "Moe's Tavern", 5],
                ['Mary', "Moe's Tavern", 7],
                ['Rocket', "Moe's Tavern", 6],
                ['John', "Rick's Café", 2],
                ['Mary', "Rick's Café", 9],
                ['Rocket', "Rick's Café", 4],
                ['Rocket', 'Café René', 4],
                ['John', 'The Bronze', 4],
            ]);

            // Sets chart options.
            var options = {
                sankey: {
                    node: {
                        label: {
                            fontName: '"Work Sans",sans-serif',
                            fontSize: 13,
                            color: '#212529'
                        }
                    }
                }
            };

            // Instantiates and draws our chart, passing in some options.
            var chart = new google.visualization.Sankey(document.getElementById('flujos1'));
            chart.draw(data, options);
        }
    });

</script>