Line series with a border
This demo shows how to add an outline to line series using two methods: an additional (thicker) line series and a shadow.
Using additional series
Section titled “Using additional series”/** * --------------------------------------- * 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)]);
// Create chart// https://www.amcharts.com/docs/v5/charts/xy-chart/var chart = root.container.children.push( am5xy.XYChart.new(root, { panX: false, panY: false, wheelX: "panX", wheelY: "zoomX", layout: root.verticalLayout }));
// 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 }));
// Make legend hide related background serieslegend.itemContainers.template.on("disabled", function (disabled, target) { var series = target.dataItem.dataContext; chart.series.each(function (chartSeries) { if (chartSeries.get("valueYField") == series.get("valueYField")) { if (disabled) { chartSeries.hide(); } else { chartSeries.show(); } } });});
var data = [ { year: "2021", lamerica: 0.1, meast: 0.8, africa: 0.4 }, { year: "2022", lamerica: 0.5, meast: 0.4, africa: 0.3 }, { year: "2023", lamerica: 0.3, meast: 0.9, africa: 0.5 }];
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var xAxis = chart.xAxes.push( am5xy.CategoryAxis.new(root, { categoryField: "year", renderer: am5xy.AxisRendererX.new(root, { cellStartLocation: 0.1, cellEndLocation: 0.9 }),
tooltip: am5.Tooltip.new(root, {}) }));
xAxis.data.setAll(data);
var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) }));
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/function makeSeries(name, fieldName) { var bgseries = chart.series.push( am5xy.SmoothedXLineSeries.new(root, { xAxis: xAxis, yAxis: yAxis, valueYField: fieldName, categoryXField: "year", stroke: am5.color(0xffffff) }) );
bgseries.strokes.template.setAll({ strokeWidth: 5 });
bgseries.data.setAll(data); bgseries.appear();
var series = chart.series.push( am5xy.SmoothedXLineSeries.new(root, { name: name, xAxis: xAxis, yAxis: yAxis, valueYField: fieldName, categoryXField: "year" }) );
series.strokes.template.setAll({ strokeWidth: 3 });
series.data.setAll(data); series.appear(); legend.data.push(series);}
makeSeries("Latin America", "lamerica");makeSeries("Middle East", "meast");makeSeries("Africa", "africa");
// 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": false, "panY": false, "wheelX": "panX", "wheelY": "zoomX", "layout": { "type": "VerticalLayout" } }, "properties": { "series": [ "#series-0", "#series-1", "#series-2", "#series-3", "#series-4", "#series-5" ], "xAxes": [ "#axis-0" ], "yAxes": [ "#axis-1" ] }, "children": [ { "type": "Legend", "settings": { "centerX": { "type": "Percent", "value": 50 }, "x": { "type": "Percent", "value": 50 } }, "properties": { "data": [ "#series-1", "#series-3", "#series-5" ] } } ], "refs": [ { "data-0": [ { "year": "2021", "lamerica": 0.1, "meast": 0.8, "africa": 0.4 }, { "year": "2022", "lamerica": 0.5, "meast": 0.4, "africa": 0.3 }, { "year": "2023", "lamerica": 0.3, "meast": 0.9, "africa": 0.5 } ] }, { "axis-0": { "type": "CategoryAxis", "settings": { "categoryField": "year", "renderer": { "type": "AxisRendererX", "settings": { "cellStartLocation": 0.1, "cellEndLocation": 0.9 } }, "tooltip": { "type": "Tooltip" } }, "properties": { "data": "#data-0" } } }, { "axis-1": { "type": "ValueAxis", "settings": { "renderer": { "type": "AxisRendererY" } } } }, { "series-0": { "type": "SmoothedXLineSeries", "settings": { "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "lamerica", "categoryXField": "year", "stroke": { "type": "Color", "value": "#ffffff" } }, "properties": { "data": "#data-0", "strokes": { "properties": { "template": { "settings": { "strokeWidth": 5 } } } } } } }, { "series-1": { "type": "SmoothedXLineSeries", "settings": { "name": "Latin America", "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "lamerica", "categoryXField": "year" }, "properties": { "data": "#data-0", "strokes": { "properties": { "template": { "settings": { "strokeWidth": 3 } } } } } } }, { "series-2": { "type": "SmoothedXLineSeries", "settings": { "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "meast", "categoryXField": "year", "stroke": { "type": "Color", "value": "#ffffff" } }, "properties": { "data": "#data-0", "strokes": { "properties": { "template": { "settings": { "strokeWidth": 5 } } } } } } }, { "series-3": { "type": "SmoothedXLineSeries", "settings": { "name": "Middle East", "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "meast", "categoryXField": "year" }, "properties": { "data": "#data-0", "strokes": { "properties": { "template": { "settings": { "strokeWidth": 3 } } } } } } }, { "series-4": { "type": "SmoothedXLineSeries", "settings": { "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "africa", "categoryXField": "year", "stroke": { "type": "Color", "value": "#ffffff" } }, "properties": { "data": "#data-0", "strokes": { "properties": { "template": { "settings": { "strokeWidth": 5 } } } } } } }, { "series-5": { "type": "SmoothedXLineSeries", "settings": { "name": "Africa", "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "africa", "categoryXField": "year" }, "properties": { "data": "#data-0", "strokes": { "properties": { "template": { "settings": { "strokeWidth": 3 } } } } } } } ]}line-series-with-borderAdding a line shadow
Section titled “Adding a line shadow”/** * --------------------------------------- * 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)]);
// Create chart// https://www.amcharts.com/docs/v5/charts/xy-chart/var chart = root.container.children.push( am5xy.XYChart.new(root, { panX: false, panY: false, wheelX: "panX", wheelY: "zoomX", layout: root.verticalLayout }));
// 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 }));
var data = [ { year: "2021", lamerica: 0.1, meast: 0.8, africa: 0.4 }, { year: "2022", lamerica: 0.5, meast: 0.4, africa: 0.3 }, { year: "2023", lamerica: 0.3, meast: 0.9, africa: 0.5 }];
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var xAxis = chart.xAxes.push( am5xy.CategoryAxis.new(root, { categoryField: "year", renderer: am5xy.AxisRendererX.new(root, { cellStartLocation: 0.1, cellEndLocation: 0.9 }),
tooltip: am5.Tooltip.new(root, {}) }));
xAxis.data.setAll(data);
var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) }));
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/function makeSeries(name, fieldName) { var series = chart.series.push( am5xy.SmoothedXLineSeries.new(root, { name: name, xAxis: xAxis, yAxis: yAxis, valueYField: fieldName, categoryXField: "year" }) );
series.strokes.template.setAll({ strokeWidth: 3, shadowColor: am5.color(0xffffff), shadowBlur: 3, shadowOffsetY: 3, fillOpacity: 1 });
series.data.setAll(data); series.appear(); legend.data.push(series);}
makeSeries("Latin America", "lamerica");makeSeries("Middle East", "meast");makeSeries("Africa", "africa");
// 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": false, "panY": false, "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": [ { "year": "2021", "lamerica": 0.1, "meast": 0.8, "africa": 0.4 }, { "year": "2022", "lamerica": 0.5, "meast": 0.4, "africa": 0.3 }, { "year": "2023", "lamerica": 0.3, "meast": 0.9, "africa": 0.5 } ] }, { "axis-0": { "type": "CategoryAxis", "settings": { "categoryField": "year", "renderer": { "type": "AxisRendererX", "settings": { "cellStartLocation": 0.1, "cellEndLocation": 0.9 } }, "tooltip": { "type": "Tooltip" } }, "properties": { "data": "#data-0" } } }, { "axis-1": { "type": "ValueAxis", "settings": { "renderer": { "type": "AxisRendererY" } } } }, { "series-0": { "type": "SmoothedXLineSeries", "settings": { "name": "Latin America", "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "lamerica", "categoryXField": "year" }, "properties": { "data": "#data-0", "strokes": { "properties": { "template": { "settings": { "strokeWidth": 3, "shadowColor": { "type": "Color", "value": "#ffffff" }, "shadowBlur": 3, "shadowOffsetY": 3, "fillOpacity": 1 } } } } } } }, { "series-1": { "type": "SmoothedXLineSeries", "settings": { "name": "Middle East", "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "meast", "categoryXField": "year" }, "properties": { "data": "#data-0", "strokes": { "properties": { "template": { "settings": { "strokeWidth": 3, "shadowColor": { "type": "Color", "value": "#ffffff" }, "shadowBlur": 3, "shadowOffsetY": 3, "fillOpacity": 1 } } } } } } }, { "series-2": { "type": "SmoothedXLineSeries", "settings": { "name": "Africa", "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "africa", "categoryXField": "year" }, "properties": { "data": "#data-0", "strokes": { "properties": { "template": { "settings": { "strokeWidth": 3, "shadowColor": { "type": "Color", "value": "#ffffff" }, "shadowBlur": 3, "shadowOffsetY": 3, "fillOpacity": 1 } } } } } } } ]}line-series-with-border-using-shadow