Explore the API
- Change X position
- Change Y position
- Change width
- Change height
- Change margins
description
The Widget component is the basis of all widgets (charts, etc). This example shows the available methods for this base component.
code
generate data
function getData () {
return [{
name: 'trend',
values: Array.from({ length: 1000 }, (d, i) => ({
x: i / 10,
y: Math.sin(i / 100)
}))
}]
}
create chart
const chart = dalian.LineChart('myChart', '#widget')
.data(getData())
.width(0.8 * WIDTH)
.height(0.7 * HEIGHT)
.margins(40)
.font.size(14)
.bottomAxis.label('Elapsed time [h]')
.leftAxis.label('Temperature [C]')
.render(1000)
api methods
let changeX = () => {
this.x = !(this.x || 0)
chart.x(this.x ? 20 : undefined).render(1000)
}
let changeY = () => {
this.y = !(this.y || 0)
chart.y(this.y ? 20 : undefined).render(1000)
}
let changeWidth = () => {
this.w = !(this.w || 0)
chart.width(this.w ? 0.9 * WIDTH : 0.8 * WIDTH).render(1000)
}
let changeHeight = () => {
this.h = !(this.h || 0)
chart.height(this.h ? 0.8 * HEIGHT : 0.7 * HEIGHT).render(1000)
}
let changeMargins = () => {
this.m = !(this.m || 0)
chart.margins(this.m ? 50 : 40).render(1000)
}