Skip to content

Commit e8c58da

Browse files
authored
Enable scale title stroke (12092) (#12130)
* Enable text stroke on scale titles * update documentation * specify stroke width units * Simplify usage of strokeColor and strokeWidth * Add scale title stroke test * Enable text stroke on scale titles * update documentation * specify stroke width units * Simplify usage of strokeColor and strokeWidth * Add scale title stroke test * Implement non image based tests * Remove image based test
1 parent 2bbb96c commit e8c58da

File tree

5 files changed

+89
-0
lines changed

5 files changed

+89
-0
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ docs/.vuepress/dist
2626
.project
2727
.settings
2828
.vscode
29+
.zed
2930
*.log
3031
*.swp
3132
*.stackdump

docs/axes/labelling.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ Namespace: `options.scales[scaleId].title`, it defines options for the scale tit
1212
| `align` | `string` | `'center'` | Alignment of the axis title. Possible options are `'start'`, `'center'` and `'end'`
1313
| `text` | `string`\|`string[]` | `''` | The text for the title. (i.e. "# of People" or "Response Choices").
1414
| `color` | [`Color`](../general/colors.md) | `Chart.defaults.color` | Color of label.
15+
| `strokeColor` | [`Color`](../general/colors.md) | | Color of text stroke.
16+
| `strokeWidth` | `number` | | Size of stroke width, in pixels.
1517
| `font` | `Font` | `Chart.defaults.font` | See [Fonts](../general/fonts.md)
1618
| `padding` | [`Padding`](../general/padding.md) | `4` | Padding to apply around scale labels. Only `top`, `bottom` and `y` are implemented.
1719

src/core/core.scale.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1615,6 +1615,8 @@ export default class Scale extends Element {
16151615
textAlign: titleAlign(align, position, reverse),
16161616
textBaseline: 'middle',
16171617
translation: [titleX, titleY],
1618+
strokeColor: title.strokeColor,
1619+
strokeWidth: title.strokeWidth
16181620
});
16191621
}
16201622

src/types/index.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3270,6 +3270,10 @@ export interface CartesianScaleOptions extends CoreScaleOptions {
32703270
text: string | string[];
32713271
/** Color of the axis label. */
32723272
color: Color;
3273+
/** The color of the text stroke for the axis label.*/
3274+
strokeColor?: Color;
3275+
/** The text stroke width for the axis label.*/
3276+
strokeWidth?: number;
32733277
/** Information about the axis title font. */
32743278
font: ScriptableAndScriptableOptions<Partial<FontSpec>, ScriptableCartesianScaleContext>;
32753279
/** Padding to apply around scale labels. */

test/specs/core.scale.tests.js

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -817,4 +817,84 @@ describe('Core.scale', function() {
817817
}
818818
});
819819
});
820+
describe('Scale Title stroke', ()=>{
821+
function getChartWithScaleTitleStroke() {
822+
return window.acquireChart({
823+
type: 'line',
824+
options: {
825+
scales: {
826+
x: {
827+
type: 'linear',
828+
title: {
829+
display: true,
830+
text: 'title-x',
831+
color: '#ddd',
832+
strokeWidth: 1,
833+
strokeColor: '#333'
834+
}
835+
},
836+
y: {
837+
type: 'linear',
838+
title: {
839+
display: true,
840+
text: 'title-y',
841+
color: '#ddd',
842+
strokeWidth: 2,
843+
strokeColor: '#222'
844+
}
845+
}
846+
}
847+
}
848+
});
849+
}
850+
851+
function getChartWithoutScaleTitleStroke() {
852+
return window.acquireChart({
853+
type: 'line',
854+
options: {
855+
scales: {
856+
x: {
857+
type: 'linear',
858+
title: {
859+
display: true,
860+
text: 'title-x',
861+
color: '#ddd'
862+
}
863+
},
864+
y: {
865+
type: 'linear',
866+
title: {
867+
display: true,
868+
text: 'title-y',
869+
color: '#ddd'
870+
}
871+
}
872+
}
873+
}
874+
});
875+
}
876+
877+
it('should draw a scale title stroke when provided x-axis', function() {
878+
var chart = getChartWithScaleTitleStroke();
879+
var scale = chart.scales.x;
880+
expect(scale.options.title.strokeColor).toEqual('#333');
881+
expect(scale.options.title.strokeWidth).toEqual(1);
882+
});
883+
884+
it('should draw a scale title stroke when provided y-axis', function() {
885+
var chart = getChartWithScaleTitleStroke();
886+
var scale = chart.scales.y;
887+
expect(scale.options.title.strokeColor).toEqual('#222');
888+
expect(scale.options.title.strokeWidth).toEqual(2);
889+
});
890+
891+
it('should not draw a scale title stroke when not provided', function() {
892+
var chart = getChartWithoutScaleTitleStroke();
893+
var scales = chart.scales;
894+
expect(scales.y.options.title.strokeColor).toBeUndefined();
895+
expect(scales.y.options.title.strokeWidth).toBeUndefined();
896+
expect(scales.x.options.title.strokeColor).toBeUndefined();
897+
expect(scales.x.options.title.strokeWidth).toBeUndefined();
898+
});
899+
});
820900
});

0 commit comments

Comments
 (0)