Column chart with axis break

<h2>Axis breaks</h2> Axis breaks allows shrinking part of the axis scale. Hover the break to expand and see actual scale. [amb href="https://www.amcharts.com/docs/v4/concepts/axes/#Breaks"]More about axis breaks[/amb]

by PARTH PATEL

HTML

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

CSS

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: 500px;
}

JavaScript

let chart = am4core.create('chartdiv', am4charts.XYChart)
    chart.colors.step = 2;

    chart.legend = new am4charts.Legend();
    chart.legend.position = 'bottom';
    chart.legend.paddingBottom = 20;
    chart.legend.labels.template.maxWidth = 95;
    chart.legend.fontSize = 10;

    //Styling Legends
    chart.legend.useDefaultMarker = false;
    chart.legend.disabled = true;
  
    // let marker = chart.legend.markers.template.children.getIndex(0);
    // marker.cornerRadius(12, 12, 12, 12);
    // marker.strokeWidth = 2;
    // marker.strokeOpacity = 1;
    // marker.stroke = am4core.color("#ccc");


    let xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    xAxis.dataFields.category = 'category';
    xAxis.renderer.cellStartLocation = 0.1;
    xAxis.renderer.cellEndLocation = 0.9;
    xAxis.renderer.grid.template.location = 0;
    xAxis.renderer.labels.template.fontSize = 10;
    // xAxis.startLocation = -5;
    
    let yAxis = chart.yAxes.push(new am4charts.ValueAxis());
    yAxis.min = 0;
    // yAxis.renderer.minGridDistance = 30;

    // function createGrid(value) {
    //   var range = yAxis.axisRanges.create();
    //   range.value = value;
    //   range.label.text = "{value}";
    // }
    
    // createGrid(0);
    // createGrid(25);
    // createGrid(50);
    // createGrid(75);
    // createGrid(100);

    
    
    // // Create series
    // var series = chart.series.push(new am4charts.LineSeries());
    // series.dataFields.categoryX = "category";
    // series.dataFields.valueY = "lineOne";
    // series.strokeWidth = 2;
    // series.tensionX = 0.77;

    

    function createSeries(value, name, color) {
      let series = chart.series.push(new am4charts.ColumnSeries());
      series.dataFields.valueY = value;
      series.dataFields.categoryX = 'category';
      series.name = name;
  
      series.events.on('hidden', arrangeColumns);
      series.events.on('shown', arrangeColumns);
      series.fill = am4core.color("#0072CE"); 
  ...