vendredi 25 juin 2021

Amchart fill background underline

I come to you to know if it was possible to change the background color of the bottom part of the graph to blue ?

The context of the project consists in displaying an axis with a sales objective with another axis representing the turnover. I would like the part above the curve to be in green and the part below to be filled in entirely in blue.

I followed this code which is an example of amchart site. https://www.amcharts.com/demos/range-chart-with-different-fill-colors/

Here's my code

am4core.ready(function() {

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

    var chart = am4core.create("chartdiv", am4charts.XYChart);
    chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

    var data = [];
    var ca = 0;
    var objectif = 0;

    var objectifMax = 100000;
    var toAdd = objectifMax / 31;

    for (var i = 1; i <= 31; i++) {

        objectif = objectif + toAdd;
        ca = Math.round(Math.random() * 100000);

        data.push({ date: new Date(2021, 7, i), open: objectif, close: ca });
    }

    chart.data = data;

    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.renderer.grid.template.location = 0;
    dateAxis.renderer.minGridDistance = 60;

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.tooltip.disabled = true;

    var series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.dateX = "date";
    series.dataFields.openValueY = "open";
    series.dataFields.valueY = "close";
    series.tooltipText = "Objectif: {openValueY.value} \n Chiffre d'affaires: {valueY.value}";
    series.strokeWidth = 3;
    series.stroke = am4core.color("#1bb350");
    series.fill = series.stroke;
    series.fillOpacity = 0.8;
    series.tensionX = 0.77;

    var series2 = chart.series.push(new am4charts.LineSeries());
    series2.dataFields.dateX = "date";
    series2.dataFields.valueY = "open";
    series2.stroke = am4core.color("#7367f0");
    series2.fill = series2.stroke;

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

    // create ranges
    var negativeRange;

    // create ranges
    chart.events.on("datavalidated", function() {
        series.dataItems.each(function(s1DataItem) {
            var s1PreviousDataItem;
            var s2PreviousDataItem;

            var s2DataItem = series2.dataItems.getIndex(s1DataItem.index);

            if (s1DataItem.index > 0) {
                s1PreviousDataItem = series.dataItems.getIndex(s1DataItem.index - 1);
                s2PreviousDataItem = series2.dataItems.getIndex(s1DataItem.index - 1);
            }

            var startTime = am4core.time.round(new Date(s1DataItem.dateX.getTime()), dateAxis.baseInterval.timeUnit, dateAxis.baseInterval.count).getTime();

            // intersections
            if (s1PreviousDataItem && s2PreviousDataItem) {
                var x0 = am4core.time.round(new Date(s1PreviousDataItem.dateX.getTime()), dateAxis.baseInterval.timeUnit, dateAxis.baseInterval.count).getTime() + dateAxis.baseDuration / 2;
                var y01 = s1PreviousDataItem.valueY;
                var y02 = s2PreviousDataItem.valueY;

                var x1 = startTime + dateAxis.baseDuration / 2;
                var y11 = s1DataItem.valueY;
                var y12 = s2DataItem.valueY;

                var intersection = am4core.math.getLineIntersection({ x: x0, y: y01 }, { x: x1, y: y11 }, { x: x0, y: y02 }, { x: x1, y: y12 });

                startTime = Math.round(intersection.x);
            }

            // start range here
            if (s2DataItem.valueY > s1DataItem.valueY) {
                if (!negativeRange) {
                    negativeRange = dateAxis.createSeriesRange(series);
                    negativeRange.date = new Date(startTime);
                    negativeRange.contents.fill = series2.fill;
                    negativeRange.contents.fillOpacity = 0.8;
                }
            } else {
                // if negative range started
                if (negativeRange) {
                    negativeRange.endDate = new Date(startTime);
                }
                negativeRange = undefined;
            }
            // end if last
            if (s1DataItem.index == series.dataItems.length - 1) {
                if (negativeRange) {
                    negativeRange.endDate = new Date(s1DataItem.dateX.getTime() + dateAxis.baseDuration / 2);
                    negativeRange = undefined;
                }
            }
        })
    })
});
<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" style="height: 300px;"><div>



Aucun commentaire:

Enregistrer un commentaire