tessl/npm-react-chartjs-2

React components for Chart.js providing seamless integration of interactive charts in React applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Chart Components

Name: tessl/npm-react-chartjs-2
Author: tessl

React components for rendering different types of Chart.js charts. All components are React forwardRef components that provide access to the underlying Chart.js instance.

Capabilities

Generic Chart Component

A flexible component that can render any Chart.js chart type by specifying the type prop.

/**
 * Generic chart component that accepts any Chart.js chart type
 * @param props - Chart configuration including type, data, and options
 * @returns JSX.Element representing the chart canvas
 */
function Chart<
  TType extends ChartType = ChartType,
  TData = DefaultDataPoint<TType>,
  TLabel = unknown,
>(props: ChartProps<TType, TData, TLabel> & {
  ref?: ForwardedRef<ChartJSOrUndefined<TType, TData, TLabel>>;
}): JSX.Element;

interface ChartProps<
  TType extends ChartType = ChartType,
  TData = DefaultDataPoint<TType>,
  TLabel = unknown,
> extends CanvasHTMLAttributes<HTMLCanvasElement> {
  /** Chart.js chart type (required) */
  type: TType;
  /** The data object that is passed into the Chart.js chart (required) */
  data: ChartData<TType, TData, TLabel>;
  /** The options object that is passed into the Chart.js chart */
  options?: ChartOptions<TType>;
  /** The plugins array that is passed into the Chart.js chart */
  plugins?: Plugin<TType>[];
  /** Teardown and redraw chart on every update (default: false) */
  redraw?: boolean;
  /** Key name to identificate dataset (default: 'label') */
  datasetIdKey?: string;
  /** A fallback for when the canvas cannot be rendered */
  fallbackContent?: ReactNode;
  /** A mode string to indicate transition configuration should be used */
  updateMode?: UpdateMode;
}

Usage Examples:

import React, { useRef } from "react";
import { Chart } from "react-chartjs-2";
import type { Chart as ChartJS } from "chart.js";

function MyGenericChart() {
  const chartRef = useRef<ChartJS>(null);

  const data = {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: 'Dataset',
      data: [1, 2, 3],
    }],
  };

  return (
    <Chart
      ref={chartRef}
      type="bar"
      data={data}
      options={{ responsive: true }}
    />
  );
}

Line Chart Component

Pre-configured component for rendering line charts.

/**
 * Line chart component with Chart.js line controller pre-registered
 * @param props - Chart configuration without type prop (type is 'line')
 * @returns JSX.Element representing the line chart canvas
 */
function Line<
  TData = DefaultDataPoint<'line'>,
  TLabel = unknown,
>(props: Omit<ChartProps<'line', TData, TLabel>, 'type'> & {
  ref?: ForwardedRef<ChartJSOrUndefined<'line', TData, TLabel>>;
}): JSX.Element;

Usage Examples:

import React from "react";
import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
} from 'chart.js';

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement);

function LineChartExample() {
  const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [{
      label: 'Sales',
      data: [65, 59, 80, 81, 56],
      borderColor: 'rgb(75, 192, 192)',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
    }],
  };

  return <Line data={data} options={{ responsive: true }} />;
}

Bar Chart Component

Pre-configured component for rendering bar charts.

/**
 * Bar chart component with Chart.js bar controller pre-registered
 * @param props - Chart configuration without type prop (type is 'bar')
 * @returns JSX.Element representing the bar chart canvas
 */
function Bar<
  TData = DefaultDataPoint<'bar'>,
  TLabel = unknown,
>(props: Omit<ChartProps<'bar', TData, TLabel>, 'type'> & {
  ref?: ForwardedRef<ChartJSOrUndefined<'bar', TData, TLabel>>;
}): JSX.Element;

Radar Chart Component

Pre-configured component for rendering radar charts.

/**
 * Radar chart component with Chart.js radar controller pre-registered
 * @param props - Chart configuration without type prop (type is 'radar')
 * @returns JSX.Element representing the radar chart canvas
 */
function Radar<
  TData = DefaultDataPoint<'radar'>,
  TLabel = unknown,
>(props: Omit<ChartProps<'radar', TData, TLabel>, 'type'> & {
  ref?: ForwardedRef<ChartJSOrUndefined<'radar', TData, TLabel>>;
}): JSX.Element;

Doughnut Chart Component

Pre-configured component for rendering doughnut charts.

/**
 * Doughnut chart component with Chart.js doughnut controller pre-registered
 * @param props - Chart configuration without type prop (type is 'doughnut')
 * @returns JSX.Element representing the doughnut chart canvas
 */
function Doughnut<
  TData = DefaultDataPoint<'doughnut'>,
  TLabel = unknown,
>(props: Omit<ChartProps<'doughnut', TData, TLabel>, 'type'> & {
  ref?: ForwardedRef<ChartJSOrUndefined<'doughnut', TData, TLabel>>;
}): JSX.Element;

