Bonjour à tous
J'essai de construire un graphique à partir de données provenant d'une requête SQL. Il s'agit d'un graphique mixte (linéaire et barre).
Tout se passe bien et mon graphique s'affiche correctement, sauf que je souhaiterai changer la couleur des barres en fonction des valeurs de la série concernée.

Par exemple, je souhaiterai que la barre passe rouge si la valeur de la barre est supérieure a la valeur de max de la même série.

Je n'arrive pas à le faire, les réponses que je trouve font référence à des graphique simple et non combiné comme dans mon cas. Je me tourne donc vers vous.

Ci dessous mon code :
Code jquery : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
function mychart(test) {
    var ops = [];
    var serie = [];
    var min = [];
	var max = [];
 
	for (var i in test) {
		ops.push(test[i].ops);
        serie.push(test[i].serie);
        min.push(test[i].min);
        max.push(test[i].max);
    }
 
	var chartdata = {
		labels: ops,
		datasets: [
			{
				type: 'line',
				label: 'Min',
				yAxisID: 'A',
				backgroundColor: "rgb(255, 0, 0)",
				borderColor: "rgb(255, 0, 0)",
				data: min //la valeur mini a comparer avec la valeur de serie
			}, {
				type: 'line',
				label: 'Max',
				yAxisID: 'A',
				backgroundColor: "rgb(255, 255, 0)",
				borderColor: "rgb(255, 255, 0)",
				data: max //la valeur maxi a comparer avec la valeur de serie
			}, {
				type: 'bar',
				label: 'Serie',
				yAxisID: 'A',
				backgroundColor: "rgb(0, 0, 255)", // changer couleur si valeur serie inferieure ou superieur a maxi
				data: serie //la valeur serie a comparer avec les valeurs mini et maxi
			}
		]
    };
    rendertest(chartdata);
}
 
function rendertest(chartdata) {
	var delayed;
    var ctx = document.getElementById("charttest").getContext('2d');
    window.myCharta = new Chart(ctx, {
		type: 'bar',
		data: chartdata,
		options: {
			responsive: true,
			plugins: {
				legend: {
                    display: true,
                    position: 'bottom',
                },
				title: {
					display: true,
					position: 'top',
					align: "start",
					text: 'Graphique test',
					font: {
						size: 20,
						family : 'sans-serif',
						color: "#666",
						weight: "normal"
					}
				},
			},
			animation: {
				onComplete: () => {
					delayed = true;
				},
				delay: (context) => {
					let delay = 0;
					if (context.type === 'data' && context.mode === 'default' && !delayed) {
						delay = context.dataIndex * 300 + context.datasetIndex * 100;
					}
					return delay;
				},
			},
			maintainAspectRatio: true
		}
	});
}

Merci d'avance pour votre aide

Cordialement