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

Commit 2de711c

Browse files
sgratzlsgratzl
authored
Merge pull request #30 from Wol/median-colour
Ability to configure a color for the median line
2 parents 0e4a7be + 8cc9334 commit 2de711c

File tree

4 files changed

+96
-47
lines changed

4 files changed

+96
-47
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ interface IBaseStyling {
3434
* @default see rectangle
3535
*/
3636
strokeColor: string;
37+
/**
38+
* @default null takes the current strokeColor
39+
*/
40+
medianColor: string;
3741
/**
3842
* @default 1
3943
*/

‎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: null,
1112
itemRadius: 0,
1213
itemStyle: 'circle',
1314
itemBackgroundColor: Chart.defaults.global.elements.rectangle.backgroundColor,

‎src/elements/boxandwhiskers.js‎

Lines changed: 90 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -75,55 +75,99 @@ 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);
81+
}
82+
83+
},
84+
_drawBoxPlotVert(vm, boxplot, ctx) {
85+
const x = vm.x;
86+
const width = vm.width;
87+
const x0 = x - width / 2;
88+
89+
// Draw the q1>q3 box
90+
if (boxplot.q3 > boxplot.q1) {
91+
ctx.fillRect(x0, boxplot.q1, width, boxplot.q3 - boxplot.q1);
92+
} else {
93+
ctx.fillRect(x0, boxplot.q3, width, boxplot.q1 - boxplot.q3);
94+
}
95+
96+
// Draw the median line
97+
ctx.save();
98+
if (vm.medianColor) {
99+
ctx.strokeStyle = vm.medianColor;
100+
}
101+
ctx.beginPath();
102+
ctx.moveTo(x0, boxplot.median);
103+
ctx.lineTo(x0 + width, boxplot.median);
104+
ctx.closePath();
105+
ctx.stroke();
106+
ctx.restore();
107+
108+
// Draw the border around the main q1>q3 box
109+
if (boxplot.q3 > boxplot.q1) {
110+
ctx.strokeRect(x0, boxplot.q1, width, boxplot.q3 - boxplot.q1);
111+
} else {
112+
ctx.strokeRect(x0, boxplot.q3, width, boxplot.q1 - boxplot.q3);
113+
}
114+
115+
// Draw the whiskers
116+
ctx.beginPath();
117+
ctx.moveTo(x0, boxplot.whiskerMin);
118+
ctx.lineTo(x0 + width, boxplot.whiskerMin);
119+
ctx.moveTo(x, boxplot.whiskerMin);
120+
ctx.lineTo(x, boxplot.q1);
121+
ctx.moveTo(x0, boxplot.whiskerMax);
122+
ctx.lineTo(x0 + width, boxplot.whiskerMax);
123+
ctx.moveTo(x, boxplot.whiskerMax);
124+
ctx.lineTo(x, boxplot.q3);
125+
ctx.closePath();
126+
ctx.stroke();
127+
},
128+
_drawBoxPlotHoriz(vm, boxplot, ctx) {
129+
const y = vm.y;
130+
const height = vm.height;
131+
const y0 = y - height / 2;
132+
133+
// Draw the q1>q3 box
134+
if (boxplot.q3 > boxplot.q1) {
135+
ctx.fillRect(boxplot.q1, y0, boxplot.q3 - boxplot.q1, height);
136+
} else {
137+
ctx.fillRect(boxplot.q3, y0, boxplot.q1 - boxplot.q3, height);
138+
}
139+
140+
// Draw the median line
141+
ctx.save();
142+
if (vm.medianColor) {
143+
ctx.strokeStyle = vm.medianColor;
144+
}
145+
ctx.beginPath();
146+
ctx.moveTo(boxplot.median, y0);
147+
ctx.lineTo(boxplot.median, y0 + height);
148+
ctx.closePath();
149+
ctx.stroke();
150+
ctx.restore();
151+
152+
// Draw the border around the main q1>q3 box
153+
if (boxplot.q3 > boxplot.q1) {
154+
ctx.strokeRect(boxplot.q1, y0, boxplot.q3 - boxplot.q1, height);
155+
} else {
156+
ctx.strokeRect(boxplot.q3, y0, boxplot.q1 - boxplot.q3, height);
125157
}
126158

159+
// Draw the whiskers
160+
ctx.beginPath();
161+
ctx.moveTo(boxplot.whiskerMin, y0);
162+
ctx.lineTo(boxplot.whiskerMin, y0 + height);
163+
ctx.moveTo(boxplot.whiskerMin, y);
164+
ctx.lineTo(boxplot.q1, y);
165+
ctx.moveTo(boxplot.whiskerMax, y0);
166+
ctx.lineTo(boxplot.whiskerMax, y0 + height);
167+
ctx.moveTo(boxplot.whiskerMax, y);
168+
ctx.lineTo(boxplot.q3, y);
169+
ctx.closePath();
170+
ctx.stroke();
127171
},
128172
_getBounds() {
129173
const vm = this._view;

0 commit comments

Comments
 (0)