Usage Examples:

import React from "react";
import { Doughnut } from "react-chartjs-2";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';

ChartJS.register(ArcElement, Tooltip, Legend);

function DoughnutExample() {
  const data = {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      data: [300, 50, 100],
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
    }],
  };

  return (
    <Doughnut 
      data={data} 
      options={{ 
        cutout: '60%',
        plugins: { legend: { position: 'bottom' } }
      }} 
    />
  );
}

Polar Area Chart Component

Pre-configured component for rendering polar area charts.

/**
 * Polar area chart component with Chart.js polar area controller pre-registered
 * @param props - Chart configuration without type prop (type is 'polarArea')
 * @returns JSX.Element representing the polar area chart canvas
 */
function PolarArea<
  TData = DefaultDataPoint<'polarArea'>,
  TLabel = unknown,
>(props: Omit<ChartProps<'polarArea', TData, TLabel>, 'type'> & {
  ref?: ForwardedRef<ChartJSOrUndefined<'polarArea', TData, TLabel>>;
}): JSX.Element;

Bubble Chart Component

Pre-configured component for rendering bubble charts.

/**
 * Bubble chart component with Chart.js bubble controller pre-registered
 * @param props - Chart configuration without type prop (type is 'bubble')
 * @returns JSX.Element representing the bubble chart canvas
 */
function Bubble<
  TData = DefaultDataPoint<'bubble'>,
  TLabel = unknown,
>(props: Omit<ChartProps<'bubble', TData, TLabel>, 'type'> & {
  ref?: ForwardedRef<ChartJSOrUndefined<'bubble', TData, TLabel>>;
}): JSX.Element;

Pie Chart Component

Pre-configured component for rendering pie charts.

/**
 * Pie chart component with Chart.js pie controller pre-registered
 * @param props - Chart configuration without type prop (type is 'pie')
 * @returns JSX.Element representing the pie chart canvas
 */
function Pie<
  TData = DefaultDataPoint<'pie'>,
  TLabel = unknown,
>(props: Omit<ChartProps<'pie', TData, TLabel>, 'type'> & {
  ref?: ForwardedRef<ChartJSOrUndefined<'pie', TData, TLabel>>;
}): JSX.Element;

Scatter Chart Component

Pre-configured component for rendering scatter charts.

/**
 * Scatter chart component with Chart.js scatter controller pre-registered
 * @param props - Chart configuration without type prop (type is 'scatter')
 * @returns JSX.Element representing the scatter chart canvas
 */
function Scatter<
  TData = DefaultDataPoint<'scatter'>,
  TLabel = unknown,
>(props: Omit<ChartProps<'scatter', TData, TLabel>, 'type'> & {
  ref?: ForwardedRef<ChartJSOrUndefined<'scatter', TData, TLabel>>;
}): JSX.Element;

Common Props

All chart components accept the same props (except type is omitted from typed components):

data (required): Chart.js data object containing labels and datasets
options: Chart.js configuration options for customizing chart appearance and behavior
plugins: Array of Chart.js plugins to extend functionality
redraw: Boolean to force complete chart redraw on updates (default: false)
datasetIdKey: String key for identifying datasets during updates (default: 'label')
fallbackContent: React node to display when chart cannot render (accessibility)
updateMode: Chart.js update mode for transitions
width: Canvas width in pixels (default: 300)
height: Canvas height in pixels (default: 150)
Plus all standard HTML canvas attributes

Chart.js Registration

All typed chart components automatically register their required Chart.js controllers, but you must register scales, elements, and plugins separately:

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  ArcElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

// Register components you need
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  ArcElement,
  Title,
  Tooltip,
  Legend
);

Types

import type { Chart, ChartType, DefaultDataPoint } from 'chart.js';

type ChartJSOrUndefined<
  TType extends ChartType = ChartType,
  TData = DefaultDataPoint<TType>,
  TLabel = unknown,
> = Chart<TType, TData, TLabel> | undefined;

type ForwardedRef<T> =
  | ((instance: T | null) => void)
  | MutableRefObject<T | null>
  | null;

type BaseChartComponent = <
  TType extends ChartType = ChartType,
  TData = DefaultDataPoint<TType>,
  TLabel = unknown,
>(
  props: ChartProps<TType, TData, TLabel> & {
    ref?: ForwardedRef<ChartJSOrUndefined<TType, TData, TLabel>>;
  }
) => JSX.Element;

type TypedChartComponent<TDefaultType extends ChartType> = <
  TData = DefaultDataPoint<TDefaultType>,
  TLabel = unknown,
>(
  props: Omit<ChartProps<TDefaultType, TData, TLabel>, 'type'> & {
    ref?: ForwardedRef<ChartJSOrUndefined<TDefaultType, TData, TLabel>>;
  }
) => JSX.Element;

Install with Tessl CLI

npx tessl i tessl/npm-react-chartjs-2

docs

tessl/npm-react-chartjs-2