Graphique Charts js avec barre verticale

**micakel_53** · 03/12/2020, 12h30

Bonjour à tous,

Tout d'abord désoler si je ne suis pas dans la bonne section.

J'utilise Chart.js pour faire des graphiques.

J'ai un graphique avec trois séries de données ; minimum, moyenne et maximum et jusque là pas de soucis.

voici le code :

Code :

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
 
 
                var ctx =document.getElementById('GraphPoids').getContext('2d');
 
var myChart = new Chart(ctx,{
    type:'line',
    data:{
            labels:ArrLabelSaison,
            datasets:[{
                label:"Poids minimum",
                pointStyle:'line',
                showLine : false,
                radius:'10',
                data:dataMin,
                backgroundColor:'rgba(0,0,0,0)',
                borderColor:'rgba(53,53,53,0.5)',
                fill:false,
                lineTension : 0
            },{
                label:"Poids moyen",
                pointStyle:'crossRot',
                radius:'10',
                data:dataMoy,
                backgroundColor:'rgba(0,0,0,0)',
                borderColor:'rgba(0,0,255,0.5)',
                fill:false,
                lineTension : 0
            },{
                label:"Poids maximun",
                pointStyle:'line',
                showLine : false,
                radius:'10',
                data:dataMax,
                backgroundColor:'rgba(0,0,0,0)',
                borderColor:'rgba(26,188,156,0.5)',
                fill:false,
                lineTension : 0
 
 
            }
 
            ]
        },
    options:{
 
            responsive: true,
            title: {
                    display: true,
                    text: 'Evolution du poids'
                    },
            tooltips: {
                        mode: 'index'
                        },
            scales: {
                        xAxes: [{
                                    display: true,
                                    scaleLabel: {
                                                    display: true
                                                }
                                }],
                        yAxes: [{
                                    display: true,
                                    scaleLabel: {
                                                    display: true,
                                                    labelString: 'Poids en kg'
                                                },
                                    //ticks: {
                                                //suggestedMin: -10,
                                                //suggestedMax: 200,
                                            //}
                                }]
                    },
            legend : {
                        display : true
                    },
 
 
            }
});

Maintenant j'aimerai pouvoir relier les points minimum et maximum par une barre verticale mais je ne trouve pas de solution.
Si quelqu'un peut me donner un coup de main, je suis preneur.
Merci à tous et bon courage !

**NoSmoking** · 04/12/2020, 08h00

Bonjour,
ChartJS et simple mais pas très configurable, cependant tu peux regarder du côté du plugin : Chart.js Error Bars qui devrait te permettre de faire ce que tu souhiates.

**micakel_53** · 04/12/2020, 08h46

Ok je vais regardé ça et je vous tiens au courant. Je n'ai jamais utilisé de plugin mais je vais essayer d'en trouver le fonctionnement.
Encore merci pour votre réactivité !

**micakel_53** · 08/12/2020, 10h00

Bonjour,
Le plugin Chart.js Error Bars semble correspondre à mes attentes. Mais après plusieurs essais je n'arrive pas à l'utiliser ce plugin. Est ce que quelqu'un pourrait m'expliquer la démarche à suivre pour incorporer ce plugin à ma page ?
Merci à vous tous.