Using data item location to align line series with clustered columns
This demo shows how we can use locationX setting of the LineSeries to align its bullets with clustered columns.
/** * --------------------------------------- * 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), am5themes_Material.new(root)]);
// 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" }));
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, cellStartLocation: 0.2, cellEndLocation: 0.8 }),
tooltip: am5.Tooltip.new(root, {}) }));
var yAxis1 = chart.yAxes.push( am5xy.ValueAxis.new(root, { min: 0, renderer: am5xy.AxisRendererY.new(root, {}) }));
var yAxis2 = chart.yAxes.push( am5xy.ValueAxis.new(root, { syncWithAxis: yAxis1, min: 0, renderer: am5xy.AxisRendererY.new(root, { opposite: true }) }));
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/function createLineSeries(data, location) { var series = chart.series.push( am5xy.LineSeries.new(root, { minBulletDistance: 10, xAxis: xAxis, yAxis: yAxis2, valueYField: "value", valueXField: "date", locationX: location, tooltip: am5.Tooltip.new(root, { pointerOrientation: "horizontal", labelText: "{valueY}" }) }) );
series.strokes.template.setAll({ strokeWidth: 3 });
series.data.setAll(data);
series.bullets.push(function () { return am5.Bullet.new(root, { locationX: location, sprite: am5.Circle.new(root, { radius: 15, fill: series.get("fill"), stroke: root.interfaceColors.get("background"), strokeWidth: 3 }) }); });
series.appear(1000, 100);}
function createColumnSeries(data) { var series = chart.series.push( am5xy.ColumnSeries.new(root, { xAxis: xAxis, yAxis: yAxis1, valueYField: "value", valueXField: "date", tooltip: am5.Tooltip.new(root, { pointerOrientation: "horizontal", labelText: "{valueY}" }) }) );
series.data.setAll(data); series.appear(1000, 100);}
createColumnSeries([ { date: new Date(2012, 1, 1).getTime(), value: 350 }, { date: new Date(2012, 1, 2).getTime(), value: 200 }]);
createColumnSeries([ { date: new Date(2012, 1, 1).getTime(), value: 250 }, { date: new Date(2012, 1, 2).getTime(), value: 250 }]);
createColumnSeries([ { date: new Date(2012, 1, 1).getTime(), value: 280 }, { date: new Date(2012, 1, 2).getTime(), value: 310 }]);
createLineSeries( [ { date: new Date(2012, 1, 1).getTime(), value: 18 }, { date: new Date(2012, 1, 2).getTime(), value: 16 } ], 0.3);
createLineSeries( [ { date: new Date(2012, 1, 1).getTime(), value: 25 }, { date: new Date(2012, 1, 2).getTime(), value: 20 } ], 0.5);
createLineSeries( [ { date: new Date(2012, 1, 1).getTime(), value: 27 }, { date: new Date(2012, 1, 2).getTime(), value: 28 } ], 0.7);
// 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: 98vh;}{ "type": "XYChart", "settings": { "panX": true, "panY": true, "wheelX": "panX", "wheelY": "zoomX" }, "properties": { "series": [ "#series-0", "#series-1", "#series-2", "#series-3", "#series-4", "#series-5" ], "xAxes": [ "#axis-0" ], "yAxes": [ "#axis-1", "#axis-2" ] }, "refs": [ { "data-0": [ { "date": 1328047200000, "value": 350 }, { "date": 1328133600000, "value": 200 } ] }, { "data-1": [ { "date": 1328047200000, "value": 250 }, { "date": 1328133600000, "value": 250 } ] }, { "data-2": [ { "date": 1328047200000, "value": 280 }, { "date": 1328133600000, "value": 310 } ] }, { "data-3": [ { "date": 1328047200000, "value": 18 }, { "date": 1328133600000, "value": 16 } ] }, { "data-4": [ { "date": 1328047200000, "value": 25 }, { "date": 1328133600000, "value": 20 } ] }, { "data-5": [ { "date": 1328047200000, "value": 27 }, { "date": 1328133600000, "value": 28 } ] }, { "axis-0": { "type": "DateAxis", "settings": { "maxDeviation": 0.1, "groupData": false, "baseInterval": { "timeUnit": "day", "count": 1 }, "renderer": { "type": "AxisRendererX", "settings": { "minGridDistance": 50, "cellStartLocation": 0.2, "cellEndLocation": 0.8 } }, "tooltip": { "type": "Tooltip" } } } }, { "axis-1": { "type": "ValueAxis", "settings": { "min": 0, "renderer": { "type": "AxisRendererY" } } } }, { "axis-2": { "type": "ValueAxis", "settings": { "syncWithAxis": "#axis-1", "min": 0, "renderer": { "type": "AxisRendererY", "settings": { "opposite": true } } } } }, { "series-0": { "type": "ColumnSeries", "settings": { "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "value", "valueXField": "date", "tooltip": { "type": "Tooltip", "settings": { "pointerOrientation": "horizontal", "labelText": "{valueY}" } } }, "properties": { "data": "#data-0" } } }, { "series-1": { "type": "ColumnSeries", "settings": { "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "value", "valueXField": "date", "tooltip": { "type": "Tooltip", "settings": { "pointerOrientation": "horizontal", "labelText": "{valueY}" } } }, "properties": { "data": "#data-1" } } }, { "series-2": { "type": "ColumnSeries", "settings": { "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "value", "valueXField": "date", "tooltip": { "type": "Tooltip", "settings": { "pointerOrientation": "horizontal", "labelText": "{valueY}" } } }, "properties": { "data": "#data-2" } } }, { "series-3": { "type": "LineSeries", "settings": { "minBulletDistance": 10, "xAxis": "#axis-0", "yAxis": "#axis-2", "valueYField": "value", "valueXField": "date", "locationX": 0.3, "tooltip": { "type": "Tooltip", "settings": { "pointerOrientation": "horizontal", "labelText": "{valueY}" } } }, "properties": { "data": "#data-3", "strokes": { "properties": { "template": { "settings": { "strokeWidth": 3 } } } }, "bullets": [ { "type": "Bullet", "settings": { "locationX": 0.3, "sprite": { "type": "Circle", "settings": { "radius": 15, "fill": "@series.get('fill')", "stroke": "@root.interfaceColors.get('background')", "strokeWidth": 3 } } } } ] } } }, { "series-4": { "type": "LineSeries", "settings": { "minBulletDistance": 10, "xAxis": "#axis-0", "yAxis": "#axis-2", "valueYField": "value", "valueXField": "date", "locationX": 0.5, "tooltip": { "type": "Tooltip", "settings": { "pointerOrientation": "horizontal", "labelText": "{valueY}" } } }, "properties": { "data": "#data-4", "strokes": { "properties": { "template": { "settings": { "strokeWidth": 3 } } } }, "bullets": [ { "type": "Bullet", "settings": { "locationX": 0.5, "sprite": { "type": "Circle", "settings": { "radius": 15, "fill": "@series.get('fill')", "stroke": "@root.interfaceColors.get('background')", "strokeWidth": 3 } } } } ] } } }, { "series-5": { "type": "LineSeries", "settings": { "minBulletDistance": 10, "xAxis": "#axis-0", "yAxis": "#axis-2", "valueYField": "value", "valueXField": "date", "locationX": 0.7, "tooltip": { "type": "Tooltip", "settings": { "pointerOrientation": "horizontal", "labelText": "{valueY}" } } }, "properties": { "data": "#data-5", "strokes": { "properties": { "template": { "settings": { "strokeWidth": 3 } } } }, "bullets": [ { "type": "Bullet", "settings": { "locationX": 0.7, "sprite": { "type": "Circle", "settings": { "radius": 15, "fill": "@series.get('fill')", "stroke": "@root.interfaceColors.get('background')", "strokeWidth": 3 } } } } ] } } } ]}using-data-item-location-to-align-line-series-with-clustered