Hi i'm quite new to JS and looking for an easy way to show a custom map with my own backgroundimage and several points with x-y-coordinates on it.
At first it worked quite well using the "line"-chart-type of chart.js (v2.5) with disabled showScale()-option and fixed axes-max/min-values.
My problem is that the backgroundimage is not rescaling properly when i change the window-size or show/hide the legend of the chart.
Here is my JS-code for creating the chart:
function initMap() {
scatterChart = new Chart(document.getElementById("scatterChart"), {
responsive: true,
type: 'line',
data: {
/*datasets: [
{
}
]
*/
},
showScale: false,
options: {
scales: {
yAxes: [{
display: false,
ticks: {
max: y_max,
min: 0,
stepSize: 0.1
}
}],
xAxes: [{
display: false,
type: 'linear',
position: 'bottom',
ticks: {
max: x_max,
min: 0,
stepSize: 0.1
}
}]
},
onClick: function (evt) {
var activePoint = scatterChart.getElementAtEvent(evt);
},
legend: {
position: 'right',
labels: {
fontSize: 15
}
},
}
});
}
HTML:
<canvas id="scatterChart" style="width: 1920px; height: 1080px; background-image:url('media/map_background.jpg'); background-size: 100% 100%;"></canvas>
Here are two images showing the effect:
https://1drv.ms/i/s!As59C5Mmd0nahr1zP4rjwI5KobaM3Q
https://1drv.ms/i/s!As59C5Mmd0nahr10KwUCJ4wpvfn4_g
What can i do to get a proper rescaling (points should always be shown on the same position on the map regardless of windowsize or enabled/disabled legend)?
Have you tried using the maintainAspectRatio property and setting it to true? That should hopefully fix your window resize issue.
The only way to fix the legend issue is to use a legend that is external to the canvas because the legend takes up space in the canvas so the chart is squished horizontally (there is no layering concept in a canvas). See this example for how to generate an external legend.
You must use the legendCallback property and the .generateLegend() prototype method.
Related
In my implementation of Chart.js (v3.9.1) I have a line graph with tooltips. The tooltip plugin definition is as follows ( ... added for brevity in code):
this.graph = new Chart(document.querySelector('#m-graph'), {
type: 'line',
data: {...},
options: {
responsive: true,
maintainAspectRatio: false,
interaction: {
mode: 'point'
},
stacked: false,
showTooltips: true,
title: {
display: false
},
scales: scales,
plugins: {
legend: {...},
tooltip: {
position: 'nearest',
callbacks: {
label: (context) => {
...
}
}
}
}
}
});
When I hover over data points, the more "to the right" I go on the X axis, the further away from each data point I need to hover to get the tooltip to popup. GIF below shows issue.
Any ideas/advice on what settings to toggle to fix this? Or is this a bug?
Thank you to #Konrad Linkowski above for pushing me into the right direction. I had the canvas element for the graph sized with width: calc(100% - 5rem). Removing that fixes the issue.
I am currently using a line-chart with chart.js 3.5.0 and react-chart-js 3.0.4, given two datasets.
The first dataset has data in {x,y}-format with null-values for some y.
When hovering over those null-values, the tooltip jumps to the start of the second dataset. In this case, I would like to hide the tooltip, but approaching the problem with callbacks didn't work.
Has anybody experienced the same issue?
Screenshot
codesandbox
const options = {
interaction: {
intersect: false
},
maintainAspectRatio: true,
animation: false,
plugins: {
tooltip: {
mode: 'nearest',
axis: 'x',
position: 'average',
yAlign: "bottom"
},
},
scales: {
y: {
type: 'linear',
beginAtZero: true,
min: 0,
grace: '20%',
}
},
chartArea: {
backgroundColor: "rgb(240,240,240)"
}
}
You can use mode: 'x' in your tooltip config.
Together with setting pointHitRadius to 0 in both datasets makes it so you dont have duplicate values in your tooltip.
Example: https://codesandbox.io/s/hardcore-brown-1vxcjh?file=/src/components/CChart.jsx
I'm using Chart.js with a React wrapper (react-chartjs-2). I want to upgrade to the latest major version of Chart.js (3.x) to remove the dependency on moment, among other benefits. There are lots of breaking changes in 3.x, and I've gotten nearly everything working again with all the breaking changes, except for this one infuriatingly small thing.
There is a tiny white border around the whole chart that I cannot for the life of me get rid of. The weird part is that it disappears when the data for the chart changes and it causes a re-render. This is what it looks like:
And this is what it's supposed to look like (seamlessly disappearing into the next div on the page):
It's probably one line in options that I need to change, but I can't figure out which line it would be. I thought it might be scale.[id].grid.zeroLineColor because the 3.x upgrade guide says this: "scales.[x/y]Axes.zeroLine* options of axes were removed. Use scriptable scale options instead." But I set color using the scriptable options like this:
grid: {
color: () => "transparent"
}
and that only fixed part of the issue. Because now the "zero line" isn't grey, but there still seems to be 1px of padding or something around the whole chart, on the bottom and on the right side.
I've set every other property I can think of.
Here's what the options look like right now:
const options = {
hover: { intersect: false },
borderWidth: 0,
clip: 0,
plugins: {
legend: {
position: "bottom",
align: "center",
display: false,
},
tooltip: {
intersect: false,
mode: "index",
callbacks: {
//This removes the tooltip title
// title: function () {},
label: ({ raw }) => {
return `$${formatNumber(raw)}`;
},
},
//this removes legend color
displayColors: false,
padding: 15,
position: "average",
pointHitRadius: 20,
pointRadius: 30,
caretSize: 10,
backgroundColor: "rgba(255,255,255,.9)",
borderColor: rgbaStringFromRGBObj(palette.Vibrant.rgb, 0.35),
borderWidth: 2,
bodyFont: {
family: "Satoshi",
size: 18,
},
bodyColor: "#303030",
titleFont: {
family: "Satoshi",
},
titleColor: "rgba(0,0,0,0.6)",
},
},
scales: {
y: {
ticks: {
backdropPadding: 0,
display: false,
},
stacked: false,
grid: {
drawBorder: false,
borderWidth: 0,
drawTicks: false,
color: "transparent",
width: 0,
},
drawBorder: false,
drawTicks: false,
},
x: {
padding: 0,
ticks: {
display: false,
padding: 0,
mirror: true,
backdropPadding: 0,
},
grid: {
drawBorder: false,
drawTicks: false,
display: false,
},
drawBorder: false,
drawTicks: false,
},
},
maintainAspectRatio: false,
}
and here's a pull request with all the code in context.
This problem was happening for me when responsive was set to true in the chart's options because the width and height that the chart assumes is set to the "ones" place - it doesn't include decimals. Example:
vs.
The canvas rendered by ChartJS ignores the decimal-level specificity of its parent wrapper... Whether by bug or by design.
Solution
In my case, the aforementioned bug resulted in a small white line at the bottom of the chart.
I got around the problem by setting the parent's style to display: flex; and flexing the chart to the end with flex-direction: column; and justify-content: flex-end. Since the chart was slightly shorter than the parent, flexing it to the end (bottom) of its parent wrapper effectively "removed" the white line.
Generally: Experiment with positioning the chart with knowledge that it's probably a fraction of a pixel less wide/less tall than its parent.
I am using chartjs 2.7.3 and I have a problem when setting the size of the div that encloses canvas the image is blurry and letters are not visible like the screenshot below:
The code is:
<div class="stackedChartClass">
<canvas #stackedChart></canvas>
</div>
let stackedChartOptions: any = {
responsive: false,
legend: {
position: 'right' // place legend on the right side of chart
},
scales: {
xAxes: [{
stacked: true // this should be set to make the bars stacked
}],
yAxes: [{
stacked: true // this also..
}]
}
}
this.stackedChart = new Chart(pieCtx,
{
type: 'bar',
data: this.stackedChartData,
options: stackedChartOptions,
responsive: true
}
);
and the css
.stackedChartClass>canvas {
width: 100% !important;
height: 50vh !important;
}
How can this be fixed?
I added this to options and the blur effect was gone.
responsive: true,
maintainAspectRatio: false,
I have a line chart, and at first, all the labels on x-axis are fully horizontal. Something like this:
Now if add more data, the labels start to rotate:
Until comes a point where it seems to have reached the maximum degree to which it can rotate:
By the looks of it, I think the maximum degree is 45. So now, if I add a little more data, instead of rotating the labels more, it removes every one in two labels, and becomes like this:
How can I increase this degree to 90, so that the labels rotate as much as becoming fully vertical?
Here's the code I used for the chart:
new Chart(chart, {
type: 'line',
data: chart_data,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
position: 'top',
labels: {
boxWidth: 5,
usePointStyle: true
}
},
events: ['click', 'mousemove'],
onClick: clicked,
pan: {
enabled: true,
mode: 'x',
onPanComplete: function(event) {
console.log(event)
}
},
zoom: {
enabled: true,
mode: 'x'
}
}
});
You can configure this using the maxRotation property of the common tick configuration object.
Your code needs to be modified like so:
options: {
scales: {
xAxes: [{
ticks: {
maxRotation: 90
}
}],
yAxes: [{
...
The keyword of the issue is not rotation i think, it is Tick on xAxes.
I think this link can help you :
https://www.chartjs.org/docs/latest/axes/styling.html#tick-configuration
also
Chart.js: evenly distribute ticks when using maxTicksLimit
xAxes: [{
ticks: {
autoSkip: false, // Skip or not?
maxTicksLimit: 30 // How much?
}
}]
and rotation just can help as #timclutton said here : https://stackoverflow.com/a/58275468/7514010