score:2
Accepted answer
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: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 canvas showing previous graph when changing Graph types
- Chartjs annotation plugin colored box colors get summed after switching back and forth
- How do I display a chart with chart.js?
- How can I add new data points to an existing chart with chart.js?
- Dynamic Chart Data
- ChartJS align bars to left instead of center
- How to create Waterfall model chart using QuickChart?
- Overlay Line on chart.js Graph
- How to change the labels to the image (icon) in bar chart.js
- Chart.js graph with just two cordinates
- Converting ChartJSCore to Highcharts.net - issue with dynamic series data in a loop
- How do I make the Line in ChartJS not exceed the maximum of yAxes
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Chart.js ignore options
- Chartjs different length of labels and datasets
- Could not find elementById on mat-card-content
- ng2-charts tooltip and legend stopped working
- Chart.js update() method only works once in the end instead of updating every iteration
- How can I add multiple datasets into my dropdown menu and keep it as dynamic as it is right now?
- Remove additional white space on left and right side of Angular Chart
- How to reduce the distance between yAxes in Chart.js?
- Add images inside bar chart in chart.js
- running an onclick command to show a table in chartsJS
- displaying bar chart in laravel
- Canvas won't appear in html
- Generate bar chart using chart.js and associative array
- How can we build charts on Polymer 1.0 using Chart.js?
- Removing axes lines on chart.js
- how to make doughnut chart portions, buttons
- Charts js and laravel: Render chart after passing in json data
