Can't draw horizontal line on react-charts-js with CoreUI template

[JRA98]

Hi, im trying to draw a horizontal line on my Charts, i get this on console and seems like the plugin is correctly registered.

This is my code:

import { CChartBar } from '@coreui/react-chartjs'
import * as ChartAnnotation from 'chartjs-plugin-annotation'

const defaultOptions = (() => {
		return {
			annotation: {
				annotations: [
					{
						type: 'line',
						mode: 'horizontal',
						scaleID: 'y-axis-0',
						value: 600,
						borderColor: 'black',
						borderWidth: 10,
						label: {
							backgroundColor: 'red',
							content: 'Test Label',
							enabled: true,
						},
					},
				],
			},
			showAllTooltips: true,
			responsive: true,
			maintainAspectRatio: false,
			legend: {
				display: false,
				position: 'right'
			},
			scales: {
				xAxes: [{
					gridLines: {
						drawOnChartArea: false
					},
					stacked: true
				}],
				yAxes: [{
					ticks: {
						beginAtZero: true,
					},
					gridLines: {
						display: true
					},
					stacked: true
				}]
			},
			elements: {
				point: {
					radius: 0,
					hitRadius: 10,
					hoverRadius: 4,
					hoverBorderWidth: 3
				}
			},
		}
	})();

And render the Chart

<CChartBar
	{...props}
	datasets={defaultDatasets}
	options={defaultOptions}
	labels={labels.sort()}
	plugins={[ChartAnnotation]}
/>

I already tried with the plugin object inside the options, change y-axis-id ... and several methods i found different websites with no success...

Versions i use:

"@coreui/chartjs": "^3.0.0", "@coreui/react-chartjs": "^1.1.0", "chart.js": "^3.0.0", "chartjs-plugin-annotation": "^1.1.0",

[kurkle]

Looks like you are trying to use it inline (in config.plugins array)

[stockiNail]

@JRA98 maybe I'm wrong but on top of what @kurkle wrote, I see that:

1. the scale definitions sounds do not be aligned with chartjs 3 (that it seems you are using). https://www.chartjs.org/docs/latest/axes/
2. the plugin configurations (for all plugins in chartjs 3) should be located in plugins node in the chart options.
3. mode options is obsolete and not used anymore in annotation version 1
4. beginAtZero options is a axis option and not ticks anymore (form chartjs 3).
5. showAllTooltips option sounds to be obsoleted and not documented in chartjs 3.

I have tried to update the config you provided:

const defaultOptions = (() => {
    return {
	plugins: {
       	  legend: {
            display: false,
            position: 'right'
          },
          annotation: {
            annotations: [
            {
              type: 'line',
              scaleID: 'y',
              value: 600,
              borderColor: 'black',
              borderWidth: 10,
              label: {
                backgroundColor: 'red',
               content: 'Test Label',
              enabled: true,
              },
            },
            ],
          },
        },
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          x: {
            gridLines: {
              drawOnChartArea: false
            },
            stacked: true
          },
          y: {
            beginAtZero: true,
            gridLines: {
              display: true
            },
            stacked: true
          }
        },
        elements: {
          point: {
            radius: 0,
            hitRadius: 10,
            hoverRadius: 4,
            hoverBorderWidth: 3
          }
        },
    }
})();

[JRA98]

It still not showing and break the stacked option...

NEW

OLD

I tried to configure it globally on the index.d.ts of the library node_modules/@coreui/react-chartsjs/src/index.d.ts (maybe its not okay) and still not working

import { ChartDataSets, ChartOptions, Chart } from 'chart.js'
import annotationPlugin from 'chartjs-plugin-annotation';
Chart.plugins.register(annotationPlugin);

[stockiNail]

@JRA98 can you create a codepen with the complete sample in order to debug it?

About registration, having a look to the doc https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/integration.html#bundlers-webpack-rollup-etc

import { Chart } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';

Chart.register(annotationPlugin);

and not Chart.plugins.register(annotationPlugin);

[stockiNail]

Created a codepen (with shared options): https://codepen.io/stockinail/pen/abyrGav

Seems working.

[JRA98]

Not working for me, probably because react-chartsjs...

Could i import the plugin inside the @node_module folder on the CChart.js library?

Something like this

import React, { useState, useEffect, useRef, useMemo } from 'react'
import PropTypes from 'prop-types'
import {Chart} from 'chart.js'
import { customTooltips as cuiCustomTooltips } from '@coreui/chartjs'
import '@coreui/chartjs/dist/css/coreui-chartjs.css'

import annotationPlugin from 'chartjs-plugin-annotation';

Chart.pluginService.register(annotationPlugin);
Chart.register(annotationPlugin);

Im trying something like this, launching npm install to update the changes

[kurkle]

I usually create a file for the chart components I need.

// chart-with-plugins.js

import Chart from 'chart.js/auto'
import { customTooltips as cuiCustomTooltips } from '@coreui/chartjs'
import '@coreui/chartjs/dist/css/coreui-chartjs.css'

import annotationPlugin from 'chartjs-plugin-annotation';

Chart.register(annotationPlugin);

export default Chart;

// chart-component.js

import Chart from './chart-with-plugins.js';
...

That enables having single point to modify and might also help the bundler to do right things.
But I've not used react-chartjs-2 (assuming that is the one you are using), so I don't know if this helps.
The bundler could need some configuration too. If you are using webpack, it could work differently in production.

Note: I messed up with the issue this was created from, and had no other option than to delete it.

[JRA98]

Im finally get it works!!

I have directly modified the main node_modules/@coreui/react-chartjs/src/CChart.js library file and extracted it into my libraries folder.

And added the following lines at the start

import {
    Chart,
    LineController,
    LineElement,
    PointElement,
    CategoryScale,
    LinearScale
} from "chart.js";

import annotationPlugin from 'chartjs-plugin-annotation';
import { customTooltips as cuiCustomTooltips } from '@coreui/chartjs'
import '@coreui/chartjs/dist/css/coreui-chartjs.css'

Chart.register(
    LineController,
    LineElement,
    PointElement,
    CategoryScale,
    LinearScale,
    annotationPlugin
);

Then on my Chart Component I read from the modified library

import { CChartBar } from 'src/libs/CChart'

Thanks all for your help