Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to change candle stick color? #142

Open
superdavid0816 opened this issue Feb 2, 2023 · 3 comments
Open

How to change candle stick color? #142

superdavid0816 opened this issue Feb 2, 2023 · 3 comments

Comments

@superdavid0816
Copy link

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

I read these articles.
#114
#115
#37

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

I notice that these articles use chart.js@2.7.3 and chart.js@2.7.4

Today the chart.js is chart.sj@4.2.0

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

Thank you.

@joeuhren
Copy link

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)'
      }
    }]
  }
});

@TiagoPaulino
Copy link

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.

@yakiang
Copy link

yakiang commented Jul 4, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants