Upgrading vue-chartjs 4 to 5
Breaking4.1.2 → 5.3.4Breaking4Platform1New7Changed5Fixed5Other5
BreakingUpgrade verdict
4 breaking changes and a platform requirement change.
In plain terms
- You can no longer load this package with require(); you must use import.
- Importing the package's default export no longer works; import the named pieces instead.
- The chart event hooks are gone, so code relying on them must change.
- The component no longer wraps the canvas in a div, and several props and helpers have new names.
Must act Top 4 of 5 that need code or config changes
What you must change
Breaking4
Package is now ESM-only and no longer supports CommonJS.
Removes the default export; use named exports instead.
Removes chart events.
Removes the div wrapper and renames chartData to data, chartOptions to options, and generateChart to createTypedChart.
chartDatadatachartOptionsoptionsgenerateChartcreateTypedChartPlatform1
Drops Vue.js versions below 2.7 from the peer dependency range.
API changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- removed:
const Bar: TypedChartComponent<'bar', number[], unknown> - removed:
const Bubble: TypedChartComponent<'bubble', import('chart.js').BubbleDataPoint[], unknown> - removed:
const Doughnut: TypedChartComponent<'doughnut', number[], unknown> - removed:
const Line: TypedChartComponent<'line', (number | import('chart.js').ScatterDataPoint | null)[], unknown> - removed:
const Pie: TypedChartComponent<'pie', number[], unknown> - removed:
const PolarArea: TypedChartComponent<'polarArea', number[], unknown> - removed:
const Radar: TypedChartComponent<'radar', (number | null)[], unknown> - removed:
const Scatter: TypedChartComponent<'scatter', (number | import('chart.js').ScatterDataPoint | null)[], unknown> - removed:
const _default: { Bar: TypedChartComponent<'bar', number[], unknown>; Doughnut: TypedChartComponent<'doughnut', number[], unknown>; Line: TypedChartComponent<'line', (number |… - removed:
const generateChart: <TType extends keyof import('chart.js').ChartTypeRegistry = keyof import('chart.js').ChartTypeRegistry, TData = import('chart.js/types/utils').DistributiveArra… - removed:
default _default
- added:
const Chart: ChartComponent
- removed:
export * from './BaseCharts' - added:
export { Bar } - added:
export { Bubble } - added:
export { Chart } - added:
export { ChartComponentRef } from './types' - added:
export { ChartProps } from './types' - added:
export { Doughnut } - added:
export { Line } - added:
export { Pie } - added:
export { PolarArea } - added:
export { Radar } - added:
export { Scatter } - added:
export { createTypedChart } - added:
export { getDatasetAtEvent } from './utils' - added:
export { getElementAtEvent } from './utils' - added:
export { getElementsAtEvent } from './utils'
- added:
const A11yProps: { readonly ariaLabel: { readonly type: StringConstructor }; readonly ariaDescribedby: { readonly type: StringConstructor } } - added:
const CommonProps: { readonly data: { readonly type: PropType<ChartData<keyof import('chart.js').ChartTypeRegistry, (number | [number, number] | import('chart.js').Point | import… - added:
const Props: { readonly ariaLabel: { readonly type: StringConstructor }; readonly ariaDescribedby: { readonly type: StringConstructor }; readonly data: { readonly type: Pro…
- added:
const Bar: TypedChartComponent<'bar', (number | [number, number] | null)[] | ExtendedDataPoint[], unknown> - added:
const Bubble: TypedChartComponent<'bubble', import('chart.js').BubbleDataPoint[], unknown> - added:
const Doughnut: TypedChartComponent<'doughnut', number[], unknown> - added:
const Line: TypedChartComponent<'line', (number | import('chart.js').Point | null)[], unknown> - added:
const Pie: TypedChartComponent<'pie', number[], unknown> - added:
const PolarArea: TypedChartComponent<'polarArea', number[], unknown> - added:
const Radar: TypedChartComponent<'radar', (number | null)[], unknown> - added:
const Scatter: TypedChartComponent<'scatter', (number | import('chart.js').Point | null)[], unknown> - added:
function createTypedChart<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>(type: TType, registerables: ChartComponentLike): TypedChartComponent<TType, TData, TLabel> - added:
index ExtendedDataPoint[key: string]: string | number | null | ExtendedDataPoint - added:
interface ExtendedDataPoint
- removed:
interface IChartComponentData<TType extends ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> - removed:
interface IChartProps<TType extends ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> - removed:
property IChartComponentData._chart: ShallowRef<TypedChartJS<TType, TData, TLabel> | null> - removed:
property IChartComponentData.canvasEl: Ref<HTMLCanvasElement | null> - removed:
property IChartComponentData.chartDataHandler: (newValue: TChartData<TType, TData, TLabel>, oldValue: TChartData<TType, TData, TLabel>) => void - removed:
property IChartComponentData.renderChart: (data: TChartData<TType, TData, TLabel>, options: TChartOptions<TType>) => void - removed:
property IChartProps.chartData: TChartData<TType, TData, TLabel> - removed:
property IChartProps.chartId?: string - removed:
property IChartProps.chartOptions?: TChartOptions<TType> - removed:
property IChartProps.cssClasses?: string - removed:
property IChartProps.datasetIdKey?: string - removed:
property IChartProps.height?: number - removed:
property IChartProps.plugins?: Plugin<TType>[] - removed:
property IChartProps.styles?: Partial<CSSStyleDeclaration> - removed:
property IChartProps.width?: number - removed:
type TChartData<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> = ChartData<TType, TData, TLabel> - removed:
type TChartOptions<TType extends ChartType> = ChartOptions<TType> - removed:
type TypedChartEmits = { [ChartEmits.ChartRendered]: () => true; [ChartEmits.ChartUpdated]: () => true; [ChartEmits.ChartDestroyed]: () => true; [ChartEmits.LabelsUpdated]: () => tru… - removed:
type TypedChartJS<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> = ChartJS<TType, TData, TLabel> - changed:
type TypedChartComponent<TType extends ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> = DefineComponent<IChartProps<TType, TData, TLabel>, IChartComponentData<TType, TData, TLabel>, unknown, ComputedOptions, MethodOptions, ComponentOptionsMixin, C… → type TypedChartComponent<TType extends ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> = DefineComponent<Omit<ChartProps<TType, TData, TLabel>, 'type'>> - added:
interface ChartComponentRef<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> - added:
interface ChartProps<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> - added:
property ChartComponentRef.chart: ChartJS<TType, TData, TLabel> | null - added:
property ChartProps.data: ChartData<TType, TData, TLabel> - added:
property ChartProps.datasetIdKey?: string - added:
property ChartProps.options?: ChartOptions<TType> - added:
property ChartProps.plugins?: Plugin<TType>[] - added:
property ChartProps.type: TType - added:
property ChartProps.updateMode?: UpdateMode - added:
type ChartComponent = DefineComponent<ChartProps>
- removed:
const chartUpdateError = 'Update ERROR: chart instance not found' - removed:
const templateError = 'Please remove the <template></template> tags from your chart component. See https://vue-chartjs.org/guide/#vue-single-file-components' - removed:
enum ChartEmits - removed:
function chartCreate<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>(createChartFunction: (data: TChartData<TType, TData, TLabel>, options: TChartOptions<TType>) => void, chartData: TChartData<TType, TData, TLabel>, chartOptions: TChartOptions<TType>, context?: SetupContext): void - removed:
function chartDestroy<TType extends ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>(chart: TypedChartJS<TType, TData, TLabel>, context?: SetupContext): void - removed:
function chartUpdate<TType extends ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>(chart: TypedChartJS<TType, TData, TLabel>, context?: SetupContext): void - removed:
function compareData<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>(newData: TChartData<TType, TData, TLabel>, oldData: TChartData<TType, TData, TLabel>): boolean - removed:
function getChartData<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>(data: TChartData<TType, TData, TLabel>, datasetIdKey: string): TChartData<TType, TData, TLabel> - removed:
function setChartDatasets<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>(oldData: TChartData<TType, TData, TLabel>, newData: TChartData<TType, TData, TLabel>, datasetIdKey: string): void - removed:
function setChartLabels<TType extends ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>(chart: TypedChartJS<TType, TData, TLabel>, labels: TLabel[] | undefined, context?: SetupContext): void - removed:
function setChartOptions<TType extends ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>(chart: TypedChartJS<TType, TData, TLabel>, options: TChartOptions<TType>): void - removed:
member ChartEmits.ChartDestroyed = 'chart:destroyed' - removed:
member ChartEmits.ChartRendered = 'chart:rendered' - removed:
member ChartEmits.ChartUpdated = 'chart:updated' - removed:
member ChartEmits.LabelsUpdated = 'labels:updated' - added:
const compatProps: <I extends {}, T extends {}>(internals: I, props: T) => I & T - added:
function cloneData<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>(data: ChartData<TType, TData, TLabel>, datasetIdKey: string): ChartData<TType, TData, TLabel> - added:
function cloneProxy<T extends object>(obj: T, src?: T): T - added:
function getDatasetAtEvent(chart: Chart, event: MouseEvent): import('chart.js').InteractionItem[] - added:
function getElementAtEvent(chart: Chart, event: MouseEvent): import('chart.js').InteractionItem[] - added:
function getElementsAtEvent(chart: Chart, event: MouseEvent): import('chart.js').InteractionItem[] - added:
function setDatasets<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>(currentData: ChartData<TType, TData, TLabel>, nextDatasets: ChartDataset<TType, TData>[], datasetIdKey: string): void - added:
function setLabels<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>(currentData: ChartData<TType, TData, TLabel>, nextLabels: TLabel[] | undefined): void - added:
function setOptions<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>(chart: Chart<TType, TData, TLabel>, nextOptions: ChartOptions<TType>): void - added:
function toRawIfProxy<T>(obj: T): T
- removed:
const Bar: any - removed:
const Bubble: any - removed:
const Doughnut: any - removed:
const Line: any - removed:
const Pie: any - removed:
const PolarArea: any - removed:
const Radar: any - removed:
const Scatter: any - removed:
function generateChart(chartId: any, chartType: any, chartController: any): { props: { chartData: { type: ObjectConstructor; required: boolean }; chartOptions: { type: ObjectConstructor; default: () => void }; datasetIdKey: { type: StringConstructor; default: string }; chartId: { type: StringConstructor; default: any }; width: { type: NumberConstructor; default: number }; height: { type: NumberCo…