Import plugin

[DennisKo]

Is it possible to integrate a plugin into react-chartjs? For example https://github.com/xch89820/Chart.Funnel.js

I tried using

Chart.pluginService.register({
        // something
    });

with no success.

[jerairrest]

I've done something similar here -> https://github.com/jerairrest/react-chartjs-2/issues/74

[fabianbaier]

Related to that topic, I am looking for a solution to draw a vertical line like here: http://jsfiddle.net/dbyze2ga/14/

I found this plugin https://github.com/chartjs/chartjs-plugin-annotation how would I be able to import and use it correctly ?

[jerairrest]

You should be able to just register a custom plugin to the Chart instance. As for how to import a plugin I'm not 100% how we should accomplish this. You can pass the extra options to the chart instance for sure.

[jerairrest]

@fabianbaier The vertical line can be drawn with a custom plugin as follows:

Chart.pluginService.register({
    id: 'threshold',
    afterDraw: (chart, easing) => {
        if (typeof chart.chart.config.data.datasets[0].install != 'undefined') {
            if (chart.chart.config.data.datasets[0].install != '-1') {
                var meta = chart.getDatasetMeta(0);
                var x = meta.data[chart.chart.config.data.datasets[0].install]._model.x;
                chart.chart.ctx.restore();
                chart.chart.ctx.beginPath();
                chart.chart.ctx.setLineDash([5, 5]);
                chart.chart.ctx.strokeStyle = '#000000';
                chart.chart.ctx.moveTo(x, 0);
                chart.chart.ctx.lineTo(x, 10000);
                chart.chart.ctx.stroke();
            }
        }
    }
});

[brianbolnick]

I'd also be interested to see an example implementation with a pre-built plugin like Data Labels

[dbrodie122]

@brianbolnick I had the same question about the Data Labels plugin and got it to work, though maybe not precisely how it was intended.

npm install chartjs-plugin-datalabels

The documentation had no references (that I saw) as to the proper way to import and use it via npm, so I just tried import 'chartjs-plugin-datalabels' in the container component that held my charts.

Voila! Data labels on my charts.

After that, you can pass the plugins property to your options object for your chart, and set things how you like according to the docs

const options = {
  responsive: true,
  plugins: {
    datalabels: {
      color: 'black'
    }
  }
}

Class PieChart extends React.Component {
  ...
  render(){
    return(
      <div>
          <Pie data={data} options={options}/>
      </div>
      )
   }
}

This is the simplest solution I've found so far.

[elmeister]

@DennisKo

import ChartComponent from 'react-chartjs-2';
import 'chartjs-funnel';
<ChartComponent
  {...props}
  ref={ref => this.chartInstance = ref && ref.chartInstance}
  type="funnel"
/>

[cwkeam]

That method is not working for me with: 'chartjs-plugin-annotation'

import 'chartjs-plugin-annotation'; ...

