Multiple Value Axes

<h2>Any number of axes</h2> The chart can contain any number of axes - both vertically and horizontally. [amb href="https://www.amcharts.com/docs/v4/chart-types/xy-chart/#Multiple_axes"]More information about multiple axes[/amb] <h2>Configuring the axis line</h2> Axis line itself is configurable, like any other of the chart. In this demo we're assigning the same color as the related series, so that the relation is most prominent. [amb href="https://www.amcharts.com/docs/v4/concepts/axes/#The_axis_line"]More about configuring axis line[/amb] <h2>Anything can be a bullet</h2> Besides pre-defined shapes, bullet can be anything in amCharts 4 - an SVG image or path, static image, a shape like triangle or square, another complex shape - even another chart. [amb href="https://www.amcharts.com/docs/v4/concepts/bullets/"]More information about bullets[/amb]

by amcharts

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/dark.js"></script>
<script src="https://www.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

am4core.ready(function() {


//  data
    function getChartData() {
        var chartData = [];
        //Подача, м3/сут
        let q = [0,75,150,225,300,327,355,382,409,432,455,477,500,540,580,619,659];
        //Подача, баррель/сут
        let bpd_IN_mpd = 6.289810770432;
        //Напор, м
        let h = [7.1,7.1,6.9,6.5,5.9,5.7,5.5,5.2,4.9,4.6,4.3,4.0,3.5,2.7,1.8,0.8,0.0];
        //КПД
        let eff = [0.0,21.3,39.9,51.6,57.6,59.0,60.2,61.0,61.3,61.0,60.0,58.1,55.1,46.4,33.2,16.7,0.4];
        //Мощность, кВт
        let pow = [0.3,0.3,0.3,0.3,0.4,0.4,0.4,0.4,0.4,0.4,0.4,0.4,0.4,0.4,0.4,0.4,0.3];

        for (var i = 0; i < q.length; i++) {
            chartData.push({
                "flowrate": q[i],
                "bpd": q[i]*bpd_IN_mpd,
                "head":    h[i],
            });
        }
        for (var i = 0; i < q.length; i++) {
            chartData.push({
                "flowrate": q[i],
                "bpd": q[i]*bpd_IN_mpd,
                "kpd":    eff[i],
            });
        }
        for (var i = 0; i < q.length; i++) {
            chartData.push({
                "flowrate": q[i],
                "bpd": q[i]*bpd_IN_mpd,
                "power":      pow[i]
            });
        }
        //console.log(chartData);
        return chartData;
    }


    var colors = [
        '#4A49DB', // H
        '#028000', // Eff
        '#FE2929' // N
    ];


    // Theme

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


    // Increase contrast by taking evey second color
    //chart.colors.step = 2;

    //
    chart.paddingTop = 40;

    // Add data
    chart.data = getChartData();

    let bpd_IN_mpd = 6.289810770432;

//---- X axes
    //mpd
    var xAxis = chart.xAxes.push(new am4charts.ValueAxis());
    xAxis.renderer.grid.template.location = 0;
    xAxis.renderer.minGridDistance = 50;
    xAxis.title.text = 'barrel per day';
    xAxis.title.fontWeight = 600;
    //bpd
    var...