TypeError: lineCap must be a string

[mlohbihler]

I am using chart.js in node and using 'skia-canvas' to raise windows and provide a canvas / graphics context. This context appears to be pickier about lineCap and lineJoin properties, which cannot be set to undefined or null. Happily this problem is easily fixed by adding their 'annotation' equivalents (i.e. borderCapStyle, and borderJoinStyle) to the default options of certain structures. So far i have only encountered the errors with LineAnnotation.defaults and arrowHeadsDefaults. Adding the following lines to each is the fix:

  borderCapStyle: 'butt',
  borderJoinStyle: 'miter',

I can create a PR for this if that is easier, but i noted that there are currently 12 outstanding PRs already, some going back years.

[mlohbihler]

I've just confirmed that the same defaults are also needed for EllipseAnnotation.defaults and PointAnnotation.defaults

[stockiNail]

@mlohbihler feel free to open a PR anyway. I am the author of 9 on 12 PR still pending and hopefully they will be managed.

Pay attention to options fallback setting the defaults.

[mlohbihler]

@stockiNail sounds good. For completeness, here is a code snip that i just run with node that reproduces the problem. It's mostly pulled from the annotations sample code. I'm running on a macbook.

import { Window } from 'skia-canvas'
import { Chart, registerables } from 'chart.js'
import annotationPlugin from 'chartjs-plugin-annotation'

Chart.register(...registerables, annotationPlugin)

let win = new Window(1000, 1000)
win.once('draw', e => {
  const ctx = e.target.canvas.getContext('2d')
  new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'My First Dataset',
          data: [65, 59, 80, 81, 56, 55, 40],
          fill: false,
          borderColor: 'rgb(75, 192, 192)',
          tension: 0.1,
        },
      ],
    },
    options: {
      plugins: {
        annotation: {
          annotations: {
            ellipse1: {
              type: 'ellipse',
              xMin: 1,
              xMax: 2,
              yMin: 50,
              yMax: 70,
              backgroundColor: 'rgba(255, 99, 132, 0.25)',
            },
            line1: {
              type: 'line',
              yMin: 60,
              yMax: 60,
              borderColor: 'rgb(255, 99, 132)',
              borderWidth: 2,
              arrowHeads: { end: { display: true, length: 4, width: 2 } },
            },
            point1: {
              type: 'point',
              xValue: 1,
              yValue: 60,
              backgroundColor: 'rgba(255, 99, 132, 0.25)',
            },
          },
        },
      },
    },
  })
})

A full sample of the error is:

TypeError: lineCap must be a string
    at CanvasRenderingContext2D.prop (/Users/mlohbihler/git/pendulum/node_modules/skia-canvas/lib/index.js:50:37)
    at set lineCap [as lineCap] (/Users/mlohbihler/git/pendulum/node_modules/skia-canvas/lib/index.js:689:37)
    at setBorderStyle (file:///Users/mlohbihler/git/pendulum/node_modules/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.esm.js:404:17)
    at LineAnnotation.draw (file:///Users/mlohbihler/git/pendulum/node_modules/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.esm.js:1641:10)
    at drawElement (file:///Users/mlohbihler/git/pendulum/node_modules/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.esm.js:2748:8)
    at draw (file:///Users/mlohbihler/git/pendulum/node_modules/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.esm.js:2719:5)
    at Object.afterDatasetsDraw (file:///Users/mlohbihler/git/pendulum/node_modules/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.esm.js:2640:5)
    at callback (file:///Users/mlohbihler/git/pendulum/node_modules/chart.js/dist/chunks/helpers.segment.js:79:19)
    at PluginService._notify (file:///Users/mlohbihler/git/pendulum/node_modules/chart.js/dist/chart.js:5088:17)
    at PluginService.notify (file:///Users/mlohbihler/git/pendulum/node_modules/chart.js/dist/chart.js:5071:29)

[stockiNail]

Closed by #939