chartjs-chart-financial icon indicating copy to clipboard operation
chartjs-chart-financial copied to clipboard

How to change candle stick color?

Open superdavid0816 opened this issue 2 years ago • 5 comments

Hi, I want to change the candle stick color by up in red and down in green.

I read these articles. https://github.com/chartjs/chartjs-chart-financial/issues/114 https://github.com/chartjs/chartjs-chart-financial/pull/115 https://github.com/chartjs/chartjs-chart-financial/pull/37

I can not change the candle stick color by the ways these articles suggest.

I notice that these articles use [email protected] and [email protected]

Today the chart.js is [email protected]

How do I change the candle stick color by up in red and down in green?

Thank you.

superdavid0816 avatar Feb 02 '23 09:02 superdavid0816

Here's a working sample of reversing the up and down candle colors: jsfiddle

You can use whatever colors you want for the up, down or unchanged candles by specifying the color property like this:

var chart = new Chart(ctx, {
  type: 'candlestick',
  data: {
    datasets: [{
      label: 'CHRT - Chart.js Corporation',
      data: barData,
      color: {
        up: 'rgba(215, 85, 65, 1)',
        down: 'rgba(80, 160, 115, 1)',
        unchanged: 'rgba(90, 90, 90, 1)'
      }
    }]
  }
});

joeuhren avatar Oct 10 '23 00:10 joeuhren

You can change the background of the candles by modifying the 'backgroundColors' parameter as shown in the code below:

const data = {
    datasets: [
      {
        label: 'Candlestick Dataset',
        data: stock,
        borderColor: 'rgba(0, 0, 0, 1)',
        borderWidth: 1,
        backgroundColors: {
          up: 'rgba(252, 34, 0, 1)',
          down: 'rgba(0, 194, 84, 1)',
          unchanged: 'rgba(143, 143, 143, 1)'
        }
      }
    ]
  };

The value must be a string.

TiagoPaulino avatar Jun 13 '24 12:06 TiagoPaulino

What if I want to highlight a single candle, making it a yellow one among reds and greens.

yakiang avatar Jul 04 '24 02:07 yakiang