-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathchart-change-size-label-rotate.ts
44 lines (35 loc) · 1.06 KB
/
chart-change-size-label-rotate.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import { Chart } from '../../../src';
export function chartChangeSizeLabelRotate(context) {
const { container, canvas } = context;
const button = document.createElement('button');
button.innerText = 'Update Size';
button.style.display = 'block';
container.appendChild(button);
const div = document.createElement('div');
container.appendChild(div);
const chart = new Chart({
container: div,
canvas,
});
chart.data([
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Infantry', sold: 220 },
{ genre: 'Logistics', sold: 330 },
{ genre: 'OtherOtherOther', sold: 150 },
]);
chart
.interval()
.encode('x', 'genre')
.encode('y', 'sold')
.encode('color', 'genre')
.axis({ x: { animate: false }, y: { animate: false } })
.legend('color', [{}, { position: 'right' }]);
const finished = chart.render();
button.onclick = () => {
chart.changeSize(900, 300);
};
return { chart, button, finished };
}