Related
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>
I'm using chart.js and chartjs-plugin-annotation to highlight areas on a graph:
The following config generates the result above:
annotation: {
events: ["click"],
annotations: [
{
type: "box",
drawTime: "beforeDatasetsDraw",
xScaleID: 'x-axis-0',
yScaleID: 'y-axis-0',
xMin: "2019-08-09T07:00:00Z",
xMax: "2019-08-09T09:00:00Z",
yMin: 0,
yMax: 7,
borderWidth: 0,
backgroundColor: "rgba(230,97,79,0.3)",
onClick: function (e) {
console.log("Annotation", e.type, this);
}
}
]
}
I want to be able to highlight a single hour, though:
Anyone if this is possible using the annotations plugin?
To be able to reproduce your request i used annotation type line instead of box.
Annotation type line only accepts borderWidth for thickness of the line.
Because the borderWidth needs to match the column size, i got the width of the chart chart.width, and i divided it to the number of columns chart.data.datasets[0].data.length. Of course i used Chart.js Plugin extension hooks for that:
afterInit (Called after chart has been initialized and before the first update.)
resize (Called after the chart as been resized.)
Code:
var ctx = document.getElementById("myChart");
var dataAnnotation = [
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: "2019-08-09T08:00:00Z",
borderColor: 'rgba(255, 99, 132, 0.2)',
borderWidth: null,
onClick: function (e) {
console.log("Annotation", e.type, this);
}
},
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: "2019-08-09T11:00:00Z",
borderColor: 'rgba(255, 99, 132, 0.2)',
borderWidth: null,
onClick: function (e) {
console.log("Annotation", e.type, this);
}
}
];
Chart.plugins.register({
resize: function(chart) {
columns = chart.data.datasets[0].data.length;
chartWidth = chart.width - 40;
setBorderWidth = chartWidth / columns;
annotationsData = chart.options.annotation.annotations.map(function(item){
item.borderWidth = setBorderWidth;
return item;
});
chart.options.annotation.annotations = annotationsData;
chart.update();
},
afterInit: function(chart) {
columns = chart.data.datasets[0].data.length;
chartWidth = chart.width - 40;
setBorderWidth = chartWidth / columns;
annotationsData = dataAnnotation.map(function(item){
item.borderWidth = setBorderWidth;
return item;
});
chart.options.annotation.annotations = annotationsData;
chart.update();
}
});
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [
"2019-08-09T07:00:00Z",
"2019-08-09T08:00:00Z",
"2019-08-09T09:00:00Z",
"2019-08-09T10:00:00Z",
"2019-08-09T11:00:00Z",
"2019-08-09T12:00:00Z"
],
datasets: [{
label: '# of Tomatoes',
data: [2, 10, 3, 5, 12, 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(239, 169, 249, 0.2)',
'rgba(255, 133, 27, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(239, 169, 249, 1)',
'rgba(255, 133, 27, 1)'
],
borderWidth: 1,
fill: false,
lineTension: 0
}]
},
options: {
responsive: true,
scales: {
xAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1,
callback: function(label, index, labels) {
var local = moment.utc(label).toDate();
var format = moment(local).format("dd HH:mm");
return format;
}
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1
}
}]
},
annotation: {
drawTime: 'afterDraw',
events: ["click"]
}
}
});
Online demo:
https://jsfiddle.net/ZsharE/8nec704L/
Known bugs: click handler works outside annotations !
I want Group1 and Group2 to be filled. However, I want Group3 to be a line only (without fill). But since the data of Group3 is between that of Group1 and Group2, it is overlapped by their fillings; thus I cannot even see Group3. How can I display Group3 as just a line without fill?
config = {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [
{
label: 'Tier A',
data: [-800, -1100, -1150, -1250, -1560, -1460, -1890],
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255,99,132)',
borderWidth: 1
},
{
label: 'Tier B',
data: [-1300, -1560, -1380, -2450, -2560, -1860, -3890],
backgroundColor: 'rgb(54, 162, 235)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1
},
{
type: 'line',
label: 'Tier B',
data: [-1100, -1460, -1280, -1650, -2060, -1560, -2890],
backgroundColor: 'rgb(255, 206, 86)',
borderColor: 'rgb(255, 206, 86)',
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
};
I guess, lightening the fill does the trick. I don't want to lighten the fill, but it's the only way I can think of
config = {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [
{
label: 'Group1',
data: [-800, -1100, -1150, -1250, -1560, -1460, -1890],
backgroundColor: 'rgba(255, 99, 132, 0.3)',
borderColor: 'rgba(255,99,132, 0.3)',
borderWidth: 1
},
{
label: 'Group2',
data: [-1300, -1560, -1380, -2450, -2560, -1860, -3890],
backgroundColor: 'rgba(54, 162, 235, 0.3)',
borderColor: 'rgba(54, 162, 235, 0.3)',
borderWidth: 1
},
{
label: 'Group3',
fill: false,
data: [-1100, -1460, -1280, -1650, -2060, -1560, -2890],
backgroundColor: 'rgb(255, 206, 86)',
borderColor: 'rgb(255, 206, 86)',
borderWidth: 4
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
};
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'
}]
}
}
I need to get a chart like this:
I find this example but it uses old version of ChartJs. I try it using v2.0 but I don't get it.
Can someone post a example?
With v2.1.x, you can achieve this using the stacked option
...
options: {
scales:{
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
...
Stack Snippet
var config = {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
type: 'line',
label: 'Dataset 2',
data: [-65, -10, -80, -81, -56, -85, 40],
borderColor: 'black',
fill: false
}, {
type: 'bar',
label: 'Dataset 1',
backgroundColor: "red",
data: [65, 0, 80, 81, 56, 85, 40],
}, {
type: 'bar',
label: 'Dataset 3',
backgroundColor: "blue",
data: [-65, 0, -80, -81, -56, -85, -40]
}]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>
After fiddling forever, I finally got it to work, here's a sample. Somebody please update the docs!
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes 1',
data: [10, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(255,99,132,1)',
'rgba(255,99,132,1)',
'rgba(255,99,132,1)',
'rgba(255,99,132,1)',
'rgba(255,99,132,1)'
],
borderWidth: 2
},
{
label: '# of Votes 2',
data: [15, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 159, 64, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 2
}
]
},
options: {
scales: {
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true
}
}],
xAxes: [{
stacked: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
Just make sure that you provide an array of object(s), not just one object for xAxis and yAxis.
"options": {
"scales": {
"xAxes": [
{
"stacked": true
}
],
"yAxes": [
{
"stacked": true
}
]
}
}