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(); } } } ] } });
html, body { margin: 0; padding: 0; height: 100%; } #container { height: 100%; position: relative; }
<div id="container"> </div>