Dessiner des bordures sur la ligne chartjs

Question

J'utilise ChartJS pour créer un graphique linéaire avec des éléments. Je me demande s'il est possible de définir des bordures à gauche et à droite d'un élément? Ceci est mon tableau et il devient confus si vous avez deux éléments l'un à côté de l'autre et ils ont la même couleur.

Je n'ai rien trouvé dans la documentation qui prend en charge, donc je comprendre que je dois dessiner moi-même en utilisant js mais j'espérais que quelqu'un avait d'abord une solution :)
Dans le cas où je dois dessiner moi-même je rencontrerais un problème puisque chaque élément peut avoir des largeurs différentes en raison de l'axe des temps (X). Quelle serait votre idée pour résoudre cela?

Mise à jour

Chaque élément du tableau est un nouveau jeu de données et obtient un objet dégradé comme backgroundColor et remplir des ensembles comme vrai. Voici un exemple de me pousser un nouvel ensemble de données dans le tableau

chart.data.datasets.push({ 
 
       fill: true, 
 
       backgroundColor: gradient, 
 
       data: [ 
 
       { 
 
        x: aIstartX, 
 
        y: yAxis_value, 
 
        .. Other attributes 
 
       }, 
 
       { 
 
        x: newEntryXend, 
 
        y: yAxis_value, 
 
        ..Other attributes 
 
       }] 
 
      });

xAxes: [ 
 
         { 
 
          stacked: false, 
 
          type: 'time', 
 
          unit: 'minute', 
 
          position: 'bottom', 
 
          scaleLabel: { 
 
           display: true 
 
          }, 
 
          time: { 
 
           displayFormats: { 
 
            'minute': 'mm:ss' 
 
           } 
 
          }, 
 
          ticks: { 
 
           autoSkip: true, 
 
           beginAtZero: true, 
 
           stepSize: 2, 
 
           autoSkipPadding: 5, 
 
           padding: 10, 
 
           labelOffset: 5, 
 
          }, 
 
          gridLines: { 
 
           display: false, 
 
           tickMarkLength: 20 
 
          }, 
 
         } 
 
         ]

Voici un violon de ma question

https://jsfiddle.net/fa8hvhtv/1/

Answer 1

J'ai trouvé une solution à mon problème. Le problème était que j'essayais de créer un espace entre mes jeux de données et mon attribut de données Y ne démarre pas et se termine à 0. J'ai donc ajouté deux points de données supplémentaires dans chaque jeu de données avec un borderWidth de 3 et borderColor correspondant à backgroundColor du graphique. Chaque point de donnée ajouté aura un Y avec la valeur 0. Un exemple d'ajout d'un jeu de données à mon graphique est ci-dessous.

chart.data.datasets.push({ 
      fill: true, 
      backgroundColor: gradient, 
      borderWidth: 3, 
      borderColor: '#333', 
      data: [ 
      { 
       x: startXvalue, 
       y: 0 
      }, 
      { 
       x: startXvalue, 
       y: startY, 
       .. Other attributes 
      }, 
      { 
       x: newEntryXend, 
       y: endY, 
       .. Other attributes 
      }, 
      { 
       x: newEntryXend, 
       y : 0 
      }] 
     }); 

Answer 2

Toute raison pour laquelle vous pouvez voulu garder les mêmes couleurs de fond pour,

Pourquoi ne puis vous essayez comme ci-dessous

Demo

fill: true, 
backgroundColor: 'red',