change chart canvas size move mouse point over the line chart #11099
Unanswered
janith-rathanyaka
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
I create some charts in dashboard using react-chart-js. exmaple

but I have problem now chart not clear. I decided do change chart canvas size move mouse point over the chart . but i can't find solution for that. i currently use "react-chartjs-2": "3.3.0" and "chart.js": "^3.6.0" packages.
I use this option list for draw charts,
const options = { responsive: true, animation: { duration: 0, }, plugins: { legend: { fullSize: false, position: "bottom" as const, labels: { display: true, }, }, title: { display: true, color: "white", font: { size: 14, family: "tahoma", weight: "normal", style: "italic", }, text: axis.thresholdValues.sensorName, }, subtitle: { display: true, text:
average: x-axis: ${axis.average.x} y-axis: ${axis.average.y} z-axis: ${axis.average.z}, color: "white", align: "end", font: { size: 12, family: "tahoma", weight: "normal", style: "italic", }, // padding: { // bottom: 20, // }, }, zoom: { pan: { // pan options and/or events enabled: true, speed: 0.01, }, limits: { // axis limits }, zoom: { // zoom options and/or events wheel: { enabled: true, }, pinch: { enabled: true, }, speed: 0.01, }, }, annotation: { annotations: { min: { // type: 'line', yMin: axis.thresholdValues.min, yMax: axis.thresholdValues.min, borderColor: "#D8D8D8", // borderWidth: 2, }, max: { // type: 'line', yMin: axis.thresholdValues.max, yMax: axis.thresholdValues.max, borderColor: "#DB00FF", // borderWidth: 2, }, }, }, tooltip: { mode: "index", intersect: false, }, }, spanGaps: true, datasets: { line: { pointRadius: 0, // disable for all
'line'datasets }, }, elements: { point: { radius: 0, // default to disabled in all datasets }, }, transitions: { zoom: { animation: { duration: 0, }, }, }, scales: { x: { title: { display: true, text: "Time", align: "end" }, type: "time", }, y: { title: { display: true, text: "second", align: "top" }, }, }, events: ["click"], hover: { mode: "nearest", intersect: false, }, };
Any one can suggest solution for it.
Beta Was this translation helpful? Give feedback.
All reactions