Show only one series at a time
This demo shows how we can use series settings events to ensure only one series is shown on an XY chart at a time, by toggling off other series automatically.
/** * --------------------------------------- * This demo was created using amCharts 5. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v5/ * --------------------------------------- */
// Create root element// https://www.amcharts.com/docs/v5/getting-started/#Root_elementvar root = am5.Root.new("chartdiv");
// Set themes// https://www.amcharts.com/docs/v5/concepts/themes/root.setThemes([am5themes_Animated.new(root)]);
var data = [ { date: new Date(2018, 0, 1).getTime(), value: 450, value2: 362, value3: 699 }, { date: new Date(2018, 0, 2).getTime(), value: 269, value2: 450, value3: 841 }, { date: new Date(2018, 0, 3).getTime(), value: 700, value2: 358, value3: 699 }, { date: new Date(2018, 0, 4).getTime(), value: 490, value2: 367, value3: 500 }, { date: new Date(2018, 0, 5).getTime(), value: 500, value2: 485, value3: 369 }, { date: new Date(2018, 0, 6).getTime(), value: 550, value2: 354, value3: 250 }, { date: new Date(2018, 0, 7).getTime(), value: 420, value2: 350, value3: 600 }];// Create chart// https://www.amcharts.com/docs/v5/charts/xy-chart/var chart = root.container.children.push( am5xy.XYChart.new(root, { panX: true, panY: true, wheelX: "panX", wheelY: "zoomX", layout: root.verticalLayout }));
var easing = am5.ease.linear;
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { maxDeviation: 0.1, groupData: false, baseInterval: { timeUnit: "day", count: 1 },
renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 50 }),
tooltip: am5.Tooltip.new(root, {}) }));
var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { maxDeviation: 0.1, renderer: am5xy.AxisRendererY.new(root, {}) }));
// Add legend// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/var legend = chart.children.push( am5.Legend.new(root, { centerX: am5.p50, x: am5.p50 }));
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/function createSeries(field, name, visible) { var series = chart.series.push( am5xy.LineSeries.new(root, { name: name, minBulletDistance: 10, xAxis: xAxis, yAxis: yAxis, valueYField: field, valueXField: "date", tooltip: am5.Tooltip.new(root, { pointerOrientation: "horizontal", labelText: "{valueY}" }),
visible: visible }) );
series.bullets.push(function () { return am5.Bullet.new(root, { sprite: am5.Circle.new(root, { radius: 5, fill: series.get("fill"), stroke: root.interfaceColors.get("background"), strokeWidth: 2 }) }); });
series.data.setAll(data);
legend.data.push(series);
series.on("visible", function (visible, target) { if (visible) { chart.series.each(function (series) { if (series !== target) { series.set("visible", false); } }); } });}
createSeries("value", "Series 1", true);createSeries("value2", "Series 2", false);createSeries("value3", "Series 3", false);
// Make stuff animate on load// https://www.amcharts.com/docs/v5/concepts/animations/chart.appear(1000, 100);<div id="chartdiv"></div>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
#chartdiv { width: 100%; height: 95vh;}{ "type": "XYChart", "settings": { "panX": true, "panY": true, "wheelX": "panX", "wheelY": "zoomX", "layout": { "type": "VerticalLayout" } }, "properties": { "series": [ "#series-0", "#series-1", "#series-2" ], "xAxes": [ "#axis-0" ], "yAxes": [ "#axis-1" ] }, "children": [ { "type": "Legend", "settings": { "centerX": { "type": "Percent", "value": 50 }, "x": { "type": "Percent", "value": 50 } }, "properties": { "data": [ "#series-0", "#series-1", "#series-2" ] } } ], "refs": [ { "data-0": [ { "date": 1514757600000, "value": 450, "value2": 362, "value3": 699 }, { "date": 1514844000000, "value": 269, "value2": 450, "value3": 841 }, { "date": 1514930400000, "value": 700, "value2": 358, "value3": 699 }, { "date": 1515016800000, "value": 490, "value2": 367, "value3": 500 }, { "date": 1515103200000, "value": 500, "value2": 485, "value3": 369 }, { "date": 1515189600000, "value": 550, "value2": 354, "value3": 250 }, { "date": 1515276000000, "value": 420, "value2": 350, "value3": 600 } ] }, { "axis-0": { "type": "DateAxis", "settings": { "maxDeviation": 0.1, "groupData": false, "baseInterval": { "timeUnit": "day", "count": 1 }, "renderer": { "type": "AxisRendererX", "settings": { "minGridDistance": 50 } }, "tooltip": { "type": "Tooltip" } } } }, { "axis-1": { "type": "ValueAxis", "settings": { "maxDeviation": 0.1, "renderer": { "type": "AxisRendererY" } } } }, { "series-0": { "type": "LineSeries", "settings": { "name": "Series 1", "minBulletDistance": 10, "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "value", "valueXField": "date", "tooltip": { "type": "Tooltip", "settings": { "pointerOrientation": "horizontal", "labelText": "{valueY}" } }, "visible": true }, "properties": { "data": "#data-0", "bullets": [ { "type": "Bullet", "settings": { "sprite": { "type": "Circle", "settings": { "radius": 5, "fill": "@series.get('fill')", "stroke": "@root.interfaceColors.get('background')", "strokeWidth": 2 } } } } ] } } }, { "series-1": { "type": "LineSeries", "settings": { "name": "Series 2", "minBulletDistance": 10, "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "value2", "valueXField": "date", "tooltip": { "type": "Tooltip", "settings": { "pointerOrientation": "horizontal", "labelText": "{valueY}" } }, "visible": false }, "properties": { "data": "#data-0", "bullets": [ { "type": "Bullet", "settings": { "sprite": { "type": "Circle", "settings": { "radius": 5, "fill": "@series.get('fill')", "stroke": "@root.interfaceColors.get('background')", "strokeWidth": 2 } } } } ] } } }, { "series-2": { "type": "LineSeries", "settings": { "name": "Series 3", "minBulletDistance": 10, "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "value3", "valueXField": "date", "tooltip": { "type": "Tooltip", "settings": { "pointerOrientation": "horizontal", "labelText": "{valueY}" } }, "visible": false }, "properties": { "data": "#data-0", "bullets": [ { "type": "Bullet", "settings": { "sprite": { "type": "Circle", "settings": { "radius": 5, "fill": "@series.get('fill')", "stroke": "@root.interfaceColors.get('background')", "strokeWidth": 2 } } } } ] } } } ]}show-only-one-series-at-a-time