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