add candlestick dataset options types

[DaveSkender]

• [x] Tick to sign-off your agreement to the Developer Certificate of Origin (DCO) 1.1

Description

Fixes #114

Adding custom CandlestickControllerDatasetOptions typings to replace use of BarControllerDatasetOptions to allow for unique borderColor type:

borderColor: {
  up: string,
  down: string,
  unchanged: string
};

This will allow the configuration of bar color properties in Typescript/Angular sites where typings are needed. For example:

// sample usage

let candleOptions = Chart.defaults.elements["candlestick"];

// sets body color
candleOptions.color.up = 'blue';
candleOptions.color.down = 'orange';

myConfig.data = {
  datasets: [
    {
      type: 'candlestick',
      label: 'Price',
      data: price,
      borderColor: {  // set border and wicks color
        up: candleOptions.color.up,
        down: candleOptions.color.down,
        unchanged: candleOptions.color.unchanged
      },
      yAxisID: 'yAxis'
    }
  ]
};

Additional comments

I'm not a JS expert, so please treat this as a suggestion. There may be a better way to handle it. This approach seems to be a bit of a hack. I have two other suggestions here:

1. Make this the default so you'd only need to provide borderColor if you wanted a consistently colored border.

   borderColor: {
     up: candleOptions.color.up,
     down: candleOptions.color.down,
     unchanged: candleOptions.color.unchanged
   }

2. Allow use of backgroundColor in a similar up/down/unchanged format. Overriding Chart.defaults.elements["candlestick"] as shown in my example (above) is less intuitive.

[superdavid0816]

Hi,

I read your 2 articles about candle stick color. "add candlestick dataset options types #115" "Candle border options #114"

my library is Chart.js and ng2-chart and Chart.js Financial Charting

I just installed these package in these days.

sample page if from here: https://valor-software.com/ng2-charts/#FinancialChart

I try to follow your step to create my color in candle stick. I paste this line and get error.

const candleOptions = Chart.defaults.elements["candlestick"];

error: Property 'candlestick' does not exist on type 'ElementOptionsByType'.ts(7053)

I think that might be caused by version of the package.

Do you know how to fix this?

I saw you can make the candle into orange and blue. That's great. I want to change my candle color.

Thank you.

[DaveSkender]

@superdavid0816 my last entry on 12/30/2021 in #114 has the workaround that I used to get it to compile correctly with the missing typings.

You can also see the code for this demo charting site to see it fully implemented.

Your probably missing an import, in addition to the workaround:

// extensions
import {
  CandlestickController,
  CandlestickElement,
  OhlcController,
  OhlcElement
} from 'chartjs-chart-financial';

…

Chart.register(
  CandlestickController,
  OhlcController,
  CandlestickElement,
  OhlcElement);

This maybe harder to fix if you’re using the ng2-chart wrapper.

[superdavid0816]

@DaveSkender Your program is amazing! Thanks for your code. I will read it line by line. Thank you very much.

[Kharabet]

@DaveSkender why did you close this PR?

[DaveSkender]

@DaveSkender why did you close this PR?

Deleting my fork auto-closed it. It wasn’t purely intentional, I suspect I was just cleaning out my old forks. This was sitting idle for a long time. Happy to redo the fork if the maintainer plans to merge it.

[Kharabet]

@etimberg whom we should ping to take a look at the above issue?

[Kharabet]

cc @benmccann ^

[etimberg]

@Kharabet either @santam85 or @benmccann as they were the maintainers of this

[santam85]

@Kharabet @DaveSkender sorry missed this completely, happy to merge this definitely needed improvement, hopefully the release pipeline still works 🤞

[DaveSkender]

@Kharabet @DaveSkender sorry missed this completely, happy to merge this definitely needed improvement, hopefully the release pipeline still works 🤞

Cool. I've put in a GitHub ticket to restore my fork, but will otherwise recreate this PR if that approach fails. May take a few days.