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: 'dataset - big points', data: [ rd(), rd(), rd(), rd(), rd(), rd(), rd() ], backgroundColor: chartColors.red, borderColor: chartColors.red, fill: false, borderDash: [5, 5], pointRadius: 15, pointHoverRadius: 10, }, { label: 'dataset - individual point sizes', data: [ rd(), rd(), rd(), rd(), rd(), rd(), rd() ], backgroundColor: chartColors.blue, borderColor: chartColors.blue, fill: false, borderDash: [5, 5], pointRadius: [2, 4, 6, 18, 0, 12, 20], }, { label: 'dataset - large pointHoverRadius', data: [ rd(), rd(), rd(), rd(), rd(), rd(), rd() ], backgroundColor: chartColors.green, borderColor: chartColors.green, fill: false, pointHoverRadius: 30, }, { label: 'dataset - large pointHitRadius', data: [ rd(), rd(), rd(), rd(), rd(), rd(), rd() ], backgroundColor: chartColors.yellow, borderColor: chartColors.yellow, fill: false, pointHitRadius: 20, }] } this.chartOptions = { responsive: true, legend: { position: 'bottom', }, hover: { mode: 'index' }, scales: { xAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Month' } }], yAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Value' } }] }, title: { display: true, text: 'Omi-chart Line Chart - Different point sizes' } } } render(props, data) { return (
) } }) render(
, 'body') function rd(){ return Math.random() * 100 }