diff --git a/examples/area.html b/examples/area.html
index 67082dd..290b64a 100644
--- a/examples/area.html
+++ b/examples/area.html
@@ -13,8 +13,9 @@
let options = {
renderLegend: false, usePanning: false,
axis: {
- y: { invert: false, range: [0, 100] },
x: { format: 'numeric', range: [0, 100] },
+ y: { invert: true, range: [0, 100] },
+ y1: { isActive: true, format: 'numeric', range: [0, 1000] },
},
zoomEvents: {
mouse: { zoom: { isActive: false, orientation: 'horizontal' } },
@@ -24,16 +25,18 @@
const data1 = [[0,0], [35, 40], [65, 60], [100, 100]];
const data2 = [[0,0], [35, 50], [65, 65], [80, 100]];
const data3 = [[0,0], [35, 20], [65, 50], [100, 80]];
+ const data4 = [[0,900], [35, 800], [65, 700], [100, 600]];
var pod = new LinePod(
document.getElementById('chart'),
[
- { target: 'test1', datapoints: data1, color: 'green' },
+ { target: 'test1', datapoints: data1, color: 'green', renderArea: 'Above' },
{ target: 'test2', datapoints: data2, color: 'blue', renderArea: 'Below' },
- { target: 'test3', datapoints: data3, color: 'orange', renderArea: 'Above' },
+ { target: 'test3', datapoints: data3, color: 'orange', renderArea: 'Below', yOrientation: 'right' },
+ { target: 'test4', datapoints: data4, color: 'purple', renderArea: 'Above', yOrientation: 'right' },
],
options
);
- pod.render();
+ pod.render();