diff --git a/README.md b/README.md index 6a5d2d6..765fa5d 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ To configure the trendline plugin you simply add a new config options to your da trendlineLinear: { colorMin: "red", colorMax: "green", - lineStyle: "dotted|solid", + lineStyle: "dotted|solid|dashed|dashdot", width: 2, xAxisKey: "time" (optional), yAxisKey: "usage" (optional), diff --git a/src/chartjs-plugin-trendline.js b/src/chartjs-plugin-trendline.js index 3bff7ce..cae1cc7 100644 --- a/src/chartjs-plugin-trendline.js +++ b/src/chartjs-plugin-trendline.js @@ -145,10 +145,21 @@ const addFitter = (datasetMeta, ctx, dataset, xScale, yScale) => { ctx.lineWidth = lineWidth; - if (lineStyle === 'dotted') { - ctx.setLineDash([2, 3]); // Dotted - } else { - ctx.setLineDash([]); // Solid + // line styles + switch (lineStyle) { + case 'dotted': + ctx.setLineDash([2, 2]); // Dotted + break; + case 'dashed': + ctx.setLineDash([8, 3]); // Dashed + break; + case 'dashdot': + ctx.setLineDash([8, 3, 2, 3]); // Dash-dot + break; + case 'solid': + default: + ctx.setLineDash([]); // Solid + break; } ctx.beginPath();