JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/picasso.js"></script>
<div id="container">
    </div>

CSS

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

JavaScript

picasso.chart({
  element: document.querySelector('#container'), // This is the element to render the chart in
  data: [{
    type: 'matrix',
    data: [
      ['Month', 'Sales', 'Margin'],
      ['Jan', 1106, 7],
      ['Feb', 5444, 53],
      ['Mar', 147, 64],
      ['Apr', 7499, 47],
      ['May', 430, 62],
      ['June', 9735, 13],
      ['July', 5832, 13],
      ['Aug', 7435, 15],
      ['Sep', 3467, 35],
      ['Oct', 3554, 78],
      ['Nov', 5633, 23],
      ['Dec', 6354, 63],
    ]
  }],
  settings: { 
    scales: {
      x: { data: { field: 'Margin' } },
      y: { data: { field: 'Sales' } }
    },
    components: [ // specify how to render the chart
      {
        type: 'axis',
        scale: 'y',
        dock: 'left'
      }, {
        type: 'axis',
        scale: 'x',
        dock: 'bottom'
      },
      {
        type: 'point',
        data: {
          extract: {
            field: 'Month',
            props: {
              x: { field: 'Margin' },
              y: { field: 'Sales' }
            }
          }
        },
        settings: {
          x: { scale: 'x' },
          y: { scale: 'y' },
          size: function () { return Math.random(); }
        }
      }
    ]
  }
});