Allow styling of line segments

docs/.vuepress/config.js

@@ -111,6 +111,7 @@ module.exports = {
             'line/interpolation',
             'line/styling',
             // 'line/point-styling',
+            'line/segments',
           ]
         },
         {

docs/charts/line.md

@@ -52,8 +52,8 @@ The line chart allows a number of properties to be specified for each dataset. T
 | [`borderJoinStyle`](#line-styling) | `string` | Yes | - | `'miter'`
 | [`borderWidth`](#line-styling) | `number` | Yes | - | `3`
 | [`clip`](#general) | `number`\|`object` | - | - | `undefined`
-| [`data`](#data-structure) | `object`\|`object[]`\| `number[]`\|`string[]` | - | - | **required**
 | [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | Yes | - | `'default'`
+| [`data`](#data-structure) | `object`\|`object[]`\| `number[]`\|`string[]` | - | - | **required**
 | [`fill`](#line-styling) | `boolean`\|`string` | Yes | - | `false`
 | [`hoverBackgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
 | [`hoverBorderCapStyle`](#line-styling) | `string` | Yes | - | `undefined`
@@ -64,7 +64,6 @@ The line chart allows a number of properties to be specified for each dataset. T
 | [`hoverBorderWidth`](#line-styling) | `number` | Yes | - | `undefined`
 | [`indexAxis`](#general) | `string` | - | - | `'x'`
 | [`label`](#general) | `string` | - | - | `''`
-| [`tension`](#line-styling) | `number` | - | - | `0`
 | [`order`](#general) | `number` | - | - | `0`
 | [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
 | [`pointBorderColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
@@ -77,10 +76,12 @@ The line chart allows a number of properties to be specified for each dataset. T
 | [`pointRadius`](#point-styling) | `number` | Yes | Yes | `3`
 | [`pointRotation`](#point-styling) | `number` | Yes | Yes | `0`
 | [`pointStyle`](#point-styling) | `string`\|`Image` | Yes | Yes | `'circle'`
+| [`segments`](#segments) | `object` | - | - | `undefined`
 | [`showLine`](#line-styling) | `boolean` | - | - | `true`
 | [`spanGaps`](#line-styling) | `boolean`\|`number` | - | - | `undefined`
 | [`stack`](#general) | `string` | - | - | `'line'` |
 | [`stepped`](#stepped) | `boolean`\|`string` | - | - | `false`
+| [`tension`](#line-styling) | `number` | - | - | `0`
 | [`xAxisID`](#general) | `string` | - | - | first x axis
 | [`yAxisID`](#general) | `string` | - | - | first y axis
 
@@ -158,6 +159,18 @@ The `'monotone'` algorithm is more suited to `y = f(x)` datasets: it preserves m
 
 If left untouched (`undefined`), the global `options.elements.line.cubicInterpolationMode` property is used.
 
+### Segments
+
+Line segment styles can be overridde by scriptable options in the `segments` object. Currently all of the `border*` options are supported. The segment styles are resolved for each section of the line between each point. `undefined` fallbacks to main line styles.
+
+Context for the scriptable segment contains the following properties:
+
+* `type`: `'segment'`
+* `p1`: first point element
+* `p2`: second point element
+
+[Example usage](../samples/line/segments.md)
+
 ### Stepped
 
 The following values are supported for `stepped`.

docs/samples/line/segments.md

@@ -0,0 +1,43 @@
+# Line Segment Styling
+
+```js chart-editor
+
+// <block:segmentUtils:1>
+const skipped = (ctx, value) => ctx.p1.skip || ctx.p2.skip ? value : undefined;
+const down = (ctx, value) => ctx.p1.y < ctx.p2.y ? value : undefined;
+// </block:segmentUtils>
+
+// <block:genericOptions:2>
+const genericOptions = {
+  fill: false,
+  interaction: {
+    intersect: false
+  },
+  radius: 0,
+};
+// </block:genericOptions>
+
+// <block:config:0>
+const config = {
+  type: 'line',
+  data: {
+    labels: Utils.months({count: 7}),
+    datasets: [{
+      label: 'My First Dataset',
+      data: [65, 59, NaN, 48, 56, 57, 40],
+      borderColor: 'rgb(75, 192, 192)',
+      segments: {
+        borderColor: ctx => skipped(ctx, 'rgb(0,0,0,0.2)') || down(ctx, 'rgb(192,75,75)'),
+        borderDash: ctx => skipped(ctx, [6, 6]),
+      }
+    }]
+  },
+  options: genericOptions
+};
+// </block:config>
+
+module.exports = {
+  actions: [],
+  config: config,
+};
+```