AM chart 4 Line with different negative color issue with positive numbers

Question

    /**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 *
 * For more information visit:
 * https://www.amcharts.com/
 *
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

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

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

    // Add data
    chart.data = generatechartData();
    function generatechartData() {
        var chartData = [];
		
        chartData.push({
            "date": new Date(2019, 0, 12),
            "visits": 140,
            "test": "hello-140-05/05/2019"
        });
        chartData.push({
            "date": new Date(2019, 1, 12),
            "visits": 150,
            "test": "hello-140-06/05/2019"
        });
        chartData.push({
            "date": new Date(2019, 2, 12),
            "visits": 160,
            "test": "hello-140-07/05/2019"
        });
        chartData.push({
            "date": new Date(2019, 3, 12),
            "visits": 170,
            "test": "hello-140-07/05/2019"
        });
        chartData.push({
            "date": new Date(2019, 4, 12),
            "visits": 180,
            "test": "hello-140-07/05/2019"
        });
        chartData.push({
            "date": new Date(2019, 5, 12),
            "visits": 190,
            "test": "hello-140-07/05/2019"
        });
            chartData.push({
            "date": new Date(2019, 6, 12),
            "visits": 180,
            "test": "hello-140-07/05/2019"
        });
		    chartData.push({
            "date": new Date(2019, 7, 12),
            "visits": 160,
            "test": "hello-140-07/05/2019"
        });
		    chartData.push({
            "date": new Date(2019, 8, 12),
            "visits": 140,
            "test": "hello-140-07/05/2019"
        });
		    chartData.push({
            "date": new Date(2019, 9, 12),
            "visits": 120,
            "test": "hello-140-07/05/2019"
        });
		    chartData.push({
            "date": new Date(2019, 10, 12),
            "visits": 100,
            "test": "hello-140-07/05/2019"
        });
		    chartData.push({
            "date": new Date(2019, 11, 12),
            "visits": 80,
            "test": "hello-140-07/05/2019"
        });
        return chartData;
    }

    // Create axes
    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.startLocation = 0.5;
    dateAxis.endLocation = 0.5;

    // Create value axis
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.valueY = "visits";
    series.dataFields.dateX = "date";
    series.strokeWidth = 3;
    series.tooltipText = "{valueY.value}";
    series.fillOpacity = 0.1;
    series.tooltipText = `[bold]Test[/]
----
Date: {date}
Visits: {visits}`;

    // Create a range to change stroke for values below 0
    var range = valueAxis.createSeriesRange(series);
    range.value = 140;
    range.endValue = 1000;
    range.contents.stroke = chart.colors.getIndex(4);
    range.contents.fill = range.contents.stroke;
    range.contents.strokeOpacity = 0.7;
    range.contents.fillOpacity = 0.1;

    // Add cursor
    chart.cursor = new am4charts.XYCursor();
    chart.cursor.xAxis = dateAxis;
    chart.scrollbarX = new am4core.Scrollbar();

    valueAxis.renderer.labels.template.adapter.add("text", function (text) {
        return "$" + text;
    });

<style type="text/css">
#chartdiv {
  width: 100%;
  height: 300px;
}
</style>

<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>
<style type="text/css">
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>
<div id="chartdiv">
</div>

I am new to AM chart 4 and using below chart for showing the increase and decrease of number having range:

https://www.amcharts.com/demos/date-based-line-chart/

All the values in my data source are positive number due to which the shaded area or fill is covering the whole area in chart not the specific one like the example one.

My chart settings:

range.value = 100000;

range.endValue = 1000;

I want to know that this chart will work only if we have negative numbers in chart data set or it can work with positive numbers too to share/fill the area like the example one.

Answer 1

Try:

// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.baseValue = 140;

Answer 2

If you don't want a fill on the series outside of the range, don't set fillOpacity on your series:

series.fillOpacity = 0.1;

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 *
 * For more information visit:
 * https://www.amcharts.com/
 *
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

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

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

    // Add data
    chart.data = generatechartData();
    function generatechartData() {
        var chartData = [];
		
        chartData.push({
            "date": new Date(2019, 0, 12),
            "visits": 140,
            "test": "hello-140-05/05/2019"
        });
        chartData.push({
            "date": new Date(2019, 1, 12),
            "visits": 150,
            "test": "hello-140-06/05/2019"
        });
        chartData.push({
            "date": new Date(2019, 2, 12),
            "visits": 160,
            "test": "hello-140-07/05/2019"
        });
        chartData.push({
            "date": new Date(2019, 3, 12),
            "visits": 170,
            "test": "hello-140-07/05/2019"
        });
        chartData.push({
            "date": new Date(2019, 4, 12),
            "visits": 180,
            "test": "hello-140-07/05/2019"
        });
        chartData.push({
            "date": new Date(2019, 5, 12),
            "visits": 190,
            "test": "hello-140-07/05/2019"
        });
            chartData.push({
            "date": new Date(2019, 6, 12),
            "visits": 180,
            "test": "hello-140-07/05/2019"
        });
		    chartData.push({
            "date": new Date(2019, 7, 12),
            "visits": 160,
            "test": "hello-140-07/05/2019"
        });
		    chartData.push({
            "date": new Date(2019, 8, 12),
            "visits": 140,
            "test": "hello-140-07/05/2019"
        });
		    chartData.push({
            "date": new Date(2019, 9, 12),
            "visits": 120,
            "test": "hello-140-07/05/2019"
        });
		    chartData.push({
            "date": new Date(2019, 10, 12),
            "visits": 100,
            "test": "hello-140-07/05/2019"
        });
		    chartData.push({
            "date": new Date(2019, 11, 12),
            "visits": 80,
            "test": "hello-140-07/05/2019"
        });
        return chartData;
    }

    // Create axes
    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.startLocation = 0.5;
    dateAxis.endLocation = 0.5;

    // Create value axis
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.valueY = "visits";
    series.dataFields.dateX = "date";
    series.strokeWidth = 3;
    series.tooltipText = "{valueY.value}";
    //series.fillOpacity = 0.1;
    series.tooltipText = `[bold]Test[/]
----
Date: {date}
Visits: {visits}`;

    // Create a range to change stroke for values below 0
    var range = valueAxis.createSeriesRange(series);
    range.value = 140;
    range.endValue = 1000;
    range.contents.stroke = chart.colors.getIndex(4);
    range.contents.fill = range.contents.stroke;
    range.contents.strokeOpacity = 0.7;
    range.contents.fillOpacity = 0.1;

    // Add cursor
    chart.cursor = new am4charts.XYCursor();
    chart.cursor.xAxis = dateAxis;
    chart.scrollbarX = new am4core.Scrollbar();

    valueAxis.renderer.labels.template.adapter.add("text", function (text) {
        return "$" + text;
    });

<style type="text/css">
#chartdiv {
  width: 100%;
  height: 300px;
}
</style>

<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>
<style type="text/css">
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>
<div id="chartdiv">
</div>