HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Picasso JS Chart</title>
<script src="https://unpkg.com/picasso.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
height: 80%;
width: 80%;
position: relative;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
picasso.chart({
element: document.querySelector('#container'),
data: [
{
type: 'matrix',
data: [
["Year", "Region", "Sales", "Margin"],
["2010", "New York", 1106, 7],
["2010", "Chicago", 644, 53],
["2010", "California", 147, 64],
["2010", "Denver", 1299, 47],
["2010", "Dallas", 430, 32],
["2010", "Los Angeles", 235, 13],
["2011", "New York", 800, 20],
["2011", "Chicago", 340, 12],
["2011", "California", 249, 69],
["2011", "Denver", 999, 17],
["2011", "Dallas", 630, 42],
["2011", "Los Angeles", 535, 35]
]
}
],
settings: {
scales: {
y: {
data: {
field: 'Sales'
},
invert: true,
...