Run
Auto Run
define('my-app', class extends WeElement { install(){ const datapoints = [0, 20, 20, 60, 60, 120, NaN, 180, 120, 125, 105, 110, 170]; this.chartData = { labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], datasets: [{ label: 'Cubic interpolation (monotone)', data: datapoints, borderColor: 'rgb(255, 99, 132)', backgroundColor: 'rgba(0, 0, 0, 0)', fill: false, cubicInterpolationMode: 'monotone' }, { label: 'Cubic interpolation (default)', data: datapoints, borderColor: 'rgb(75, 192, 192)', backgroundColor: 'rgba(0, 0, 0, 0)', fill: false, }, { label: 'Linear interpolation', data: datapoints, borderColor: 'rgb(201, 203, 207)', backgroundColor: 'rgba(0, 0, 0, 0)', fill: false, lineTension: 0 }] } this.chartOptions = { maintainAspectRatio: false, title: { display: true, text: 'Omi-chart Line Chart - Cubic interpolation mode' }, tooltips: { mode: 'index' }, scales: { xAxes: [{ display: true, scaleLabel: { display: true } }], yAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Value' }, ticks: { suggestedMin: -10, suggestedMax: 200, } }] } } } onClick = ()=>{ this.chartData.datasets.forEach(dataset => { dataset.data.forEach((item, index) => { dataset.data[index] = Math.random() * 100 }) }) this.update() } render(props, data) { return (
Change data
) } }) render(
, 'body')