Related
I have a chart showing website calls the last 7 days. There it is:
Here is the initialization:
varwebsitecalls_chart = new Chart(websitecalls_chartel, {
type: 'line',
data: {
labels: ["Sa", "So", "Mo", "Di", "Mi", "Do", "Fr"],
datasets: [{
label: 'Websitecalls',
data: [0, 0, 0, 0, 0, 0, 0],
borderWidth: 2,
borderColor: '#00000',
backgroundColor: '#ffff',
pointStyle: 'circle',
pointRadius: 7,
cubicInterpolationMode: 'monotone',
tension: 0.4,
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
},
},
scales: {
x: {
grid: {
display: false,
}
},
y: {
min: 0,
ticks: {
precision: 0,
font: {
family: 'Montserrat',
},
},
grid: {
borderDash: [5, 5],
}
},
}
},
});
Problem:
The Problem is that the chart cuts of the circles when the data is 0 because I set min to 0. I have to set min to 0 because negative websitecalls can not exist. If I do not set it -1 will be displayed. Is there a way to fix this designtechnical issue?
Thanks in advance,
Filip.
No idea why, but defining y.beginAtZero: true instead of y.min: 0 will solve the problem.
Please take a look at your amended and runnable code and see how it works.
new Chart('websitecalls_chartel', {
type: 'line',
data: {
labels: ["Sa", "So", "Mo", "Di", "Mi", "Do", "Fr"],
datasets: [{
label: 'Websitecalls',
data: [0, 0, 0, 0, 0, 0, 0],
borderWidth: 2,
borderColor: '#00000',
backgroundColor: '#ffff',
pointStyle: 'circle',
pointRadius: 7,
cubicInterpolationMode: 'monotone',
tension: 0.4,
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
},
},
scales: {
x: {
grid: {
display: false,
}
},
y: {
beginAtZero: true,
ticks: {
precision: 0,
font: {
family: 'Montserrat',
},
},
grid: {
borderDash: [5, 5],
}
},
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="websitecalls_chartel" height="80"></canvas>
Chart.js documentation states...
beginAtZero: if true, scale will include 0 if it is not already included.
min: user defined minimum number for the scale, overrides minimum value from data.
I've been trying to implement a Stacked Area Line Chart using Chart.js, which in turn uses multiple datasets as an input for each line graph.
Although I'am able to view the final stacked chart with the associated dataset, I can clearly notice that y-axis data is falsely represented(hover on data-point) w.r.t x-axis for each dataset, which is a major issue.
Major issues are:
x-axis and y-axis mapping issue for 2nd dataset chart onwards
x-axis values (dates) are repetitive and not in order - causes an abrupt display of chart
To be more clear, I need dataset1[ {x: "2030*08-03", y: 8},{}...] to precisely map keys x and y to the respective x-axis and y-axis of chart1, similary, dataset2[ {x: "2030*08-10", y: 8},{}...] mapping to the 2nd chart respectively and so on.
This is the sample codepen implementation replicating the issue.
Also, I'm adding the complete code snippet for a clear understanding.
var ctx = document.getElementById("myChart").getContext("2d");
const colors = {
green: {
fill: 'rgb(0,128,0,0.2)',
stroke: 'green',
},
grey: {
fill: 'rgb(128,128,128, 0.2)',
stroke: 'grey',
},
red: {
fill: 'rgba(255, 0, 0, 0.2)',
stroke: 'red',
}
};
const data1 = [
{x: "2030*08-03", y: 8},
{x: "2030-08-04", y: 1},
{x: "2030-08-08", y: 2},
{x: "2030-08-09", y: 10},
{x: "2030-08-10", y: 2},
{x: "2030-08-12", y: 34} ];
const data2 = [
{x: "2030-08-09", y: 1},
{x: "2030-08-12", y: 12},
{x: "2030-08-13", y: 3},
{x: "2030-08-15", y: 3}
];
const data3 = [
{x: "2030-08-06", y: 1},
{x: "2030-08-09", y: 12},
{x: "2030-08-10", y: 3},
{x: "2030-08-12", y: 3} , ];
const myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: "Data1",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.green.stroke,
borderColor: colors.green.stroke,
pointHighlightStroke: colors.green.stroke,
borderCapStyle: 'butt',
data: data1,
},
{
label: "Data2",
fill: true,
backgroundColor: colors.grey.fill,
pointBackgroundColor: colors.grey.stroke,
borderColor: colors.grey.stroke,
pointHighlightStroke: colors.grey.stroke,
data: data2,
},
{
label: "Data3",
fill: true,
backgroundColor: colors.red.fill,
pointBackgroundColor: colors.red.stroke,
borderColor: colors.red.stroke,
pointHighlightStroke: colors.red.stroke,
data: data3,
}
]
},
options: {
plugins: {
responsive: true,
legend: {
display: true,
position: 'bottom',
},
title: {
display: true,
text: 'Status',
padding: {
top: 20,
bottom: 15
},
font: {
weight: "bold",
size: 25
}
}
},
layout: {
padding: {
left: 20,
right: 0,
top: 0,
bottom: 25
}
},
scales: {
x: {
ticks: {
align: "center"
}
},
y: {
stacked: true,
title: {
display: true,
text: "Count",
font: {
weight: "bold",
size: 20
}
}
},
},
parsing: {
xAxisKey: 'x',
yAxisKey: 'y'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
Any help will be greatly appreciated. Thanks in advance.
This behaviour is happening because chart.js automatically adds the labels if they are not there and doesnt care about ordering, you have 2 ways of fixing it, providing a labels array with all the labels in correct order already:
var ctx = document.getElementById("myChart").getContext("2d");
const colors = {
green: {
fill: 'rgb(0,128,0,0.2)',
stroke: 'green',
},
grey: {
fill: 'rgb(128,128,128, 0.2)',
stroke: 'grey',
},
red: {
fill: 'rgba(255, 0, 0, 0.2)',
stroke: 'red',
}
};
const data1 = [{
x: "2030-08-03",
y: 8
},
{
x: "2030-08-04",
y: 1
},
{
x: "2030-08-08",
y: 2
},
{
x: "2030-08-09",
y: 10
},
{
x: "2030-08-10",
y: 2
},
{
x: "2030-08-12",
y: 34
}
];
const data2 = [{
x: "2030-08-09",
y: 1
},
{
x: "2030-08-12",
y: 12
},
{
x: "2030-08-13",
y: 3
},
{
x: "2030-08-15",
y: 3
}
];
const data3 = [{
x: "2030-08-06",
y: 1
},
{
x: "2030-08-09",
y: 12
},
{
x: "2030-08-10",
y: 3
},
{
x: "2030-08-12",
y: 3
},
];
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["2030-08-03", "2030-08-04", "2030-08-06", "2030-08-08", "2030-08-09", "2030-08-10", "2030-08-12", "2030-08-13", "2030-08-15"],
datasets: [{
label: "Data1",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.green.stroke,
borderColor: colors.green.stroke,
pointHighlightStroke: colors.green.stroke,
borderCapStyle: 'butt',
data: data1,
},
{
label: "Data2",
fill: true,
backgroundColor: colors.grey.fill,
pointBackgroundColor: colors.grey.stroke,
borderColor: colors.grey.stroke,
pointHighlightStroke: colors.grey.stroke,
data: data2,
},
{
label: "Data3",
fill: true,
backgroundColor: colors.red.fill,
pointBackgroundColor: colors.red.stroke,
borderColor: colors.red.stroke,
pointHighlightStroke: colors.red.stroke,
data: data3,
}
]
},
options: {
plugins: {
responsive: true,
legend: {
display: true,
position: 'bottom',
},
title: {
display: true,
text: 'Status',
padding: {
top: 20,
bottom: 15
},
font: {
weight: "bold",
size: 25
}
}
},
layout: {
padding: {
left: 20,
right: 0,
top: 0,
bottom: 25
}
},
scales: {
x: {
ticks: {
align: "center"
}
},
y: {
stacked: true,
title: {
display: true,
text: "Count",
font: {
weight: "bold",
size: 20
}
}
},
},
parsing: {
xAxisKey: 'x',
yAxisKey: 'y'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<canvas id="myChart" width="400" height="100"></canvas>
Codepen: https://codepen.io/leelenaleee/pen/gOWNXKm?editors=1010
Or you can use a time axis:
var ctx = document.getElementById("myChart").getContext("2d");
const colors = {
green: {
fill: 'rgb(0,128,0,0.2)',
stroke: 'green',
},
grey: {
fill: 'rgb(128,128,128, 0.2)',
stroke: 'grey',
},
red: {
fill: 'rgba(255, 0, 0, 0.2)',
stroke: 'red',
}
};
const data1 = [{
x: "2030-08-03",
y: 8
},
{
x: "2030-08-04",
y: 1
},
{
x: "2030-08-08",
y: 2
},
{
x: "2030-08-09",
y: 10
},
{
x: "2030-08-10",
y: 2
},
{
x: "2030-08-12",
y: 34
}
];
const data2 = [{
x: "2030-08-09",
y: 1
},
{
x: "2030-08-12",
y: 12
},
{
x: "2030-08-13",
y: 3
},
{
x: "2030-08-15",
y: 3
}
];
const data3 = [{
x: "2030-08-06",
y: 1
},
{
x: "2030-08-09",
y: 12
},
{
x: "2030-08-10",
y: 3
},
{
x: "2030-08-12",
y: 3
},
];
const myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: "Data1",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.green.stroke,
borderColor: colors.green.stroke,
pointHighlightStroke: colors.green.stroke,
borderCapStyle: 'butt',
data: data1,
},
{
label: "Data2",
fill: true,
backgroundColor: colors.grey.fill,
pointBackgroundColor: colors.grey.stroke,
borderColor: colors.grey.stroke,
pointHighlightStroke: colors.grey.stroke,
data: data2,
},
{
label: "Data3",
fill: true,
backgroundColor: colors.red.fill,
pointBackgroundColor: colors.red.stroke,
borderColor: colors.red.stroke,
pointHighlightStroke: colors.red.stroke,
data: data3,
}
]
},
options: {
plugins: {
responsive: true,
legend: {
display: true,
position: 'bottom',
},
title: {
display: true,
text: 'Status',
padding: {
top: 20,
bottom: 15
},
font: {
weight: "bold",
size: 25
}
}
},
layout: {
padding: {
left: 20,
right: 0,
top: 0,
bottom: 25
}
},
scales: {
x: {
type: 'time',
ticks: {
align: "center"
}
},
y: {
stacked: true,
title: {
display: true,
text: "Count",
font: {
weight: "bold",
size: 20
}
}
},
},
parsing: {
xAxisKey: 'x',
yAxisKey: 'y'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<canvas id="myChart" width="400" height="100"></canvas>
Codepen: https://codepen.io/leelenaleee/pen/GRmbOxN?editors=1010
I have the next JS code
let options = {
type: 'bar',
data: data,
options: {
cornerRadius: 30,
maintainAspectRatio: false,
scales: {
xAxes: [{
barPercentage : 0.55,
categoryPercentage: 0.42,
gridLines: {
display: false,
}
}],
yAxes: [{
ticks: {
min: 0,
max: 50,
stepSize: 10,
callback: function(value, index, values) {
return value + "%";
},
fontColor: '#999999',
fontSize: 11,
padding: 15,
fontFamily: 'GothamPro'
}
}],
}
}
}
var siteCosts = document.getElementById('siteCosts').getContext('2d');
var myChart = new Chart(siteCosts, options);
It gives me the next image
https://prntscr.com/t91wzh
And it must look like that https://prntscr.com/t91xsf
The question is next - how to add this grey unused data to bar via Chart.js?
Since I don't know about your data, I have prepared a custom data. Look carefully that I have taken all the data 95 in the second dataset because the highest value of the first dataset is 95. I think you can solve this in this way.
var ctx = document.getElementById('myChart').getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 200;
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["A", "B", "C", "D", "E"],
datasets: [{
backgroundColor: 'rgb(54, 195, 110)',
borderColor: 'rgba(255, 255, 255, 0.5)',
borderWidth: 0,
data: [95, 75, 80, 55, 85]
}, {
backgroundColor: '#948E8D',
borderColor: 'rgba(255, 255, 255, 0.5)',
borderWidth: 0,
data: [95, 95, 95, 95, 95]
}],
},
options: {
cornerRadius: 30,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
barPercentage: 0.55,
categoryPercentage: 0.42,
gridLines: {
display: false,
},
stacked: true
}],
yAxes: [{
ticks: {
min: 0,
max: 95,
stepSize: 10,
callback: function (value, index, values) {
return value + "%";
},
fontColor: '#999999',
fontSize: 11,
padding: 15,
fontFamily: 'GothamPro'
},
stacked: true
}],
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" type="text/javascript"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>
So I'm using the datalabels plugin for Chartjs on a bar chart. Each label has data for monthly and 7 days prior. I want the datalabels to be colored red for monthly black for 7 days prior. the color feature in options groups 2 bars together and displays 2 red 2 black 2 red 2 black in chunks as appose to individually.
Heres a link to the outputted chart. https://imgur.com/fqPesYz
import Chart from "chart.js";
import ChartDataLabels from "chartjs-plugin-datalabels";
require("../../Row4/Row4Charts/RoundedBars.js");
export default class Cancellations7daysChart extends Component {
Cancellations7daysChart = React.createRef();
componentDidMount() {
const Cancellations7daysChart = this.Cancellations7daysChart.current.getContext(
"2d"
);
new Chart(Cancellations7daysChart, {
type: "bar",
data: {
labels: ["DSL", "FTTC", "FTTP", "GFast"],
datasets: [
{
label: "Monthly",
data: [7, 19, 2, 0],
backgroundColor: [
"rgba(255, 9, 49)",
"rgba(255, 9, 49)",
"rgba(255, 9, 49)",
"rgba(255, 9, 49)"
],
borderColor: [
"rgba(0, 193, 189)",
"rgba(255, 9, 49)",
"rgba(0, 193, 189)",
"rgba(0, 193, 189)"
],
borderWidth: 1,
pointRadius: 4,
},
{
label: "7 days prior",
data: [2, 11, 5, 3],
backgroundColor: [
"rgba(208, 210, 211)",
"rgba(208, 210, 211)",
"rgba(208, 210, 211)",
"rgba(208, 210, 211)"
],
borderColor: [
"rgba(208, 210, 211)",
"rgba(208, 210, 211)",
"rgba(208, 210, 211)",
"rgba(208, 210, 211)"
],
borderWidth: 1,
pointRadius: 6,
}
]
},
options: {
maintainAspectRatio: true,
cornerRadius: 6,
cutoutPercentage: 65,
angleLines: {
display: true
},
tooltips: {
enabled: true
},
label: {
usePointStyle: true
},
legend: {
position: "bottom",
labels: {
filter: function (legendItem, Cancellations7daysChart) {
return !legendItem.text.includes("Monthly");
}
}
},
scales: {
ticks: {
maxTickLimit: 1,
max: 15,
display: false
},
//yaxes change
yAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
beginAtZero: true,
display: false
}
}
],
//xaxes change
xAxes: [
{
ticks: {
//Change font here
},
gridLines: {
drawBorder: false,
display: false,
scaleShowLabels: false
}
}
]
},
plugins: {
datalabels: {
color: ["red", "black", "red", "black", "red", "black", "red", "black"],
align: "end",
anchor: "end"
}
}
}
});
}
render() {
return (
<div>
<canvas
id="Cancellations7daysChart"
ref={this.Cancellations7daysChart}
width={360}
height={360}
/>
</div>
);
}
}
You need to make a function to change the colors depending their label:
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
color: function(context) {
var index = context.dataIndex;
var value = context.dataset.data[index];
var valueRed = context.dataset.label;
if(valueRed === 'Monthly') {
return value = 'red';
} else {
return value = '#000';
}
}
}
}
Here is a working example: Plunker example
More info about formatting in the plugin's page: Scriptable Options
Chart work fine butt can't see tooltips…
I cant find where problem is and what I missing…
<div style="width: 1000px; height: 600">
<canvas id="myChart" ></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myNewChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["24.5.2018. 15:23:48", "24.5.2018. 16:00:00", "24.5.2018. 17:00:00", ],
datasets: [{
label: '# Temperature',
fill: false,
data: [29, 25, 24, ],
backgroundColor: [
],
borderColor: [
],
borderWidth: 1
}, {
label: '# Humidity',
data: [54, 62, 64, ],
borderColor: [
],
borderWidth: 1,
fill: false,
type: 'line'
}
]
},
options: {
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 80,
fontColor: 'rgb(60, 180, 100)'
}
},
tooltips: {
cornerRadius: 4,
caretSize: 4,
xPadding: 16,
yPadding: 10,
backgroundColor: 'rgba(0, 150, 100, 0.9)',
titleFontStyle: 'normal',
titleMarginBottom: 15
}
}
});
</script>
Helper seed that I need add more text for posting this but dont konw how simple question make longer…. text text Helper seed that I need add more text for posting this but dont konw how simple question make longer….
Try this one
<div style="width: 1000px; height: 600">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myNewChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["24.5.2018. 15:23:48", "24.5.2018. 16:00:00", "24.5.2018. 17:00:00", ],
datasets: [{
label: '# Temperature',
fill: false,
data: [29, 25, 24, ],
borderWidth: 1
}, {
label: '# Humidity',
data: [54, 62, 64, ],
borderWidth: 1,
fill: false,
type: 'line'
}]
},
options: {
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 80,
fontColor: 'rgb(60, 180, 100)'
}
},
tooltips: {
cornerRadius: 4,
caretSize: 4,
xPadding: 16,
yPadding: 10,
backgroundColor: 'rgba(0, 150, 100, 0.9)',
titleFontStyle: 'normal',
titleMarginBottom: 15
}
}
});
</script>
Just remove backgroundColor: [] and borderColor: [] from both datasets