CandleStick Chart avec des couleurs personnalisées

Voici un exemple de graphique CandleStick.

Nous avons déjà vu les configurations utilisées pour dessiner un graphique dans le chapitre Syntaxe de configuration de Google Charts . Voyons maintenant un exemple de graphique CandleStick.

Configurations

Nous avons utilisé options à la couleur personnalisée de CandleStick Chart.

options = {
   legend:'none', 
   candlestick: {
      fallingColor: { strokeWidth: 2, stroke:'#a52714' }, // red
      risingColor: { strokeWidth: 2, stroke: '#0f9d58' }   // green
   }
};

Exemple

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '';
   type = 'CandlestickChart';
   data = [
      ["Mon", 20, 28, 38, 45],
      ["Tue", 31, 38, 55, 66],
      ["Wed", 50, 55, 77, 80],
      ["Thu", 77, 77, 66, 50],
      ["Fri", 68, 66, 22, 15]
   ];
   columnNames = ['Date', 'A','B','C','D'];
   options = {
      legend:'none', 
      candlestick: {
         fallingColor: { strokeWidth: 2, stroke:'#a52714' }, // red
         risingColor: { strokeWidth: 2, stroke: '#0f9d58' }   // green
      }
   };
   width = 550;
   height = 400;
}

Résultat

Vérifiez le résultat.