I have a chart (chartjs) with labels (datalabels).
When my data changes, my chart updates automatically. However, the largest datalabels are most of the time hidden by the automatic resizing of the y axis. Do you have any idea to fix that ?
It should be a 3 up there :)
Here is my code:
const completionOptions = {
responsive: true,
plugins: {
legend: {
display: false,
},
tooltip: {
backgroundColor: 'rgb(85, 85, 85, 1)',
displayColors: false,
// https://www.chartjs.org/docs/latest/configuration/tooltip.html
},
datalabels: {
color: 'rgb(203, 203, 203)',
anchor: 'end',
align: 'end',
labels: {
title: {
font: {
family: 'karla',
weight: '600',
size: 12,
},
}
}
}
},
scales: {
display: false,
y: {
beginAtZero: true,
display: false,
grid: {
display: false,
},
ticks: {
padding: 10
}
},
x: {
grid: {
display: false,
},
ticks: {
autoSkip: false,
maxRotation: 0,
minRotation: 0,
font: {
size: 20,
}
}
},
}
}
You can use the grace option to add extra space to the y axes:
Chart.register(ChartDataLabels)
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 20, 3, 5, 2, 3],
backgroundColor: 'pink'
}]
},
options: {
scales: {
y: {
grace: '10%'
}
},
plugins: {
legend: {
display: false
},
datalabels: {
anchor: 'end',
align: 'end'
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script>
</body>
Related
We are using react chart js but the problem occurs when we try to show multi-line charts in small widgets with high y-axis values.
Overflow occurs in smaller widths and large y axes numbers. I already try a thousand suffixes but it doesn't work. Is it possible to keep the y-axis constant by making the x-axis smaller? Or handle it responsive.
function randomTwoNumbers(n1, n2) {
return Math.floor(Math.random() * (n2 - n1 + 1) + n1)
}
function generateData(count) {
let data = []
for (let index = 0; index < count; index++) {
data.push({
x: `2022-07-${index}T00:00:00.000Z`,
y: randomTwoNumbers(1000000, 9999999)
})
}
return data
}
const data = {
datasets: [
{
data: generateData(100),
label: 'Temperature',
borderColor: '#236EF1',
tension: 0.5,
pointRadius: 1,
pointHoverRadius: 5,
pointHitRadius: 20,
yAxisID: 'y0'
},
{
data: generateData(100),
label: 'Humidity',
borderColor: '#CA840C',
tension: 0.5,
pointRadius: 1,
pointHoverRadius: 5,
pointHitRadius: 20,
yAxisID: 'y1'
}
]
}
const options = {
responsive: true,
resizeDelay: 300,
scales: {
x: {
display: true,
grid: {
borderColor: '#5E646E',
tickColor: '#5E646E',
display: true,
drawOnChartArea: false
},
ticks: {
autoSkip: false,
maxRotation: 0,
font: {
size: 10,
family: 'Inter',
lineHeight: '12px',
weight: '500'
}
},
time: {
unit: 'day',
displayFormats: {
minute: 'p',
hour: 'p',
day: 'MMM, do'
}
},
type: 'time',
offset: true,
adapters: {
date: {
locale: {
code: 'en-US',
formatLong: {},
localize: {},
match: {}
}
}
}
},
y0: {
display: true,
grid: {
borderColor: '#5E646E',
tickColor: '#5E646E',
display: true,
drawOnChartArea: false
},
ticks: {
font: {
size: 10,
family: 'Inter',
lineHeight: '12px',
weight: '500'
}
},
stack: 'single',
offset: false
},
y1: {
display: true,
grid: {
borderColor: '#5E646E',
tickColor: '#5E646E',
display: true,
drawOnChartArea: false
},
ticks: {
font: {
size: 10,
family: 'Inter',
lineHeight: '12px',
weight: '500'
}
},
stack: 'single',
offset: false
}
},
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
title: {
display: false
},
tooltip: {
displayColors: false
}
}
}
var config = {
type: 'line',
data,
options
}
var ctx = document.getElementById('canvas').getContext('2d')
window.myLine = new Chart(ctx, config)
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.2/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.1/chartjs-adapter-moment.min.js"></script>
<div style="width: 200px">
<canvas id="canvas"></canvas>
</div>
I'm currently using chart.js with Vue 2 and I'm facing a problem when using border-radius with stacked bars.
I want to have a border-top radius but when doing that I get a "gap" between the border that was created and the bar above.
Is there any option that can fill that empty space?
Current behaviour
Expected behaviour
These are the current options I'm using for the graph.
options: {
responsive: true,
lineTension: 1,
plugins: {
legend: {
position: 'bottom',
// prevent filtering using labels
'onClick' : function (evt, item, legend) {
return;
},
labels: {
usePointStyle: 'circle',
},
}
},
elements: {
bar: {
borderRadius: {
topLeft: 4.6,
topRight: 4.6,
},
}
},
scales: {
y: {
stacked: true,
ticks: {
maxTicksLimit: 6,
callback: function(value, index, ticks) {
return value + ' min';
}
},
},
x: {
stacked: true,
grid: {
color: "rgba(0, 0, 0, 0)",
}
}
}
}
What you need it is not configurable by any options.
Nevertheless you can use a plugin to change the base of the bar to draw, taking care of the border radius.
EDIT: I have found a specific option in bar element, base, which should address the use case.
See snippet:
const ctx = document.getElementById("myChart");
// not used but leave it
const plugin = {
id: 'fillGaps',
beforeDatasetDraw(chart, args) {
if (args.index > 0) {
args.meta.data.forEach(function(item){
const pre = item.base;
item.base += 12;
});
}
},
};
//
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'user 1 online',
data: [50, 35, 45, 47, 10, 3, 27],
backgroundColor: 'rgba(40, 139, 170, 1)',
borderWidth: 0,
borderSkipped: 'start',
base: 0
},
{
label: 'user 2 online',
data: [50, 35, 45, 47, 10, 3, 27],
backgroundColor: 'orange',
borderWidth: 0,
borderSkipped: 'start',
base: 0
}]
},
options: {
elements: {
bar: {
borderRadius: {
topLeft: 12,
topRight: 12,
bottomLeft: 12,
bottomRight: 12
},
}
},
scales: {
y: {
stacked: true,
},
x: {
stacked: true,
}
}
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
</body>
</html>
I would like to increase the size of the following elements. Could you please edit the code below to make these elements bigger:
the label text size (the NaCl and SalinityDrift boxes above the
chart)
the numbers themselves in x,y,y2 axes
Script:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.1.1/chartjs-plugin-zoom.min.js"></script>
<canvas id="myChart"></canvas>
<script type="text/javascript">
$("#myChart").width( $(window).width() *0.97 );
$("#myChart").height( $(window).height() * 0.8 );
var ctx = document.getElementById('myChart').getContext('2d');
const options = {
type: 'line',
data: {
datasets: [
{
label: 'NaCl',
data: natriumChrolideData,
borderColor: 'blue',
yAxisID: 'y',
},
{
label: 'Salinity drift',
data: salinityDriftData,
borderColor: 'red',
yAxisID: 'y2',
},
]
},
options: {
parsing: false,
normalized: true,
animation: false,
responsive: false,
scales: {
x: {
type: 'time',
title: {
display: true,
text: 'Time (client time zone)',
font: {
size: 24
}
},
},
y: {
title: {
display: true,
text: 'NaCl storage, kg',
font: {
size: 24
}
}
},
y2: {
title: {
display: true,
text: 'Salinity drift, %',
font: {
size: 24
},
ticks: {
min: 0,
},
}
},
},
plugins: {
zoom: {
pan: {
enabled: true,
onPanStart({chart, point}) {
// alert("pan works!");
},
mode: 'x',
},
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true
},
mode: 'x',
}
}
},
}
}
new Chart(ctx, options);
</script>
Produced plot example:
Note: I found some solutions to use fontSize or tick.font or tick.fontSize, but either I implemented them wrongly or they do not work for some reason.
You are putting the ticks config in the scale title while its supposed to be on the root of the scale itself. Also for the boxes font size on top you need to configure it in the options.plugins.legend.labels namespace.
Live example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
plugins: {
legend: {
labels: {
font: {
size: 20
}
}
}
},
scales: {
x: {
ticks: {
font: {
size: 20
}
}
},
y: {
ticks: {
font: {
size: 20
}
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>
I'm using the newest version of chart.js (3.2.1). Padding works if I'm set it to positive values.
But padding 0 (or negative values) doesn't set the line graph exactly at the borders of canvas
options: {
layout: {
padding:0
},
interaction: {
intersect: false,
},
plugins: {
tooltip: {
backgroundColor: 'transparent',
displayColors: false,
bodyFontSize: 14,
titleColor: 'rgba(83,255,228,1)',
callbacks: {
label: function (tooltipItems, data) {
return 'BMI: ' + tooltipItems.raw;
}
}
},
legend: {
display: false,
},
},
elements: {
point: {
radius: 6,
hitRadius: 6,
hoverRadius: 6
}
},
scales: {
xAxes: {
display: false,
},
yAxes: {
display: false,
},
}
}
The padding in the chart config is not for styling of the canvas to other elements, the only thing the padding does is adding the ability of making a bit of space between the canvas edge and the line, from the image you provided it seems like it goes to the end of the canvas and the empty space is another element beneath the canvas.
As you can see in this example, the canvas background is colored gray and with padding: 0 the line touches the end of the canvas as expected
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
plugins: {
tooltip: {
backgroundColor: 'transparent',
displayColors: false,
bodyFontSize: 14,
titleColor: 'rgba(83,255,228,1)',
callbacks: {
label: function(tooltipItems, data) {
return 'BMI: ' + tooltipItems.raw;
}
}
},
legend: {
display: false,
},
},
interaction: {
intersect: false,
},
layout: {
padding: 0
},
elements: {
point: {
radius: 0
}
},
scales: {
y: {
display: false
},
x: {
display: false
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas {
background-color: #eee;
}
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js" integrity="sha512-opXrgVcTHsEVdBUZqTPlW9S8+99hNbaHmXtAdXXc61OUU6gOII5ku/PzZFqexHXc3hnK8IrJKHo+T7O4GRIJcw==" crossorigin="anonymous"></script>
</body>
I try to add some vertical red lines into my time line chart.
For normal charts with categories is works but not for time axis.
<!doctype html>
<html>
<head>
<title>Line Chart</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:75%;">
<canvas id="canvas"/>
</div>
<script>
var timeFormat = 'DD/MM/YYYY';
var config = {
type: 'line',
data: {
datasets: [
{
label: "line1",
data: [
{x: "2015-03-15T13:03:00Z", y: 3000},
{x: "2015-03-16T13:03:00Z", y: 3100},
{x: "2015-03-17T13:03:00Z", y: 2900},
{x: "2015-03-18T13:03:00Z", y: 3050}
],
fill: false,
borderColor: 'black'
},
{
label: "line2",
data: [
{x: "2015-03-15T13:03:00Z", y: 4000},
{x: "2015-03-16T13:03:00Z", y: 4100},
{x: "2015-03-17T13:03:00Z", y: 4900},
{x: "2015-03-18T13:03:00Z", y: 4050}
],
fill: false,
borderColor: 'green'
}
]
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js Time Scale"
},
scales: {
xAxes: [{
type: "time",
time: {
tooltipFormat: 'll'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
},
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: '2015-03-17T13:03:00Z',
borderColor: 'red',
borderWidth: 1,
label: {
enabled: true,
position: "top",
content: "somelabel"
}
}]
}
}
};
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
</script>
</body>
</html>
It works, you only forgot to include the script tag to the plugin so the annotations plugin never got loaded in
var timeFormat = 'DD/MM/YYYY';
var config = {
type: 'line',
data: {
datasets: [{
label: "line1",
data: [{
x: "2015-03-15T13:03:00Z",
y: 3000
},
{
x: "2015-03-16T13:03:00Z",
y: 3100
},
{
x: "2015-03-17T13:03:00Z",
y: 2900
},
{
x: "2015-03-18T13:03:00Z",
y: 3050
}
],
fill: false,
borderColor: 'black'
},
{
label: "line2",
data: [{
x: "2015-03-15T13:03:00Z",
y: 4000
},
{
x: "2015-03-16T13:03:00Z",
y: 4100
},
{
x: "2015-03-17T13:03:00Z",
y: 4900
},
{
x: "2015-03-18T13:03:00Z",
y: 4050
}
],
fill: false,
borderColor: 'green'
}
]
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js Time Scale"
},
scales: {
xAxes: [{
type: "time",
time: {
tooltipFormat: 'll'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
},
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: '2015-03-17T13:03:00Z',
borderColor: 'red',
borderWidth: 1,
label: {
enabled: true,
position: "top",
content: "somelabel"
}
}]
}
}
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js" crossorigin="anonymous"></script>
<div style="width:75%;">
<canvas id="canvas" />
</div>