Chartjs-ChartJS segments error : TS2339: Property 'chart' does not exist on type 'ScriptableLineSegmentContext'

by

0👍

✅

You’re right, if this doesn’t qualify as a bug, it’s certainly
a missed opportunity for chart.js to document
and include in the type definitions, especially for
environments where it is cumbersome to work with
global variables.

Source code

In the source file
/src/helpers/helpers.options.ts
the function createContext has the following definition.

export function createContext(parentContext: object, context: object) {
   return Object.assign(Object.create(parentContext), context);
}

It is called from /src/helpers/helpers.segment.js

const chartContext = line._chart.getContext();
//.....
segmentOptions.setContext(createContext(chartContext, {
     type: 'segment',
     p0: prev,
     p1: pt,
     p0DataIndex: (i - 1) % count,
     p1DataIndex: i % count,
     datasetIndex
})));

so the scriptable context is an extension to the chart context,
and that is defined in /src/core/core.controller.js

getContext() {
    return this.$context || (this.$context = createContext(null, {chart: this, type: 'chart'}));
}

to include a chart entry containing a reference to the chart
itself.

This behavior is consistent with other scriptable contexts
throughout the code, the context for the chart itself
being the only instance when createContext is called
with a null first argument.

Awkward alternative

That being said, a possible alternative is to create
the chart in two stages, under a pattern like:

const config = {
// ....
};
const chart = new Chart('line-chart', config);
// now you have the chart reference 
chart.data.datasets[0].segment = {
   borderColor: () => ... // use chart global variable        
};
chart.update();

That’s awkward as it is, and I suppose it would be
much more so with angular.

Typescript type assertions instead of @ts-ignore

In conclusion, you can count on your solution
working with the current version of chart.js, and it is
not likely it will change in this major version (4).

If you want to avoid using // @ts-ignore you can
make it work using type assertions (x as unknown as T)
something on the lines of:

backgroundColor: (context) => {
    let {ctx, chartArea} = (context as unknown as {chart: Chart}).chart;
    //....
}

Leave a comment