Candle border options

[DaveSkender]

Enhancement recommendation: on a chart with many candles, I would like the red and green colors to be prevalent. With excess bars, the colors completely disappear. Recommend either 1) have border options, or 2) default to borderless candles where wicks, border, and body are one color.

Current:

Preferred:

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