diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 0bcdea0..1b2f6a0 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -23,7 +23,10 @@ export default defineConfig({
sidebar: [
{
text: 'Examples',
- items: [{ text: 'Basic', link: '/examples/' }],
+ items: [
+ { text: 'Basic', link: '/examples/' },
+ { text: 'Stroke', link: '/examples/stroke' },
+ ],
},
{
text: 'API',
diff --git a/docs/examples/basic.ts b/docs/examples/basic.ts
index 502503a..23d90ff 100644
--- a/docs/examples/basic.ts
+++ b/docs/examples/basic.ts
@@ -225,3 +225,18 @@ export const config: ChartConfiguration<'wordCloud'> = {
data,
};
// #endregion config
+
+// #region stroke
+export const stroke: ChartConfiguration<'wordCloud'> = {
+ type: 'wordCloud',
+ data,
+ options: {
+ elements: {
+ word: {
+ strokeStyle: 'red',
+ strokeWidth: 8,
+ },
+ },
+ },
+};
+// #endregion stroke
diff --git a/docs/examples/stroke.md b/docs/examples/stroke.md
new file mode 100644
index 0000000..59d5c15
--- /dev/null
+++ b/docs/examples/stroke.md
@@ -0,0 +1,28 @@
+---
+title: Stroke
+---
+
+# Stroke
+
+
+
+## Word Cloud
+
+
+
+
+
+### Code
+
+:::code-group
+
+<<< ./basic.ts#stroke [config]
+
+<<< ./basic.ts#data [data]
+
+:::
diff --git a/package.json b/package.json
index 2cc92f2..ea54589 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "chartjs-chart-wordcloud",
"description": "Chart.js module for word clouds",
- "version": "4.2.4",
+ "version": "4.3.0",
"author": {
"name": "Samuel Gratzl",
"email": "sam@sgratzl.com",
diff --git a/src/elements/WordElement.ts b/src/elements/WordElement.ts
index 6817869..51bff34 100644
--- a/src/elements/WordElement.ts
+++ b/src/elements/WordElement.ts
@@ -2,12 +2,17 @@ import { Element, FontSpec, VisualElement, ScriptableAndArrayOptions, Scriptable
import { toFont } from 'chart.js/helpers';
export interface IWordElementOptions extends FontSpec, Record {
- color: string;
+ color: CanvasRenderingContext2D['fillStyle'];
/**
* CanvasContext2D.strokeStyle config for rendering a stroke around the text
* @default undefined
*/
- strokeStyle: string;
+ strokeStyle: CanvasRenderingContext2D['strokeStyle'];
+ /**
+ * CanvasContext2D.lineWith for stroke
+ * @default undefined
+ */
+ strokeWidth?: CanvasRenderingContext2D['lineWidth'];
/**
* rotation of the word
* @default undefined then it will be randomly derived given the other constraints
@@ -39,7 +44,7 @@ export interface IWordElementHoverOptions {
/**
* hover variant of color
*/
- hoverColor: string;
+ hoverColor: CanvasRenderingContext2D['fillStyle'];
/**
* hover variant of size
*/
@@ -56,7 +61,12 @@ export interface IWordElementHoverOptions {
* hover variant of stroke style
* @default undefined
*/
- hoverStrokeStyle: string;
+ hoverStrokeStyle: CanvasRenderingContext2D['strokeStyle'];
+ /**
+ * hover variant of stroke width
+ * @default undefined
+ */
+ hoverStrokeWidth?: CanvasRenderingContext2D['lineWidth'];
}
export interface IWordElementProps {
@@ -81,6 +91,7 @@ export class WordElement extends Element
rotationSteps: 2,
padding: 1,
strokeStyle: undefined,
+ strokeWidth: undefined,
size: (ctx) => {
const v = (ctx.parsed as unknown as { y: number }).y;
return v;
@@ -174,6 +185,9 @@ export class WordElement extends Element
// ctx.strokeRect(-props.width / 2, -props.height / 2, props.width, props.height);
ctx.rotate((options.rotate / 180) * Math.PI);
if (options.strokeStyle) {
+ if (options.strokeWidth != null) {
+ ctx.lineWidth = options.strokeWidth;
+ }
ctx.strokeStyle = options.strokeStyle;
ctx.strokeText(props.text, 0, 0);
}