From e834e9f5ac3bd84bd9427bea46aa8764174468ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alvaro=20Cabrera=20Dur=C3=A1n?= Date: Mon, 28 May 2018 23:51:17 -0500 Subject: [PATCH 1/2] Allow borderColor to be customized through border options --- src/controller.candlestick.js | 1 + src/element.candlestick.js | 15 +++++++++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/controller.candlestick.js b/src/controller.candlestick.js index cf2ad4c..d36bd76 100644 --- a/src/controller.candlestick.js +++ b/src/controller.candlestick.js @@ -27,6 +27,7 @@ module.exports = function(Chart) { // Appearance color: dataset.color, + border: dataset.border, borderColor: dataset.borderColor, borderWidth: dataset.borderWidth, }; diff --git a/src/element.candlestick.js b/src/element.candlestick.js index 402f9de..ce7d5aa 100644 --- a/src/element.candlestick.js +++ b/src/element.candlestick.js @@ -6,6 +6,11 @@ module.exports = function(Chart) { var globalOpts = Chart.defaults.global; globalOpts.elements.candlestick = Object.assign(globalOpts.elements.financial, { + border: { + up: globalOpts.elements.financial.color.up, + down: globalOpts.elements.financial.color.down, + unchanged: globalOpts.elements.financial.color.unchanged + }, borderColor: globalOpts.elements.financial.color.unchanged, borderWidth: 1, }); @@ -21,16 +26,22 @@ module.exports = function(Chart) { var l = vm.candleLow; var c = vm.candleClose; - ctx.strokeStyle = helpers.getValueOrDefault(vm.borderColor, globalOpts.elements.candlestick.borderColor); - ctx.lineWidth = helpers.getValueOrDefault(vm.borderWidth, globalOpts.elements.candlestick.borderWidth); + var borderColor; + if (c < o) { + borderColor = helpers.getValueOrDefault(vm.border ? vm.border.up : undefined, globalOpts.elements.candlestick.border.up); ctx.fillStyle = helpers.getValueOrDefault(vm.color ? vm.color.up : undefined, globalOpts.elements.candlestick.color.up); } else if (c > o) { + borderColor = helpers.getValueOrDefault(vm.border ? vm.border.down : undefined, globalOpts.elements.candlestick.border.down); ctx.fillStyle = helpers.getValueOrDefault(vm.color ? vm.color.down : undefined, globalOpts.elements.candlestick.color.down); } else { + borderColor = helpers.getValueOrDefault(vm.border ? vm.border.unchanged : undefined, globalOpts.elements.candlestick.border.unchanged); ctx.fillStyle = helpers.getValueOrDefault(vm.color ? vm.color.unchanged : undefined, globalOpts.elements.candlestick.color.unchanged); } + ctx.lineWidth = helpers.getValueOrDefault(vm.borderWidth, globalOpts.elements.candlestick.borderWidth); + ctx.strokeStyle = helpers.getValueOrDefault(borderColor, globalOpts.elements.candlestick.borderColor); + ctx.beginPath(); ctx.moveTo(x, h); ctx.lineTo(x, Math.min(o, c)); From fec2672249c0ab11dee0ae5a457efd6ba939198c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alvaro=20Cabrera=20Dur=C3=A1n?= Date: Thu, 14 Jun 2018 08:33:25 -0500 Subject: [PATCH 2/2] Setup borderColor as an object; fix --- src/controller.candlestick.js | 1 - src/element.candlestick.js | 21 +++++++++++++-------- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/controller.candlestick.js b/src/controller.candlestick.js index d36bd76..cf2ad4c 100644 --- a/src/controller.candlestick.js +++ b/src/controller.candlestick.js @@ -27,7 +27,6 @@ module.exports = function(Chart) { // Appearance color: dataset.color, - border: dataset.border, borderColor: dataset.borderColor, borderWidth: dataset.borderWidth, }; diff --git a/src/element.candlestick.js b/src/element.candlestick.js index ce7d5aa..8fdf7ba 100644 --- a/src/element.candlestick.js +++ b/src/element.candlestick.js @@ -6,11 +6,6 @@ module.exports = function(Chart) { var globalOpts = Chart.defaults.global; globalOpts.elements.candlestick = Object.assign(globalOpts.elements.financial, { - border: { - up: globalOpts.elements.financial.color.up, - down: globalOpts.elements.financial.color.down, - unchanged: globalOpts.elements.financial.color.unchanged - }, borderColor: globalOpts.elements.financial.color.unchanged, borderWidth: 1, }); @@ -26,16 +21,26 @@ module.exports = function(Chart) { var l = vm.candleLow; var c = vm.candleClose; + var borderColors = vm.borderColor; + + if (typeof borderColors === 'string') { + borderColors = { + up: borderColors, + down: borderColors, + unchanged: borderColors + }; + } + var borderColor; if (c < o) { - borderColor = helpers.getValueOrDefault(vm.border ? vm.border.up : undefined, globalOpts.elements.candlestick.border.up); + borderColor = helpers.getValueOrDefault(borderColors ? borderColors.up : undefined, globalOpts.elements.candlestick.color.up); ctx.fillStyle = helpers.getValueOrDefault(vm.color ? vm.color.up : undefined, globalOpts.elements.candlestick.color.up); } else if (c > o) { - borderColor = helpers.getValueOrDefault(vm.border ? vm.border.down : undefined, globalOpts.elements.candlestick.border.down); + borderColor = helpers.getValueOrDefault(borderColors ? borderColors.down : undefined, globalOpts.elements.candlestick.color.down); ctx.fillStyle = helpers.getValueOrDefault(vm.color ? vm.color.down : undefined, globalOpts.elements.candlestick.color.down); } else { - borderColor = helpers.getValueOrDefault(vm.border ? vm.border.unchanged : undefined, globalOpts.elements.candlestick.border.unchanged); + borderColor = helpers.getValueOrDefault(borderColors ? borderColors.unchanged : undefined, globalOpts.elements.candlestick.color.unchanged); ctx.fillStyle = helpers.getValueOrDefault(vm.color ? vm.color.unchanged : undefined, globalOpts.elements.candlestick.color.unchanged); }