Skip to content
This repository was archived by the owner on Nov 25, 2021. It is now read-only.

Commit dc97b4c

Browse files
author
Luke Lowrey
committed
Added a medianColor so that if the box and whiskers are the same color, then we can distinguish the median line from the background
1 parent 0e4a7be commit dc97b4c

File tree

3 files changed

+62
-47
lines changed

3 files changed

+62
-47
lines changed

‎src/controllers/base.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const array = {
2727
const options = this._elementOptions();
2828

2929
Chart.controllers.bar.prototype.updateElement.call(this, elem, index, reset);
30-
['outlierRadius', 'itemRadius', 'itemStyle', 'itemBackgroundColor', 'itemBorderColor', 'outlierColor', 'hitPadding'].forEach((item) => {
30+
['outlierRadius', 'itemRadius', 'itemStyle', 'itemBackgroundColor', 'itemBorderColor', 'outlierColor', 'medianColor', 'hitPadding'].forEach((item) => {
3131
elem._model[item] = custom[item] !== undefined ? custom[item] : Chart.helpers.valueAtIndexOrDefault(dataset[item], index, options[item]);
3232
});
3333
},

‎src/elements/base.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const defaults = {
88
borderWidth: 1,
99
outlierRadius: 2,
1010
outlierColor: Chart.defaults.global.elements.rectangle.backgroundColor,
11+
medianColor: Chart.defaults.global.elements.rectangle.borderColor,
1112
itemRadius: 0,
1213
itemStyle: 'circle',
1314
itemBackgroundColor: Chart.defaults.global.elements.rectangle.backgroundColor,

‎src/elements/boxandwhiskers.js‎

Lines changed: 60 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -75,56 +75,70 @@ const BoxAndWiskers = Chart.elements.BoxAndWhiskers = ArrayElementBase.extend({
7575
},
7676
_drawBoxPlot(vm, boxplot, ctx, vert) {
7777
if (vert) {
78-
const x = vm.x;
79-
const width = vm.width;
80-
const x0 = x - width / 2;
81-
if (boxplot.q3 > boxplot.q1) {
82-
ctx.fillRect(x0, boxplot.q1, width, boxplot.q3 - boxplot.q1);
83-
ctx.strokeRect(x0, boxplot.q1, width, boxplot.q3 - boxplot.q1);
84-
} else {
85-
ctx.fillRect(x0, boxplot.q3, width, boxplot.q1 - boxplot.q3);
86-
ctx.strokeRect(x0, boxplot.q3, width, boxplot.q1 - boxplot.q3);
87-
}
88-
ctx.beginPath();
89-
ctx.moveTo(x0, boxplot.whiskerMin);
90-
ctx.lineTo(x0 + width, boxplot.whiskerMin);
91-
ctx.moveTo(x, boxplot.whiskerMin);
92-
ctx.lineTo(x, boxplot.q1);
93-
ctx.moveTo(x0, boxplot.whiskerMax);
94-
ctx.lineTo(x0 + width, boxplot.whiskerMax);
95-
ctx.moveTo(x, boxplot.whiskerMax);
96-
ctx.lineTo(x, boxplot.q3);
97-
ctx.moveTo(x0, boxplot.median);
98-
ctx.lineTo(x0 + width, boxplot.median);
99-
ctx.closePath();
100-
ctx.stroke();
78+
this._drawBoxPlotVert(vm, boxplot, ctx);
10179
} else {
102-
const y = vm.y;
103-
const height = vm.height;
104-
const y0 = y - height / 2;
105-
if (boxplot.q3 > boxplot.q1) {
106-
ctx.fillRect(boxplot.q1, y0, boxplot.q3 - boxplot.q1, height);
107-
ctx.strokeRect(boxplot.q1, y0, boxplot.q3 - boxplot.q1, height);
108-
} else {
109-
ctx.fillRect(boxplot.q3, y0, boxplot.q1 - boxplot.q3, height);
110-
ctx.strokeRect(boxplot.q3, y0, boxplot.q1 - boxplot.q3, height);
111-
}
112-
ctx.beginPath();
113-
ctx.moveTo(boxplot.whiskerMin, y0);
114-
ctx.lineTo(boxplot.whiskerMin, y0 + height);
115-
ctx.moveTo(boxplot.whiskerMin, y);
116-
ctx.lineTo(boxplot.q1, y);
117-
ctx.moveTo(boxplot.whiskerMax, y0);
118-
ctx.lineTo(boxplot.whiskerMax, y0 + height);
119-
ctx.moveTo(boxplot.whiskerMax, y);
120-
ctx.lineTo(boxplot.q3, y);
121-
ctx.moveTo(boxplot.median, y0);
122-
ctx.lineTo(boxplot.median, y0 + height);
123-
ctx.closePath();
124-
ctx.stroke();
80+
this._drawBoxPlotHoriz(vm, boxplot, ctx);
12581
}
12682

12783
},
84+
_drawBoxPlotVert(vm, boxplot, ctx) {
85+
const x = vm.x;
86+
const width = vm.width;
87+
const x0 = x - width / 2;
88+
if (boxplot.q3 > boxplot.q1) {
89+
ctx.fillRect(x0, boxplot.q1, width, boxplot.q3 - boxplot.q1);
90+
ctx.strokeRect(x0, boxplot.q1, width, boxplot.q3 - boxplot.q1);
91+
} else {
92+
ctx.fillRect(x0, boxplot.q3, width, boxplot.q1 - boxplot.q3);
93+
ctx.strokeRect(x0, boxplot.q3, width, boxplot.q1 - boxplot.q3);
94+
}
95+
ctx.beginPath();
96+
ctx.moveTo(x0, boxplot.whiskerMin);
97+
ctx.lineTo(x0 + width, boxplot.whiskerMin);
98+
ctx.moveTo(x, boxplot.whiskerMin);
99+
ctx.lineTo(x, boxplot.q1);
100+
ctx.moveTo(x0, boxplot.whiskerMax);
101+
ctx.lineTo(x0 + width, boxplot.whiskerMax);
102+
ctx.moveTo(x, boxplot.whiskerMax);
103+
ctx.lineTo(x, boxplot.q3);
104+
ctx.closePath();
105+
ctx.stroke();
106+
ctx.strokeStyle = vm.medianColor;
107+
ctx.beginPath();
108+
ctx.moveTo(x0, boxplot.median);
109+
ctx.lineTo(x0 + width, boxplot.median);
110+
ctx.closePath();
111+
ctx.stroke();
112+
},
113+
_drawBoxPlotHoriz(vm, boxplot, ctx) {
114+
const y = vm.y;
115+
const height = vm.height;
116+
const y0 = y - height / 2;
117+
if (boxplot.q3 > boxplot.q1) {
118+
ctx.fillRect(boxplot.q1, y0, boxplot.q3 - boxplot.q1, height);
119+
ctx.strokeRect(boxplot.q1, y0, boxplot.q3 - boxplot.q1, height);
120+
} else {
121+
ctx.fillRect(boxplot.q3, y0, boxplot.q1 - boxplot.q3, height);
122+
ctx.strokeRect(boxplot.q3, y0, boxplot.q1 - boxplot.q3, height);
123+
}
124+
ctx.beginPath();
125+
ctx.moveTo(boxplot.whiskerMin, y0);
126+
ctx.lineTo(boxplot.whiskerMin, y0 + height);
127+
ctx.moveTo(boxplot.whiskerMin, y);
128+
ctx.lineTo(boxplot.q1, y);
129+
ctx.moveTo(boxplot.whiskerMax, y0);
130+
ctx.lineTo(boxplot.whiskerMax, y0 + height);
131+
ctx.moveTo(boxplot.whiskerMax, y);
132+
ctx.lineTo(boxplot.q3, y);
133+
ctx.closePath();
134+
ctx.stroke();
135+
ctx.strokeStyle = vm.medianColor;
136+
ctx.beginPath();
137+
ctx.moveTo(boxplot.median, y0);
138+
ctx.lineTo(boxplot.median, y0 + height);
139+
ctx.closePath();
140+
ctx.stroke();
141+
},
128142
_getBounds() {
129143
const vm = this._view;
130144

0 commit comments

Comments
 (0)