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,
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 would create an horizontal bar chart.
The problem is that I can't change the height of the chart ( not the bar )
I created my data and options configuration:
this.data = {
labels: ['SAF/TGA'],
datasets: [
{
label: 'SAF/TGA',
backgroundColor: '#9CBB65',
borderColor: '#72242',
data: [28],
}
],
}
this.options= {
responsive: true,
maintainAspectRatio: false
scales: {
yAxes: [{
barThickness: 5,
gridLines:{
display: true,
offsetGridLines: false
}
}],
xAxes: [{
gridLines:"rgba(0, 0, 0, 0)"
}]
},
}
}
then I call my chart in HTML with height and width options:
<p-chart type="horizontalBar" [data]="data" [options]="options" width="10" height="10px">
</p-chart>
The height does not change when I change the values height in html
And this is what I would
With the axes that gets closer to the bar.
Try changing the options to disable the aspect ratio
var chart = new Chart('bar_charty', {
type: 'bar',
data: {},
options: {
maintainAspectRatio: false,
}
});
This should scale your chart when you make the height on the containing element larger.
You might also need to create a container for the chart like this, and set it's height in the parent.
<div style="height: 300px">
<canvas id="chart"></canvas>
</div>
I created a horizontal grouped bar chart in Chart.js but am getting stuck on a weird problem.
The problem is that while I disabled all grid lines and borders the chart is still showing a top horizontal line which I would like to get rid off.
It is visible in this screenshot: http://imgur.com/41YGxA8.
I also made a JSFiddle: https://jsfiddle.net/bsocw1v9/
function create_horizontal_bar_chart(){
/**
* Draw the chart on the correct canvas. Add the correct data sets
* and set the correct draw type.
*/
let ctx = document.getElementById('monthly_subscription_revenue_chart').getContext("2d");
let data = {
labels: ['Diensten'],
datasets: [
{
type: 'horizontalBar',
backgroundColor: "rgb(0,33,86)",
data: [2250],
stack: 1
},
{
type: 'horizontalBar',
backgroundColor: "rgb(219,219,219)",
data: [3000],
stack: 2
},
{
type: 'horizontalBar',
backgroundColor: "rgb(240,95,0)",
data: [750],
stack: 3
},
]
};
new Chart(ctx, {
type: 'horizontalBar',
data: data,
showScale: false,
options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
hover: {
mode: null
},
scales: {
xAxes: [{
stacked: true,
display: false,
gridLines: {
drawBorder: false,
},
}],
yAxes: [{
stacked: true,
barPercentage: 0.9,
gridLines: {
drawBorder: false,
},
}]
}
}
});
}
I hope someone could help me with this problem as I simply can't figure out whats causing this.
You have only disabled borders on the edge of the chart (by setting drawBorder to false), not grid lines. The line that bugs you is a grid line. To disable grid lines for an axis use:
gridLines: {
display: false
}
Look at the docs under "Grid Line Configuration".
I'm working with a chart-js bar chart that has to be placed inside a small div so I was searching for a way to make the labels in the x-axis horizontal instead of diagonal. The point is to gain as much height as possible for the actual bars because right now the labels consume almost 40% of the available space.
This is my code:
let options = {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
display: false
}]
}
};
let ctx = document.getElementById('barChartCtx');
let barChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
I have temporarily disabled the xAxis labels. It works but ideally I would like them to be horizontal. Thoughts?
You can use the scale ticks maxRotation and minRotation properties to control this.
Here is an example.
let options = {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
minRotation: 0,
maxRotation: 0
}
}]
}
};
Keep in mind that the reason they are diagonal is because chart.js calculated that they would not fit at their default horizontal orientation. If you find that they overflow on each other when horizontal then you can still use the above properties to tweak the rotation so they are only slightly diagonal.
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.