chartjs / chartjs-plugin-annotation

Error message:

Property 'backgroundColor' does not exist on type 'AnnotationOptions<keyof AnnotationTypeRegistry>'.
  Property 'backgroundColor' does not exist on type '{ type: "line"; } & LineAnnotationOptions'.

Reproducible example:

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgYQBYENYBoUdgEXRnRzUxgHkwZgIA7AZzgF84AzKCEOAcgGM8MAHQArBjwDcAWABQoSLDjo6dCMRr0ACgBsArgHNgddp279BYgLRg9hupeWr1tOpNmyysIVACmhhjA+UAAUjmpELjoGRgCU7jJ89AFwENQuDABcuORUGowAPDwARrpFRdo+PAB8cAC8iLJwcDbRjFkIjU1KKuF57Z1d3U4RSf0yg4NswFABAIq66AAmUMowAEL6YxMTMACeYD5ZxRAAHjxYA9twReh8ANb6nLp0i8gQ2tBHAMRsv+eX2yK0EWQTeHygWWCAH0cKk8gwYnUanD0kIbvdHhBnq93tALuMrswASxLkSCWSybIAG6YOB8GAnOpwRYQPi6EA+OjCfQ+GAAUQqHK5a12AElFsEAEQgXaeGCSxHoJgACQAKgBZAAyyGUNIYAp8Qpg0hkNKgcBlcqZdB8AHdsrBgvSTjgOgSmnsDkcSmUKv93cyiOgthNFkGGLzMnAANrEppuq5dbToIo+bRHMPECMwf2JpqZ4MxhAnLIARhwuyyACYcBC4ABmZiuktwGtwSsN2tZRsAXXxiabxL7pP7XRRoxSaSSo8HMhiEiAA

@thomas-haufe Thank you for feedback. The options passed by context need to be cast to the options related to the annotation type where the scriptable option is invoked. By default a annotation for line is used but line annotation doesn't have the backgroundColor as options.

The following code could solve the issue:

import { Chart, ChartData, ChartOptions, Color } from 'chart.js';
import annotationPlugin, {BoxAnnotationOptions} from 'chartjs-plugin-annotation';

Chart.register(annotationPlugin)

const options: ChartOptions<'bubble'> = {
  plugins: {
    annotation: {
      annotations: {
        firstQuadrantBg: {
          type: 'box',
          backgroundColor: '#fff',
          borderColor: (_, options) => {
            const boxOptions = options as BoxAnnotationOptions;
            return boxOptions.backgroundColor as Color;
          },
        }
      }
    }
  }
}

Thanks for the idea @stockiNail. Are you proposing it as a final solution or as a temporary workaround until this is fixed properly?

I think this should be the job of the library and not the job of the consumer.

And it's probably possible to let chartjs correctly infer the type with some advanced type gymnastics? :)

@thomas-haufe currently the plugin is designed to cast the options when engaged in a scriptable options.
That said, this is a workaround till the scriptable context will be extended maybe in this lib to add the type.

Wouldn't it work to change the following line

chartjs-plugin-annotation/types/options.d.ts

Line 26 in 4b8ff4f

    
           export type Scriptable<T, TContext> = T | ((ctx: TContext, options: AnnotationOptions) => T);

to something like this?
export type Scriptable<T, TContext, TYPE> = T | ((ctx: TContext, options: AnnotationOptions[TYPE]) => T); (or something similar)?

Type error with backgroundColor on options parameter for scriptable options