How can I set ChartJS x-axis ticks at specified/fixed intervals? - chart.js

I have a chart.js line chart where the x axis labels are plain old numbers, e.g. [2,4,15,45,90], which represent days on this chart. I don't want the x-axis ticks to mirror the data labels, i want the ticks to be at interval of 20. How can I achieve this?
This in my options does nothing:
xAxes: [ {
display: true,
position: 'bottom',
ticks: {
stepSize: 20,
min: 0,
max: 140
}
],
example here: jsfiddle
...the only (awful) way i found is to turn the numbers into dates and in the ticks callback, calculate the number of days difference. as seen here

You could use a scatter chart that accepts the data as individual points, objects with properties x and y. To turn a scatter chart back to a line chart, simply define showLine: true on each dataset.
To product data as individual points, you can defined labels outside of the chart and convert both value arrays using Array.map() as follows.
valueArray.map((v, i) => ({ x: labels[i], y: v }))
The last thing to do is defining xAxis.ticks as follows:
ticks: {
stepSize: 1,
autoSkip: false,
callback: value => value % 20 == 0 ? value : null,
min: labels[0],
max: labels[labels.length - 1],
maxRotation: 0
},
Please have a look at your amended code below:
const labels = [7, 14, 21, 35, 42, 49, 56, 63, 70, 77, 84, 91, 98, 105, 119, 126];
var myChart = new Chart('myChart', {
type: 'scatter',
data: {
datasets: [{
label: 'IC',
data: [9432.13209267, 1899.132847, 851.2122668, 3964.48968367, 9433, 8087.04121533, 1268.34642367, 825.29800317, 4271.00722867, 1157.57453933, 4928.214994, 783.88204033, 1846.623016, 4001.84214867, 709.70201067, 3917.61792167, 688.1571182].map((v, i) => ({ x: labels[i], y: v })),
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
showLine: true,
borderWidth: 1
},
{
label: 'Mtb',
data: [14241.41334667, 48348.08833, 5055.28134533, 7614.80689233, 14240, 24536.66203, 1083.99264, 144.72451603, 15968.94539333, 160.150183, 5127.77524033, 953.9963646, 0, 2989.36556, 21.32920023, 27.03159138, 60310.22952333].map((v, i) => ({ x: labels[i], y: v })),
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
showLine: true,
borderWidth: 1
}
]
},
options: {
scales: {
xAxes: [{
display: true,
position: 'bottom',
ticks: {
stepSize: 1,
autoSkip: false,
callback: value => value % 20 == 0 ? value : null,
min: labels[0],
max: labels[labels.length - 1],
maxRotation: 0
},
// afterBuildTicks: (axis, ticks) => [0, 20, 40, 60, 80, 100, 120],
scaleLabel: {
display: true,
labelString: 'Days from initial test',
fontSize: 16
}
}],
yAxes: [{
display: true,
position: 'left',
ticks: {
beginAtZero: true,
stepSize: 10000,
min: 0,
max: 70000
},
scaleLabel: {
display: true,
fontSize: 16
}
},
{
display: true,
position: 'right',
ticks: {
beginAtZero: true,
stepSize: 10000,
min: 0,
max: 70000
},
scaleLabel: {
display: true,
fontSize: 16
}
},
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

Related

Displaying min/max range in hours Chart.js

I am having some issues when I am trying to display a min/max range of hours in the x-axis of a bar graph with Chart.js. Now it is showing the whole time range of 24 hours. I want the range to be between 06:00-23:00, but I can only access this if I declare a specific daterange aswell like this:
xAxes: {
ticks: {
},
type: 'time',
time: {
unit: 'hour',
displayFormats: {
hour: 'HH:mm',
},
},
min: '2022-10-21T06:00:00',
max: '2022-10-21T23:00:00',
},
But I want to display the time range, without having to declare a date range, and I thought it would be logic to declare it like this, but it is not:
min: 'YYYY-MM-DDT06:00:00',
max: 'YYYY-MM-DDT23:00:00',
Does anyone have any ideas how to solve this?
How I want it to be displayed
max and min are defined directly on the axis but not inside the time option.
For further information, consult Min Max Configuration from the Chart.js documentation.
Please take a look at below runnable code snippet and see how it works.
new Chart('chart', {
type: 'bar',
data: {
datasets: [{
label: '# of Votes',
data: [
{x: '2022-10-03T07', y: 10},
{x: '2022-10-03T08', y: 15},
{x: '2022-10-03T10', y: 8},
{x: '2022-10-03T12', y: 12},
{x: '2022-10-03T13', y: 13},
{x: '2022-10-03T18', y: 7}
],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'hour',
displayFormats: {
hour: 'HH:mm',
},
tooltipFormat: 'd MMM yyyy HH:mm'
},
min: '2022-10-03T06',
max: '2022-10-03T23'
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>
<canvas id="chart" height="85"></canvas>

When i use charts.js -plugins-datalabels in my page with 2 Charts , Only the first charts show up and the second one is disappeared from the page

When i use charts.js -plugins-datalabels in my page with 2 Charts , Only the first charts show up and the second one is disappeared from the page'
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.1.0/dist/chartjs-plugin- datalabels.min.js"></script>
First Chart
<div class="row">
<div class="col-md-4 text-center"> {{ccmonth}}
<canvas id="myChart7" height ="400"></canvas>
<script>
// setup
const data = {
labels: ['Central', 'Eastern', 'Western', 'Kingdom'],
datasets: [{
label: 'Sales',
data: [{{ordordc_month}}, {{ordorde_month}}, {{ordordw_month}},{{ordord_month}}],
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
},{
label: 'Target',
data: [50000, 50000, 50000, 40000,],
backgroundColor:'rgba(255, 26, 104, 0.2)',
borderColor: 'rgba(255, 26, 104, 1)',
borderWidth: 1
}]
};
// config
const config1 = {
type: 'bar',
data,
options: {
scales: {
x: {
stacked: true
},
y: {
beginAtZero: true,
stacked: true
}
}
},
plugins: [ChartDataLabels],
};
// render init block
const myChart7 = new Chart(
document.getElementById('myChart7'),
config1
);
</script>
</div>
</div>
Second chart (not shown up)
<div class="row">
<div class="col-md-4 text-center"> Week {{lweek}} Achievment
<canvas id="myChart6" height ="400"></canvas>
<script>
// setup
const data = {
labels: ['Central', 'Eastern', 'Western', 'Kingdom'],
datasets: [{
label: 'Sales',
data: [{{ordordc}}, {{ordorde}}, {{ordordw}},{{ordord}}],
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
},{
label: 'Target',
data: [50000, 50000, 50000, 40000,],
backgroundColor:'rgba(255, 26, 104, 0.2)',
borderColor: 'rgba(255, 26, 104, 1)',
borderWidth: 1
}]
};
// config
const config = {
type: 'bar',
data,
options: {
scales: {
x: {
stacked: true
},
y: {
beginAtZero: true,
stacked: true
}
}
},
plugins: [ChartDataLabels],
};
// render init block
const myChart6 = new Chart(
document.getElementById('myChart6'),
config
);
</script>
</div>
</div>
I tried to search in your awesome , and read the docommentation of the plugins-datalabels.
I expect a solution by one of your greatest users

ChartJS Create New chart from variable

This seems pretty straightforward but I'm not understanding why it's not rendering the chart correctly. Is there a way to pass the configuration section below to a new chart as a variable? If I load the chart using the coding below it works perfectly. I've tried putting the configuration section into a variable and then placing that within the configuration section, surrounding it by brackets. When I do there's no errors it's just blank like it's not receiving it correctly.
new Chart(myCanvas, {type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}})
you must add document.getElementById("MyChart") inside Chart() object and you will get something like this
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.6.0/dist/chart.min.js"></script>
<canvas id="MyChart" width="400" height="200"></canvas>
<script>
new Chart(document.getElementById("MyChart"), {type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}})
;
</script>

How to remove Grid lines except for zero line and border Chartjs?

I want to remove all grid lines in Line ChartJS, except zero line and border.
When disable Y grid lines by field "line: 0", but border line turn off too :(.
Here my code
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
suggestedMin: -maxValue,
suggestedMax: maxValue,
fontSize: 15,
padding: 20,
callback: value => {
if (value === 0) {
return value
} else if (Number(value).toFixed(1) === maxValue) {
return value
} else if (Number(value).toFixed(1) === Number(0 - maxValue).toFixed(1)) {
return value
} else {
return ''
}
}
},
gridLines: {
display: true,
drawBorder: true,
zeroLineWidth: 2,
lineWidth: 0,
drawTicks: false,
// drawOnChartArea: false,
color: 'rgba(0, 0, 0, 1)',
zeroLineColor: 'rgba(0, 0, 0, 1)',
borderWidth: 5
}
}],
xAxes: [{
ticks: {
padding: 20
},
gridLines: {
display: true,
drawBorder: true,
drawTicks: false,
drawOnChartArea: false,
lineWidth: 3,
color: 'rgba(0, 0, 0, 1)'
}
}]
},
This is result:
And what i want look like:
you can use color property of gridline. If color is specified as an array, the first color applies to the first grid line, the second to the second grid line and so on. so define a color for first line and for the rest just define color as transparent so they wont be visible.
var ctx = document.getElementById('myChart').getContext('2d');
// you need to calculate the step items on axes to make all those color invisible
var restArr = ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0)']
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [-12, 19, 3, -5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
suggestedMin: -20,
suggestedMax: 20,
fontSize: 15,
padding: 20,
callback: value => {
if (value === 0) {
return value
} else if (Number(value).toFixed(1) === 10) {
return value
} else if (Number(value).toFixed(1) === Number(0 - 10).toFixed(1)) {
return value
} else {
return ''
}
}
},
gridLines: {
display: true,
drawBorder: true,
zeroLineWidth: 2,
lineWidth: 0,
drawTicks: false,
drawOnChartArea: true,
color: ['rgba(0, 0, 0, 0)', ...restArr],
zeroLineColor: 'rgba(0, 0, 0, 0.5)',
borderWidth: 0
}
}],
xAxes: [{
ticks: {
padding: 20
},
gridLines: {
display: true,
drawBorder: true,
drawTicks: false,
drawOnChartArea: true,
lineWidth: 1,
color: ['rgba(0, 0, 0, 1)', ...restArr],
zeroLineColor: 'rgba(0, 0, 0, 1)',
}
}]
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Chart.js wrong x axis date time?

I have script for chart.js like this:
<script>
var ctx = document.getElementById("chart0");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [2018-03-28,2018-03-29,2018-03-30,2018-03-31,2018-04-01,2018-04-02,2018-04-03,2018-04-04,2018-04-05,2018-04-06,2018-04-07,2018-04-08,2018-04-09,2018-04-10,2018-04-11,2018-04-12,2018-04-13,2018-04-14,2018-04-15,2018-04-16,2018-04-17,2018-04-18,2018-04-19,2018-04-20,2018-04-21,2018-04-22,2018-04-23,2018-04-24,2018-04-25,2018-04-26,2018-04-27],
datasets: [{
label: 'Impressions',
data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,19,0],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
ticks: {
min: '2018-03-28',
max: '2018-04-27'
}
}]
}
}
});
</script>
But the display chart showing wrong xasis like this image:
chart display wrong date time
Please help me to fix this. This is the first time I working with chart.js
Thanks in the best!
Modify the dataset like this:
datasets: [{
label: 'Impressions',
data: [
{
x: new Date('2018-03-28'),
y: 0
}, {
x: new Date('2018-03-29'),
y: 0
},
{
x: new Date('2018-03-30'),
y: 0
}
...
And the 'options' should be:
options: {
scales: {
xAxes: [{
type: 'time'
}]
}
}