chartjs / chartjs-chart-financial

Chart.js module for charting financial securities
MIT License
720 stars 195 forks source link

add candlestick dataset options types #153

Closed DaveSkender closed 4 months ago

DaveSkender commented 4 months ago

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.

@santam85 this replaces #115