score:2
The sampleSize
property in your y axis config is the culprit, since you put it to 1
it only looks at the first tick for the length that it can use. But other data in your array is way larger so it wont fit. Removing this property or making it a bigger number so it would sample more ticks will resolve your behaviour (removing will give most consistent results).
const optionsTotali = {
maintainAspectRatio: false,
responsive: true,
plugins: {
legend: {
display: false
},
tooltip: {
displayColors: false,
mode: "index",
intersect: 0,
callbacks: {
label: function(context) {
return "€" + context.parsed.y.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/[,.]/g, m => (m === ',' ? '.' : ','));
}
}
},
},
scales: {
y: {
grid: {
display: false
},
ticks: {
min: 0,
beginAtZero: true,
callback: function(value, index, values) {
return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
}
}
}
};
const ctx = document.getElementById("chartTotali").getContext('2d');
const chartTotali = new Chart(ctx, {
type: 'line',
data: {
labels: [
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00"
],
datasets: [{
label: "Totale €",
fill: true,
backgroundColor: '#0084ff',
borderColor: '#0084ff',
borderWidth: 2,
pointBackgroundColor: '#0084ff',
data: [
"17089.36",
"394279.52",
"514863.02",
"540198.74",
"379222.06",
"8793.42",
"79.58",
"116379.41",
"444580.43",
"506663.36",
"457947.28",
"138158.94",
"398.46"
],
}]
},
options: optionsTotali
});
.card-chart {
overflow: hidden;
}
.card {
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 0.0625rem solid rgba(34, 42, 66, .05);
border-radius: 0.2857rem;
}
.card {
background: #27293d;
border: 0;
position: relative;
width: 100%;
margin-bottom: 30px;
box-shadow: 0 1px 20px 0 rgb(0 0 0 / 10%);
}
.card .card-body {
padding: 15px 15px 15px 15px;
}
.card-body {
flex: 1 1 auto;
padding: 1.5rem;
}
.card-chart .chart-area {
height: 220px;
width: calc(100% + 30px);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
<div class="card card-chart">
<div class="card-header">
<div class="row">
<div class="col-sm-6 text-left">
<h5 class="card-category">Totale vendite</h5>
<h2 class="card-title">Totali</h2>
</div>
</div>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="chartTotali" width="1563" height="220" style="display: block; box-sizing: border-box; height: 220px; width: 1563px;"></canvas>
</div>
</div>
</div>
score:-1
You can use the sampleSize property
score:0
After testing your code, the problem seems to come from this part :
callback: function(value, index, values) {
return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
My guess is : since you change the labels in an async callback, chart.js doesn't know which width to aply anymore and goes with the width of the first label...
You could resolve this by setting the width like this :
afterFit: function(scaleInstance) {
scaleInstance.width = 100; // sets the width to 100px
}
Source here : How to set fixed width for labels in chartjs
score:2
You can handle it with the sampleSize: x,
property. You can removed then the y-axis will show correctly. Many thank to @LeeLenalee!
const optionsTotali = {
maintainAspectRatio: false,
responsive: true,
plugins: {
legend: {
display: false
},
tooltip: {
displayColors: false,
mode: "index",
intersect: 0,
callbacks: {
label: function(context) {
return "€" + context.parsed.y.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/[,.]/g, m => (m === ',' ? '.' : ','));
}
}
},
},
scales: {
y: {
grid: {
display: false
},
ticks: {
min: 0,
beginAtZero: true,
callback: function(value, index, values) {
return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
}
}
}
};
const ctx = document.getElementById("chartTotali").getContext('2d');
const chartTotali = new Chart(ctx, {
type: 'line',
data: {
labels: [
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00"
],
datasets: [{
label: "Totale €",
fill: true,
backgroundColor: '#0084ff',
borderColor: '#0084ff',
borderWidth: 2,
pointBackgroundColor: '#0084ff',
data: [
"17089.36",
"394279.52",
"514863.02",
"540198.74",
"379222.06",
"8793.42",
"79.58",
"116379.41",
"444580.43",
"506663.36",
"457947.28",
"138158.94",
"398.46"
],
}]
},
options: optionsTotali
});
.card-chart {
overflow: hidden;
}
.card {
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 0.0625rem solid rgba(34, 42, 66, .05);
border-radius: 0.2857rem;
}
.card {
background: #27293d;
border: 0;
position: relative;
width: 100%;
margin-bottom: 30px;
box-shadow: 0 1px 20px 0 rgb(0 0 0 / 10%);
}
.card .card-body {
padding: 15px 15px 15px 15px;
}
.card-body {
flex: 1 1 auto;
padding: 1.5rem;
background: ;
}
.card-chart .chart-area {
height: 220px;
width: calc(100% + 30px);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
<div class="card card-chart">
<div class="card-header">
<div class="row">
<div class="col-sm-6 text-left">
<h5 class="card-category">Totale vendite</h5>
<h2 class="card-title">Totali</h2>
</div>
</div>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="chartTotali" style=""></canvas>
</div>
</div>
</div>
Source: stackoverflow.com
Related Query
- How do I prevent the scale labels from being cut off in chartjs?
- Prevent y-axis labels from being cut off
- How to prevent first/last bars from being cut off in a chart with time scale
- How to stop axis label from being cut off in chart JS?
- yAxis labels are being cut off in ngEchars (Echarts)
- React ChartJS prevent new data from being added into state after it's redrawn?
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- How to prevent tick labels from "jumping" when drawn with ChartJS BeforeDraw
- Prevent label of another data from being toggled whenever a label from one data is toggled
- ChartJS - Scale x axis labels from single days to multiple months
- ChartJS - Horizontal Stacked Bar Chart Tooltip being cut off by Bottom of Canvas
- Chart js legend are being cut off if the bar height is equal to port height - chart js
- In Chart.js, how do I hide certain axis labels from a stacked bar chart?
- Data Labels are getting cut off on the top
- Hiding labels on y axis in Chart.js
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Chart JS data labels getting cut
- chartjs tooltip is cut off when out of canvas
- Chart.js line chart is cut off at the top?
- Hide min and max values from y Axis in Chart.js
- How I can prevent of labels overlapping on mobile screen Chart.js
- Using Chart.js - The X axis labels are not all showing
- How to wrap X axis labels to multi-lines (X axis label formatting) in ng2-Charts?
- Changing x axis labels in Chart.js line chart
- Line chart with large number of labels on X axis
- Bubble getting cut off in Chart.js
- ChartJs: X Axis labels cutting at bottom
- ChartJS Line chart cut off at the top and bottom
- Filtering labels to show user from Chart.js
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
More Query from same tag
- ChartJS: how to change data in hover box?
- Php array and chartjs
- Chart.js Example Diagramm don't show
- React Js and Chart Js (Line Chart)
- Chart.js not displaying in box
- Integrate chartjs-chart-treemap with react-chartjs-2
- ChartJS Tooltip - Change Data Format Displayed
- In Chart.js set chart title, name of x axis and y axis?
- Chartjs chart with only one axis
- Create Conditional Chart
- chart js - Apply different color for each x-axes label
- Chart.js: summing number of items in active/shown datasets on yAxes of pie chart
- Chart JS - Horizontal Bar Chart Not Filling Canvas
- how to make realtime update chart like in package express-status-monitor?
- Using ChartJs with MVC 5 Razor
- Show the latest labels in a bar chart with React.js using react-chartjs
- How to color legend in angular-chart.js
- Charts not showing on ASP.NET MVC page
- Chart.js xAxis linear scale : strange behavior
- Django and Chart.js Not Rendering Graph Correctly
- Chart.JS Multiline Chart with unknown numbers of Lines from JSON
- how to group the chart
- How to add space Between Columns in Bar chartjs and remove the space in the end
- Chartjs annotation plugin colored box colors get summed after switching back and forth
- Styling the middle text of Chart.js's doughnut chart
- Chart.js v2: How to make tooltips always appear on pie chart?
- Cursor pointer change onhover not working in chartjsv3
- How to increase the spacing between labels and the chart
- Use of ng-class with Chart.js
- 'scales' option appears to break Chart.js graph