<Line ... options={{ maintainAspectRatio: false, lineTension: 0, ... plugins:{ annotation: { events: ["click"], annotations: [ { drawTime: "afterDatasetsDraw", id: "hline", type: "line", mode: "horizontal", scaleID: "y-axis-0", value: 30, borderColor: "black", borderWidth: 5, label: { backgroundColor: "red", content: "Test Label", enabled: true }, onClick: function(e) { // The annotation is is bound to the this variable console.log("Annotation", e.type, this); } }] } }}/>

I simply can not see the horizontal line.

I copied the code for annotations from: https://codepen.io/anon/pen/aKjevd which does basically what I need mine to do.

[terryma]

Any update on this? chartjs-plugin-annotation still doesn't work with the current version.

[terryma]

Nvm this actually works, it just need an import inside the component import "chartjs-plugin-annotation";

[viniciusfont]

@terryma and @codeandproduce How did you make it work? Edit: I needed to update ChartJS to 2.7.2

[kkammili]

It worked for me if my options object for react-charts-2 look like this

    options={{
                      responsive:true,
                      annotation: {
                          annotations: [
                              {
                                  // drawTime: "afterDatasetsDraw",
                                  // id: "hline",
                                  type: "line",
                                  mode: "horizontal",
                                  scaleID: "y-axis-0",
                                  value: 129,
                                  borderColor: "black",
                                  borderWidth: 10,
                                  label: {
                                      backgroundColor: "red",
                                      content: "Test Label",
                                      enabled: true
                                  }
                              }
                          ]
                      }
              }}

But still my label as well as line is cutting down into half when I set the line on y-axis is greater than the graph allocated values and it works perfectly fine when my straight is touching the plotted curve

[StijnVh]

I got the annotations plugin up and running. Please ensure you are using the latest versions of the packages:

• chart.js: 2.7.3
• chartjs-plugin-annotation: 0.5.7
• react-chartjs-2: 2.7.4

When using chart.js version 2.7.2 it did not work (no error in console, but no line drawn/visible in the chart).

As pointed out in earlier posts, you should also import the chartjs-plugin-annotation: import * as React from 'react'; import * as chartjs from 'chart.js'; import { Bar, ChartData, LinearComponentProps } from 'react-chartjs-2'; import 'chartjs-plugin-annotation';

Then you can add the annotation to the chart options object (for available configuration options, see https://github.com/chartjs/chartjs-plugin-annotation)

[austinderek]

I've installed the latest versions of the above packages, but still have no luck... Can anyone help with this??

[Rennzie]

@austinderek did you have any luck in the end with getting the annotation to render? I cannot for the life of me get mine to show up.

EDIT: Not to worry, I managed to get it to work by copying the example from Raju10100

[mani-coder]

It worked me if my options object for react-charts-2 look like this

    options={{
                      responsive:true,
                      annotation: {
                          annotations: [
                              {
                                  // drawTime: "afterDatasetsDraw",
                                  // id: "hline",
                                  type: "line",
                                  mode: "horizontal",
                                  scaleID: "y-axis-0",
                                  value: 129,
                                  borderColor: "black",
                                  borderWidth: 10,
                                  label: {
                                      backgroundColor: "red",
                                      content: "Test Label",
                                      enabled: true
                                  }
                              }
                          ]
                      }
              }}

But still my label as well as line is cutting down into half when I set the line on y-axis is greater than the graph allocated values and it works perfectly fine when my straight is touching the plotted curve

this worked for me finally.

[phhoffmann]

@DennisKo did you get the funnel to work ? I can't make it appear on my project :/ I've tried some things that people said with the annotation plugin but couldn't make it work either..

[Pringels]

@phhoffmann please post a code example or sandbox which reproduces your problem

[SirPhemmiey]

Please does anyone know how to get the funnel to work with react-chartjs-2?

[cndlhvn]

Hi everyone, In my case, chartjs-plugin-annotation plugin works well with this way.

 import React from 'react'
 import { Bar } from 'react-chartjs-2'
 import * as ChartAnnotation from 'chartjs-plugin-annotation'

 class MyChart extends React.Component {
   render() {
     const data = {
       datasets: [
         {
           label: 'number',
           fill: true,
           beginAtZero: true,
           data: [0, 3, 5, 1, 7, 5, 7, 4, 9],
         },
       ],
       labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
     }
     const options = {
       annotation: {
         annotations: [
           {
             type: 'line',
             mode: 'horizontal',
             scaleID: 'y-axis-0',
             value: 6,
             borderColor: 'black',
             borderWidth: 10,
             label: {
               backgroundColor: 'red',
               content: 'Test Label',
               enabled: true,
             },
           },
         ],
       },
     }
     return <Bar data={data} width={100} height={50} options={options} plugins={ChartAnnotation} />
   }
 }
 export default MyChart

[jordansoltman]

I was having a hard time getting this working using a scatter plot and then realized that my scaleID was y-axis-1 not y-axis-0 in case that helps anyone else out there!

[Nawal00]

I was having a hard time getting this working using a scatter plot and then realized that my scaleID was y-axis-1 not y-axis-0 in case that helps anyone else out there!

Contradictory to your solution, I got mine to work when I have y-axis-1 instead of y-axis-0.

[ederfleming]

Can I use a plugin to make a waterfall chart? like this: https://github.com/everestate/chartjs-plugin-waterfall I am already losing my mind for not being able to create this type of chat.

[maxwell-oroark]

I realized I was placing the annotation options under plugins property ( like with the zoom plugin ) but with this plugin you need to have it on the root of your options object. Hope this helps someone get unstuck; was super annoying to debug.

[johnpena]

I realized I was placing the annotation options under plugins property ( like with the zoom plugin ) but with this plugin you need to have it on the root of your options object. Hope this helps someone get unstuck; was super annoying to debug.

@maxwell-oroark great find! I tried seemingly every solution listed in this thread, and it turns out I had annotation nested under plugins too. Moving it to the outer options worked for me as well. Thank you!

[paulhayessilex]

I realized I was placing the annotation options under plugins property ( like with the zoom plugin ) but with this plugin you need to have it on the root of your options object. Hope this helps someone get unstuck; was super annoying to debug.

@maxwell-oroark great find! I tried seemingly every solution listed in this thread, and it turns out I had annotation nested under plugins too. Moving it to the outer options worked for me as well. Thank you!

Doesn't work for me

I'm using Chartjs v3.0 Does anyone know how to get it work with Chartjs v3.0?

[Matteobikk90]

I would like to use this plugin to change the line strike through when dataset is hidden. Instead of having the text-decoration with the line I would like to make the text with more opacity if hidden and viceversa when not hidden. There are not so many example around and I literally tried a lot of times but with no success, can someone help me please? See screenshot below for what I would like (opacity instead of red color)

[Assem-Hafez]

i'm using those versions:

"chart.js": "3.3.2",
"react-chartjs-2": "3.0.3",
"chartjs-plugin-annotation": "1.0.2",

The following code worked for me

import { Chart } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';
import { Line } from 'react-chartjs-2';
Chart.register(annotationPlugin);

const options = {
  scales: {
    y: {
      type: 'linear',
      grace: "5%",
      beginAtZero: true,
    },
  },
  plugins: {
    annotation: {
      annotations: [{
        id: "slo",
        type: 'line',
        mode: 'horizontal',
        value:10,
        scaleID: "y",
        borderWidth: 2,
        borderDash: [10, 5],
        label: {
          enabled: true,
          content: `SLO:`,
          position: 'start',
        }
      }
      ]
    }
  },
};

 <Line  data={data} options={options}/>

[Tieantono]

After looking up from various sources up to @Assem-Hafez answers, I can confirm the similar solutions based on his answer works well too on my Next.js version 10 project + Typescript 4.2.4.

I'm using these following packages:

• react-chartjs-2 version 3.0.5
• chart.js version 3.5.1
• chartjs-plugin-annotation version 1.0.2

You must follow the plugin registration procedure based on this documentation: https://www.chartjs.org/chartjs-plugin-annotation/guide/integration.html#bundlers-webpack-rollup-etc. But instead of using Chart class from chart.js, you can use the one from react-chartjs-2.

Below are the full component page that display a Bar chart component allong with simple annotation:

import React from 'react';
import type * as ChartJs from 'chart.js';
import { Chart, Bar } from 'react-chartjs-2';
import annotationPlugin from 'chartjs-plugin-annotation';
Chart.register(annotationPlugin);

/**
 * References:
 * https://github.com/reactchartjs/react-chartjs-2/issues/201#issuecomment-853401442
 * https://www.chartjs.org/chartjs-plugin-annotation/guide/usage.html
 */

const TestPage: React.FunctionComponent = () => {
    const data: ChartJs.ChartData = {
        labels: ['40%', '60%', '80%', '100%'],
        datasets: [
            {
                label: '# of Votes',
                data: [45, 30, 75, 95],
                backgroundColor: [
                    '#CD7F32',
                    '#C0C0C0',
                    '#FFD700',
                    '#8C92AC',
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                ],
                borderWidth: 1,
            },
        ],
    };

    const options: ChartJs.ChartOptions = {
        indexAxis: 'y',
        plugins: {
            annotation: {
                annotations: [{
                    id: 'box1',
                    type: 'box',
                    xMin: 0,
                    xMax: 40,
                    yMin: 0,
                    yMax: 3,
                    backgroundColor: 'rgba(255, 99, 132, 0.25)'
                }]
            }
        }
    }

    return (
        <div>
            <Bar data={data} options={options} />
        </div>
    )
}

export default TestPage;

[scole954387]

i'm using those versions:

"chart.js": "3.3.2",
"react-chartjs-2": "3.0.3",
"chartjs-plugin-annotation": "1.0.2",

The following code worked for me

import { Chart } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';
import { Line } from 'react-chartjs-2';
Chart.register(annotationPlugin);

const options = {
  scales: {
    y: {
      type: 'linear',
      grace: "5%",
      beginAtZero: true,
    },
  },
  plugins: {
    annotation: {
      annotations: [{
        id: "slo",
        type: 'line',
        mode: 'horizontal',
        value:10,
        scaleID: "y",
        borderWidth: 2,
        borderDash: [10, 5],
        label: {
          enabled: true,
          content: `SLO:`,
          position: 'start',
        }
      }
      ]
    }
  },
};

 <Line  data={data} options={options}/>

After many hours of trying everything I've found on google and here... This worked!!! Thank you very much!

[RudrikaJnext]

https://stackoverflow.com/questions/68046847/adding-data-labels-inside-charts-in-reactjs-is-not-working This is the easiest way to resolve! Thanks to the one who asked this and the one who precisely answered this! :)

[aikastor]

the solutions do not work for v4