Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
chartjs-react
Advanced tools
Tiny, written in TS, based on React hooks wrapper for Chart.js v4
The main problem that the most popular package react-chartjs-2
was written
many years ago has a bunch of legacy code and issues
(in 90% of cases it does not work without the redraw = true flag).
The main idea was to completely rewrite code into modern React with hooks.
The second goal, add custom React tooltips for Chart.js
The version format is X.Y.Z, where
If you like to use this module please click the star button - it is very motivating.
Install chartjs-react using npm:
$ npm install chartjs-react
TODO tooltips
Bar chart on Chart.js v3 (date-fns)
import {
BarController,
LinearScale,
BarElement,
TimeScale,
Tooltip,
} from 'chart.js';
import 'chartjs-adapter-date-fns';
import { enUS } from 'date-fns/locale';
import { ReactChart } from 'chartjs-react';
// Register modules,
// this example for time scale and linear scale
ReactChart.register(BarController, LinearScale, BarElement, TimeScale, Tooltip);
// options of chart similar to v2 with a few changes
// https://www.chartjs.org/docs/next/getting-started/v3-migration/
const chartOption = {
scales: {
x: {
type: 'time',
adapters: {
date: enUS,
},
},
y: {
type: 'linear',
},
},
};
// data of chart similar to v2, check the migration guide
const chartData = {};
const BarChart = () => {
return (
<ReactChart
type="bar"
data={chartData}
options={chartOption}
height={400}
/>
);
};
Get the chart instance
import { Chart } from 'chart.js';
onEvent = () => {
const myChartInstance = Chart.getChart('unique-chart-id');
// Do your stuff with the chart instance
// Note: the chart should be mounted
};
const BarChart = () => {
return (
<ReactChart
id="unique-chart-id"
type="bar"
data={chartData}
options={chartOption}
height={400}
/>
);
};
FAQs
TypeScript React wrapper for Chart.js with hooks and tooltip
The npm package chartjs-react receives a total of 1,304 weekly downloads. As such, chartjs-react popularity was classified as popular.
We found that chartjs-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.