0👍
✅
Line charts default to a linear Y axis and a category X axis. Specifying data.labels explicitly sets labels for the x-axis category ticks but these are just text, and won’t match the computed scale.
As x and y values are passed both axes need to be linear:
-
Remove the
data.labelsarray. -
Add the following to
options:scales: { x: { type: 'linear' } }
Working example:
(function($) {
/* "use strict" */
/* function draw() {
} */
var dzSparkLine = function() {
//let draw = Chart.controllers.line.__super__.draw; //draw shadow
var screenWidth = $(window).width();
var lineChart1 = function() {
if (jQuery('#lineChart_1').length > 0) {
//basic line chart
const lineChart_1 = document.getElementById("lineChart_1").getContext('2d');
lineChart_1.height = 100;
new Chart(lineChart_1, {
type: 'line',
data: {
defaultFontFamily: 'Poppins',
/*labels: [10000, 11000, 12000, 13000, 14000, 15000, 16000, 17000, 18000, 18428.91, 19000, 20000, 21000, 22000, 23000, 24000, 25000, 25357.89, 26000, 27000, 28000, 28264.22, 29000, 29555.19],*/
datasets: [{
label: '5390',
data: [{
x: 10000,
y: 58.81
},
{
x: 11000,
y: 57.34
},
{
x: 12000,
y: 55.99
},
{
x: 13000,
y: 54.21
},
{
x: 14000,
y: 52.09
},
{
x: 15000,
y: 49.32
},
{
x: 16000,
y: 45.53
},
{
x: 17000,
y: 41.87
},
{
x: 18000,
y: 36.87
},
{
x: 18428.91,
y: 34.15
},
],
borderColor: '#FF00FF',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#FF00FF'
}, {
label: '6160',
data: [{
x: 12000,
y: 76.66
},
{
x: 13000,
y: 75.7
},
{
x: 14000,
y: 74.15
},
{
x: 15000,
y: 72.38
},
{
x: 16000,
y: 70.14
},
{
x: 17000,
y: 68.08
},
{
x: 18000,
y: 64.76
},
{
x: 19000,
y: 60.64
},
{
x: 20000,
y: 55.75
},
{
x: 21000,
y: 49.57
},
{
x: 22000,
y: 42.18
},
],
borderColor: '#4472C4',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#4472C4'
}, {
label: '6930',
data: [{
x: 14000,
y: 97.17
},
{
x: 15000,
y: 96.06
},
{
x: 16000,
y: 94.58
},
{
x: 17000,
y: 93.3
},
{
x: 18000,
y: 91.41
},
{
x: 19000,
y: 89.35
},
{
x: 20000,
y: 86.44
},
{
x: 21000,
y: 82.95
},
{
x: 22000,
y: 79.01
},
{
x: 23000,
y: 73.08
},
{
x: 24000,
y: 65.36
},
{
x: 25000,
y: 55.55
},
{
x: 25357.89,
y: 50.67
},
],
borderColor: '#ED7D31',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#ED7D31'
}, {
label: '7700',
data: [{
x: 16000,
y: 119.81
},
{
x: 17000,
y: 119.22
},
{
x: 18000,
y: 117.988
},
{
x: 19000,
y: 116.55
},
{
x: 20000,
y: 115.05
},
{
x: 21000,
y: 113.003
},
{
x: 22000,
y: 110.186
},
{
x: 23000,
y: 108.44
},
{
x: 24000,
y: 104.15
},
{
x: 25000,
y: 99.4
},
{
x: 26000,
y: 93.33
},
{
x: 27000,
y: 84.8
},
{
x: 28000,
y: 68.7
},
{
x: 28264.22,
y: 60.7
},
],
borderColor: '#A5A5A5',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#A5A5A5'
}, {
label: '8085',
data: [{
x: 19000,
y: 130.56
},
{
x: 20000,
y: 129.3
},
{
x: 21000,
y: 127.6
},
{
x: 22000,
y: 126.08
},
{
x: 23000,
y: 123.7
},
{
x: 24000,
y: 121.088
},
{
x: 25000,
y: 117.9
},
{
x: 26000,
y: 113.6
},
{
x: 27000,
y: 108.2
},
{
x: 28000,
y: 99.17
},
{
x: 29000,
y: 84.9
},
{
x: 29555.19,
y: 66.15
},
],
borderColor: '#0070C0',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#0070C0'
}, {
label: 'Efficiency',
data: [
{
x: 17000,
y: 100
}
],
borderColor: 'black'
}],
},
options: {
interaction: {
//mode: 'y'
},
scales: {
x: {
type: 'linear'
}
}
}
});
}
}
/* Function ============ */
return {
init: function() {},
load: function() {
lineChart1();
},
resize: function() {
lineChart1();
}
}
}();
jQuery(document).ready(function() {});
jQuery(window).on('load', function() {
dzSparkLine.load();
});
jQuery(window).on('resize', function() {
dzSparkLine.resize();
});
})(jQuery);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<div class="card-body">
<canvas id="lineChart_1"></canvas>
</div>Source:stackexchange.com