Simulating axis gaps (break)
This demo shows how we can leverage stacked axes to simulate an axis break.
/** * --------------------------------------- * 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: true, panY: true, wheelX: "panX", wheelY: "zoomX", pinchZoomX: true }));
chart.leftAxesContainer.setAll({ layout: root.verticalLayout, reverseChildren: true});
// Add cursor// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));cursor.lineY.set("visible", false);
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });xRenderer.labels.template.setAll({ rotation: -90, centerY: am5.p50, centerX: am5.p100, paddingRight: 15});
xRenderer.grid.template.setAll({ location: 1});
var xAxis = chart.xAxes.push( am5xy.CategoryAxis.new(root, { maxDeviation: 0.3, categoryField: "country", renderer: xRenderer, tooltip: am5.Tooltip.new(root, {}) }));
// Set datavar data = [ { country: "USA", value: 14025 }, { country: "China", value: 10882 }, { country: "Japan", value: 1809 }, { country: "Germany", value: 1322 }, { country: "UK", value: 1122 }, { country: "France", value: 1114 }, { country: "India", value: 984 }, { country: "Spain", value: 711 }, { country: "Netherlands", value: 665 }, { country: "South Korea", value: 443 }, { country: "Canada", value: 441 }];
xAxis.data.setAll(data);
var gapCover = chart.plotContainer.children.push( am5.Rectangle.new(root, { fill: am5.color(0xffffff), fillOpacity: 0.8 }));
gapCover.on("fillOpacity", function (fillOpacity) { fixAxisHeights(1 - fillOpacity);});
gapCover.events.on("pointerover", function () { handleOver();});
gapCover.events.on("pointerout", function () { handleOut();});
var timeout;
function handleOver() { if (timeout) { clearTimeout(timeout); }
timeout = setTimeout(function () { handleOverReal(); }, 100);}
function handleOverReal() { gapCover.animate({ key: "fillOpacity", to: 0, duration: 600, easing: am5.ease.out(am5.ease.cubic) });}
function handleOut() { if (timeout) { clearTimeout(timeout); }
timeout = setTimeout(function () { handleOutReal(); }, 100);}
function handleOutReal() { gapCover.animate({ key: "fillOpacity", to: 0.9, duration: 600, easing: am5.ease.out(am5.ease.cubic) });}
function createAxisAndSeries(min, max, gap) { var yRenderer = am5xy.AxisRendererY.new(root, { strokeOpacity: 0.1 });
var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { maxDeviation: 0.3, min: min, max: max, strictMinMax: true, renderer: yRenderer, x: am5.p100, centerX: am5.p100 }) );
// Create series // https://www.amcharts.com/docs/v5/charts/xy-chart/series/ var series = chart.series.push( am5xy.ColumnSeries.new(root, { clustered: false, name: "Series 1", xAxis: xAxis, yAxis: yAxis, valueYField: "value", sequencedInterpolation: true, categoryXField: "country" }) );
series.columns.template.setAll({ strokeOpacity: 0, tooltipText: "{valueY}" });
series.columns.template.adapters.add("fill", function (fill, target) { return chart.get("colors").getIndex(series.columns.indexOf(target)); });
series.columns.template.adapters.add("stroke", function (stroke, target) { return chart.get("colors").getIndex(series.columns.indexOf(target)); });
if (gap) { yRenderer.labels.template.setAll({ minPosition: 0.02, maxPosition: 0.98 });
yAxis.events.on("positionchanged", function (e) { fixCoverPosition(e.target); });
yAxis.events.on("boundschanged", function (e) { fixCoverPosition(e.target); }); }
series.data.setAll(data);
// Make stuff animate on load // https://www.amcharts.com/docs/v5/concepts/animations/ series.appear(1000);
fixAxisHeights(0.1);}
function fixCoverPosition(axis) { gapCover.setAll({ height: axis.height() - 1, width: chart.plotContainer.width(), y: axis.y() });}
function fixAxisHeights(gapRelativeHeight) { var bottomAxis = chart.yAxes.getIndex(0); var gapAxis = chart.yAxes.getIndex(1); var topAxis = chart.yAxes.getIndex(2);
if (bottomAxis && gapAxis && topAxis) { var difference = topAxis.get("max") - bottomAxis.get("min"); var bottomDifference = bottomAxis.get("max") - bottomAxis.get("min"); var gapDifference = gapAxis.get("max") - gapAxis.get("min"); var topDifference = topAxis.get("max") - topAxis.get("min");
var valueHeight = 1 / difference; var gapHeight = valueHeight * gapDifference * gapRelativeHeight;
var restHeight = 1 - gapHeight; var restDifference = bottomDifference + topDifference;
var bottomHeight = (restHeight * bottomDifference) / restDifference; var topHeight = (restHeight * topDifference) / restDifference;
bottomAxis.set("height", am5.percent(bottomHeight * 100)); gapAxis.set("height", am5.percent(gapHeight * 100)); topAxis.set("height", am5.percent(topHeight * 100)); }}
createAxisAndSeries(0, 2000, false);createAxisAndSeries(2000, 10000, true);createAxisAndSeries(10000, 15000, false);
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", "pinchZoomX": true, "cursor": { "type": "XYCursor", "properties": { "lineY": { "settings": { "visible": false } } } } }, "properties": { "series": [ "#series-0", "#series-1", "#series-2" ], "xAxes": [ "#axis-0" ], "yAxes": [ "#axis-1", "#axis-2", "#axis-3" ], "leftAxesContainer": { "settings": { "layout": { "type": "VerticalLayout" }, "reverseChildren": true } }, "plotContainer": { "children": [ { "type": "Rectangle", "settings": { "fill": { "type": "Color", "value": "#ffffff" }, "fillOpacity": 0.8, "height": 16.966666666666672, "width": 603.40625, "y": 227.79166666666666 }, "index": 5 } ] } }, "refs": [ { "data-0": [ { "country": "USA", "value": 14025 }, { "country": "China", "value": 10882 }, { "country": "Japan", "value": 1809 }, { "country": "Germany", "value": 1322 }, { "country": "UK", "value": 1122 }, { "country": "France", "value": 1114 }, { "country": "India", "value": 984 }, { "country": "Spain", "value": 711 }, { "country": "Netherlands", "value": 665 }, { "country": "South Korea", "value": 443 }, { "country": "Canada", "value": 441 } ] }, { "axis-0": { "type": "CategoryAxis", "settings": { "maxDeviation": 0.3, "categoryField": "country", "renderer": { "type": "AxisRendererX", "settings": { "minGridDistance": 30 }, "properties": { "labels": { "properties": { "template": { "settings": { "rotation": -90, "centerY": { "type": "Percent", "value": 50 }, "centerX": { "type": "Percent", "value": 100 }, "paddingRight": 15 } } } }, "grid": { "properties": { "template": { "settings": { "location": 1 } } } } } }, "tooltip": { "type": "Tooltip" } }, "properties": { "data": "#data-0" } } }, { "axis-1": { "type": "ValueAxis", "settings": { "maxDeviation": 0.3, "min": 0, "max": 2000, "strictMinMax": true, "renderer": { "type": "AxisRendererY", "settings": { "strokeOpacity": 0.1 } }, "x": { "type": "Percent", "value": 100 }, "centerX": { "type": "Percent", "value": 100 }, "height": { "type": "Percent", "value": 27.047619047619047 } } } }, { "axis-2": { "type": "ValueAxis", "settings": { "maxDeviation": 0.3, "min": 2000, "max": 10000, "strictMinMax": true, "renderer": { "type": "AxisRendererY", "settings": { "strokeOpacity": 0.1 }, "properties": { "labels": { "properties": { "template": { "settings": { "minPosition": 0.02, "maxPosition": 0.98 } } } } } }, "x": { "type": "Percent", "value": 100 }, "centerX": { "type": "Percent", "value": 100 }, "height": { "type": "Percent", "value": 5.333333333333334 } } } }, { "axis-3": { "type": "ValueAxis", "settings": { "maxDeviation": 0.3, "min": 10000, "max": 15000, "strictMinMax": true, "renderer": { "type": "AxisRendererY", "settings": { "strokeOpacity": 0.1 } }, "x": { "type": "Percent", "value": 100 }, "centerX": { "type": "Percent", "value": 100 }, "height": { "type": "Percent", "value": 67.6190476190476 } } } }, { "series-0": { "type": "ColumnSeries", "settings": { "clustered": false, "name": "Series 1", "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "value", "sequencedInterpolation": true, "categoryXField": "country" }, "properties": { "data": "#data-0", "columns": { "properties": { "template": { "settings": { "strokeOpacity": 0, "tooltipText": "{valueY}" } } } } } } }, { "series-1": { "type": "ColumnSeries", "settings": { "clustered": false, "name": "Series 1", "xAxis": "#axis-0", "yAxis": "#axis-2", "valueYField": "value", "sequencedInterpolation": true, "categoryXField": "country" }, "properties": { "data": "#data-0", "columns": { "properties": { "template": { "settings": { "strokeOpacity": 0, "tooltipText": "{valueY}" } } } } } } }, { "series-2": { "type": "ColumnSeries", "settings": { "clustered": false, "name": "Series 1", "xAxis": "#axis-0", "yAxis": "#axis-3", "valueYField": "value", "sequencedInterpolation": true, "categoryXField": "country" }, "properties": { "data": "#data-0", "columns": { "properties": { "template": { "settings": { "strokeOpacity": 0, "tooltipText": "{valueY}" } } } } } } } ]}simulating-axis-gaps-with-v5-of-amcharts