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

add candlestick dataset options types

Open DaveSkender opened this issue 4 years ago • 0 comments

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:

image

// 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.

DaveSkender avatar Dec 14 '21 05:12 DaveSkender