Column and Line mix - AM4

You can use our <a href="https://www.amcharts.com/docs/v4/chart-types/xy-chart/">XYChart</a> to mix and match various types of two-dimensional charts - line, bar, column, area, candlestick, OHLC, etc. The most common combination is the column and line chart.

by Rogério Saraceni

HTML

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv-unsafe-behavior"></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-unsafe-behavior {
  width: 100%;
  height: 500px;
}

JavaScript

// Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create chart instance
    var chart = am4core.create("chartdiv-unsafe-behavior", am4charts.XYChart);

    // Data for both series
    var data = [ 
        {
            "mes": "Jan",
            "income": 23.5,
            "income2": 32.5,
            "expenses": 21.1,
            "income3": 23.5,
            "income4": 32.5,
            "expenses2": 21.1,
            "expenses3": 21.1
        }, 
        {
            "mes": "Feb",
            "income": 26.2,
            "income2": 32.5,
            "expenses": 30.5,
            "income3": 23.5,
            "income4": 32.5,
            "expenses2": 21.1,
            "expenses3": 21.1
        }, 
        {
            "mes": "Mar",
            "income": 30.1,
            "income2": 32.5,
            "expenses": 34.9,
            "income3": 23.5,
            "income4": 32.5,
            "expenses2": 21.1,
            "expenses3": 21.1
        }, 
        {
            "mes": "Apr",
            "income": 29.5,
            "income2": 32.5,
            "expenses": 31.1,
            "income3": 23.5,
            "income4": 32.5,
            "expenses2": 21.1,
            "expenses3": 21.1
        }, 
        {
            "mes": "May",
            "income": 30.6,
            "income2": 32.5,
            "expenses": 28.2,
            "income3": 23.5,
            "income4": 32.5,
            "expenses2": 21.1,
            "expenses3": 21.1
        }, 
        {
            "mes": "Jun",
            "income": 4.1,
            "income2": 32.5,
            "expenses": 2.9,
            "income3": 23.5,
            "income4": 32.5,
            "expenses2": 21.1,
            "expenses3": 21.1
        }, 
        {
            "mes": "Jul",
            "income": 14.1,
            "income2": 32.5,
            "expenses": 12.9,
            "income3": 23.5,
            "income4": 32.5,
            "expenses2": 21.1,
            "expenses3": 21.1
 ...