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', xAxisID: 'x-axis-1', yAxisID: 'y-axis-1', 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, xAxisID: 'x-axis-1', yAxisID: 'y-axis-2', 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 = { responsive: true, hoverMode: 'nearest', intersect: true, title: { display: true, text: 'Omi-chart Scatter Chart - Multi Axis' }, scales: { xAxes: [{ position: 'bottom', gridLines: { zeroLineColor: 'rgba(0,0,0,1)' } }], yAxes: [{ type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance display: true, position: 'left', id: 'y-axis-1', }, { type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance display: true, position: 'right', reverse: true, id: 'y-axis-2', // grid line settings gridLines: { drawOnChartArea: false, // only want the grid lines for one axis to show up }, }], } } } render(props, data) { return (
) } }) render(
, 'body') function rd(){ return Math.random() * 200 - 100 }