Candle border options about chartjs-chart-financial

[camheras]

You can already do something like that 😅

var defaultOpts = Chart.defaults.elements["candlestick"];
var chart = new Chart(ctx, {
	type: 'candlestick',
	data: {
		datasets: [{
			label: 'CHRT - Chart.js Corporation',
			data: barData,
			borderColor :{
				up: defaultOpts.color.up,
				down: defaultOpts.color.down,
				unchanged: defaultOpts.color.up
			}
		}]
	}})

[DaveSkender]

This probably works fine in straight JavaScript, but it's choking on the custom candlestick dataset type in Angular/Typescript.

var defaultOpts = Chart.defaults.elements["candlestick"];

myConfig.data = {
  datasets: [
    {
      type: 'candlestick',
      label: 'Price',
      data: price,
      borderColor: {
        up: defaultOpts.color.up,
        down: defaultOpts.color.down,
        unchanged: defaultOpts.color.up
      },
      yAxisID: 'yAxis'
    }
  ]
};

 node_modules/chart.js/types/index.esm.d.ts:1653:3
    1653   borderColor: Color;
           ~~~~~~~~~~~
The expected type comes from property 'borderColor' which is declared here on 
type 'ChartDataset<keyof ChartTypeRegistry, 
(number | ScatterDataPoint | BubbleDataPoint | FinancialDataPoint)[]>' 

[DaveSkender]

WORKAROUND: for anyone using TypeScript, here's how I solved it:

// add new dataset options type for borderColor
type CandlestickDatasetOptions = BarControllerDatasetOptions & {
    borderColor: {
        up: string,
        down: string,
        unchanged: string
    };
}

// custom border colors
const candleOptions = Chart.defaults.elements["candlestick"];

// sets body color defaults
candleOptions.color.up = 'darkGreen';
candleOptions.color.down = 'darkRed';
candleOptions.color.unchanged = '#555555';

// define border and wicks color
// this should set the default, but still have to reapply in dataset (below)
candleOptions.borderColor = {
  up: candleOptions.color.up,
  down: candleOptions.color.down,
  unchanged: candleOptions.color.unchanged
};

// define base datasets
chartConfig.data = {
  datasets: [
    {
      type: 'candlestick',
      label: 'Price',
      data: price,
      yAxisID: 'yAxis',
      borderColor: candleOptions.borderColor // sets border and wicks color
    }
  ]
};

See PR (#115) for my suggestion on how to fix and use this in the main package.