I'm still facing this issue .. I'm using react-chartjs2 library. I want to align my legends and title with my graph. I'm using "chart.js": "^4.4.3","chartjs-plugin-datalabels": "^2.2.0", "react-chartjs-2": "^5.2.0",
sharing my code :
`import { Bar } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from "chart.js";
import ChartDataLabels from "chartjs-plugin-datalabels";
Expected behavior
Current behavior
I'm still facing this issue .. I'm using react-chartjs2 library. I want to align my legends and title with my graph. I'm using "chart.js": "^4.4.3","chartjs-plugin-datalabels": "^2.2.0", "react-chartjs-2": "^5.2.0",
sharing my code : `import { Bar } from "react-chartjs-2"; import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, } from "chart.js"; import ChartDataLabels from "chartjs-plugin-datalabels";
ChartJS.register( CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ChartDataLabels );
function BarGraph(props) { const data = { labels: ["As of: 12/21/23", "As of: 3/5/24"], datasets: [ { label: "Holdings", data: [240000, 264000], backgroundColor: "#771B85", }, { label: "Hedge", data: [1000000, 900000], backgroundColor: "#415580", }, ], };
const options = { plugins: { title: { display: true, text: "Total Holdings Value", align: "start", font: { size: 18, }, }, tooltip: { mode: "index", intersect: false, }, legend: { display: true, position: "top", align: "start", }, datalabels: { display: true, color: "white", font: { weight: "bold", }, formatter: (value) =>
$${value.toLocaleString()}, }, }, responsive: true, scales: { x: { stacked: true, grid: { display: false, }, border: { display: false, // Hide the border line on y-axis }, ticks: { color: "#323232", // Set x-axis ticks color font: { family: "MazzardHBold", size: 14, lineHeight: 1.5, }, }, }, y: { stacked: true, grid: { display: false, }, border: { display: false, // Hide the border line on y-axis }, ticks: { display: false, callback: (value) =>$${value.toLocaleString()}, }, }, }, };return (
); }
export default BarGraph; `
Reproducible sample
https://codesandbox.io/p/devbox/react-chartjs-2-chart-js-issue-template-v4-forked-4zstwt?file=%2Fsrc%2FApp.tsx%3A44%2C17&workspaceId=4a51dc85-011f-4549-b5ea-67f6948db84d
Optional extra steps/info to reproduce
No response
Possible solution
No response
Context
No response
chart.js version
4.4.3
Browser name and version
No response
Link to your project
No response
For these kind op support questions please head over to Stack overflow