Run
Auto Run
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 = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'Unfilled', fill: false, backgroundColor: chartColors.blue, borderColor: chartColors.blue, data: [rd(), rd(),rd(),rd(),rd(),rd(),rd()], }, { label: 'Dashed', fill: false, backgroundColor: chartColors.green, borderColor: chartColors.green, borderDash: [5, 5], data: [rd(), rd(),rd(),rd(),rd(),rd(),rd()], }, { label: 'Filled', backgroundColor: chartColors.red, borderColor: chartColors.red, data: [rd(), rd(),rd(),rd(),rd(),rd(),rd()], fill: true, }] } this.chartOptions = { responsive: true, title: { display: true, text: 'Omi-chart Line Chart' }, tooltips: { mode: 'index', intersect: false, }, hover: { mode: 'nearest', intersect: true }, scales: { xAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Month' } }], yAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Value' } }] } } } render(props, data) { return (
) } }) render(
, 'body') function rd(){ return Math.random() * 100 }