Run
Auto Run
define('my-app', class extends WeElement { install(){ this.smooth = false this.configs = []; [false, 'origin', 'start', 'end'].forEach((boundary, index) => { this.configs.push({ data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'], datasets: [{ backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgb(255, 99, 132)', data: [ rd(), rd() ,rd(), rd(), rd(), rd(), rd(), rd() ], label: 'Dataset', fill: boundary }] }, options: { title: { text: 'fill: ' + boundary, display: true }, maintainAspectRatio: false, //set width and height to canvas spanGaps: false, elements: { line: { tension: 0.000001 } }, plugins: { filler: { propagate: false } }, scales: { xAxes: [{ ticks: { autoSkip: false, maxRotation: 0 } }] } } }) }) } onClick = ()=> { this.smooth = !this.smooth this.configs.forEach((config,index) => { config.options.elements.line.tension = this.smooth ? 0.4 : 0.000001 }) this.update() } render(props, data) { return (
toggle smooth
{this.configs.map((config, index) => (
))}
) } }) render(
, 'body') function createConfig(details, data) { return { data: { labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'], datasets: [{ label: 'steppedLine: ' + details.steppedLine, steppedLine: details.steppedLine, data: data, borderColor: details.color, fill: false, }] }, options: { responsive: true, title: { display: true, text: details.label, } } }; } function rd(){ return Math.random() * 100 - 50 }