Run
Auto Run
const color = Chart.helpers.color const chartColors = { red: 'rgb(255, 99, 132)', orange: 'rgb(255, 159, 64)', yellow: 'rgb(255, 205, 86)', green: 'rgb(75, 192, 192)', blue: 'rgb(54, 162, 235)', purple: 'rgb(153, 102, 255)', grey: 'rgb(201, 203, 207)' } define('my-app', class extends WeElement { install(){ this.chartData = { datasets: [{ label: 'My First dataset', borderColor: window.chartColors.red, backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(), data: [{ x: rd(), y: rd(), }, { x: rd(), y: rd(), }, { x: rd(), y: rd(), }, { x: rd(), y: rd(), }, { x: rd(), y: rd(), }, { x: rd(), y: rd(), }, { x: rd(), y: rd(), }] }, { label: 'My Second dataset', borderColor: window.chartColors.blue, backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(), data: [{ x: rd(), y: rd(), }, { x: rd(), y: rd(), }, { x: rd(), y: rd(), }, { x: rd(), y: rd(), }, { x: rd(), y: rd(), }, { x: rd(), y: rd(), }, { x: rd(), y: rd(), }] }] } this.chartOptions = { title: { display: true, text: 'Omi-chart Scatter Chart' }, } } render(props, data) { return (
) } }) render(
, 'body') function rd(){ return Math.random() * 200 - 100 }