We Keep Coding

How do I edit the label and x-axis of a laravel/chart.js boxplot?

Chart.js translation for plotting on frontend side in Laravel. There is a yield of 3 months dates and their datas. How should I fit charjs that overlap and not all dates are written at the end of x? (texts are overlapping, i dont want it, and I want all the dates to be on the x-axis, I think chartjs skipped it because couldn't fit it.) it is important can you contact with me
var myChart1 = new Chart(ctx1, {
type: 'bar',
data: {
labels: dates,
datasets: [{
label: 'BACKLOG ON HOLD INCIDENTS AVG PERFORMANCE- BURSA',
data: results,
backgroundColor: [
'rgba(76, 196, 23, 0.6)'
],
borderColor: [
'rgba(219, 249, 219, 1)',
],
borderWidth: 1,
}]
},
plugins: [ChartDataLabels],
options: {
plugins:{
legend:{
display:true
},
datalabels:{
color:'blue',
anchor:'end',
font:{
weight:'bold',
size:8
}
}
},
scales: {
y: {
beginAtZero: true
},
x: {
ticks: {
maxRotation: 90,
minRotation: 90,
font: {
size: 8,
}
}
}
},
animation: {
duration: 0
}
}
});

Horizontal line for bar chart

Information:
Chart.js v3.8.2
https://www.chartjs.org
new Chart(document.getElementById('esneklik').getContext('2d'), {
type: 'bar',
data: {
labels: ['test','test 2'],
datasets: [{
label: ' ',
data: [24,20],
backgroundColor: ['rgba(1, 56, 108, 0.6)'],
borderColor: ['rgba(1, 56, 108, 1'],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
type: 'linear',
min: 5,
max: 50
}
}
}
});
Example:
enter image description here
I want to draw a line horizontally and show the average value.

you can add a second dataset for the line.
specify the type as 'line' and set fill to false
datasets: [{
type: 'line', // <-- type as line
label: 'avg',
data: [22,22],
fill: false, // <-- fill as false
backgroundColor: 'red',
borderColor: 'red',
borderWidth: 1
}, {
label: 'bar',
data: [24,20],
backgroundColor: 'rgba(1, 56, 108, 0.6)',
borderColor: 'rgba(1, 56, 108, 1)',
borderWidth: 1
}]
the line dataset should be added first, else it will be behind the bars
see following working snippet...
$(document).ready(function() {
new Chart(document.getElementById('esneklik').getContext('2d'), {
type: 'bar',
data: {
labels: ['test','test 2'],
datasets: [{
type: 'line',
label: 'avg',
data: [22,22],
fill: false,
backgroundColor: 'red',
borderColor: 'red',
borderWidth: 1
}, {
label: 'bar',
data: [24,20],
backgroundColor: 'rgba(1, 56, 108, 0.6)',
borderColor: 'rgba(1, 56, 108, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
beginAtZero: true,
type: 'linear',
ticks: {
min: 5,
max: 50
}
}]
}
}
});
});
<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/2.9.3/Chart.bundle.min.js"></script>
<canvas id="esneklik"></canvas>

Chartjs bar min, max and avarage value

Hi I have a chart with chartjs, which inserts between min, max, average values, with a bar type chart.
So far, everything is fine, the values are entered, what I want to do is that the bars of the graph are positioned starting from their min on the y axis up to the maximum on the y axis, I do not want the bar to start from the value 0.
dataset = {
labels: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
datasets: [{
label: 'min',
borderWidth: 4,
borderColor: "#ef4931",
backgroundColor: "#ef4931",
borderJoinStyle: 'miter',
pointHitRadius: 10,
data: data[1],
fill: false,
},
{
label: 'avg',
borderWidth: 4,
borderColor: "#ef4931",
backgroundColor: "#ef4931",
borderJoinStyle: 'miter',
pointHitRadius: 10,
data: data[0],
fill: "-1",
},
{
label: 'max',
borderWidth: 4,
borderColor: "#ef4931",
backgroundColor: "#ef4931",
borderJoinStyle: 'miter',
pointHitRadius: 10,
data: data[2],
fill: "-1",
}
]
};
options = {
legend: {
display: false,
},
title: {
display: true,
position: 'bottom',
fontSize: 14
},
tooltips: {
mode: 'index',
intersect: false,
titleFontStyle: "bold",
titleFontColor: "rgba(255, 255, 255, 1)",
bodyFontStyle: "normal",
bodyFontColor: "rgba(255, 255, 255, 1)",
backgroundColor: "rgba(102, 102, 102, 1)",
borderWidth: 1,
bodySpacing: 5,
xPadding: 15,
yPadding: 15,
displayColors: false,
callbacks: {
title: function(item, data) {
var title = "";
title += item[0].xLabel;
return title;
}
}
},
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked: true,
barThickness: 10,
}],
yAxes: [{
stacked: true,
display: true,
scaleLabel: {
display: true,
fontSize: 14,
fontStyle: "bold",
},
ticks: {
callback: function(value, index, values) {
return parseInt(value) + " bpm";
},
}
}]
},
animation: {
duration: 1000,
easing: "easeInOutQuad"
}
};
myChart.config.data = dataset;
myChart.options = options;
myChart.config.type = "bar";
myChart.update();

in your y axes config you can add the prop suggestedMin or min between the stacked and display prop. With this the scale will start at that number, here you can put in the value of the lowest bar.
SuggestedMin will go lower if there is a bar with a lower value, if you use min if will use that as a final so if you have a bar with a lower value it wont get shown.

You can combine "floating bars" and "stacked bar chart". See https://codepen.io/fantasyzer/pen/KKaqgoM for an example. Note that the data of each bar is given as an array [Ybegin,Yend]. If you set stackable to false for the y scale the values are to be given as absolute:
datasets: [
{
data: [
[10,12],
[20,25],
[15,25],
[25,28],
...
Ref:
https://www.chartjs.org/docs/latest/samples/bar/floating.html, https://www.chartjs.org/docs/latest/samples/bar/stacked.html

Chart.js bar chart mouse hovering highlights all the datasets instead of just the selected one

I have a very simple (horizontal) bar chart using Chart.js latest version.
https://codepen.io/decho/pen/abZYrxO
It has 3 datasets, Foo, Bar & Baz. The problem is that when I hover with the mouse over a bar (dataset), all 3 of them get highlighted instead of just the one that mouse is over at.
Current behavior:
Expected behavior:
I have tried playing with the tooltip settings, but couldn't quite figure it out. So any idea on how can I achieve this?
Here is my current Chart configuration, also on Codepen:
const ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['Test'],
datasets: [
{
label: 'Foo',
data: [1],
backgroundColor: 'rgba(23, 83, 139, 0.5)',
borderColor: '#17538b',
borderWidth: 2,
hoverBackgroundColor: "#17538b",
hoverBorderColor: "#4444442b",
},
{
label: 'Bar',
data: [2],
backgroundColor: 'rgba(255, 85, 33, 0.5)',
borderColor: '#ff5521',
borderWidth: 2,
hoverBackgroundColor: "#ff5521",
hoverBorderColor: "#4444442b",
},
{
label: 'Baz',
data: [3],
backgroundColor: 'rgba(62, 211, 241, 0.5)',
borderColor: '#3ed3f1',
borderWidth: 2,
hoverBackgroundColor: "#3ed3f1",
hoverBorderColor: "#4444442b",
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
},
tooltips: {
mode: 'dataset',
intersect: true
},
scales: {
xAxes: [
{
display: true,
ticks: {
beginAtZero: true,
},
},
],
yAxes: [{
display: false,
ticks: {
beginAtZero: true,
},
}],
}
},
});
Any help is kindly appreciated.
Solved this myself: Apparently there is a a global option for hover modes:
options: {
hover: {
mode: 'dataset',
}
}

If anyone wonders as me, how this could be done for chart of type: 'line', just add these options:
options: {
elements: {
point: {
hitRadius: 1,
}
},
tooltips: {
mode: 'single',
},
hover: {
mode: 'dataset',
intersect: false
}
}
and also don´t forget to add colors for highlighting (for each dataset obviously):
datasets: [
{
label: "A",
data: [12, 19, 3, 5, 2, 3],
borderWidth: 3,
borderColor: '#ec5e5f',
hoverBorderColor: '#e41a1c',
pointHoverBackgroundColor: "#fff",
lineTension: 0.5,
}
]
For full example check out this codepen

ChartJS hover tooltip colors not showing their correct color

I have this chart made with ChartJS. I've gotten it to work so far, but, when adding more data such as 2 lines.. The tooltip looses it's colors. I'm talking about the white boxes to the left of the values:
As you can see theres 2 lines. One for earnings and one for deposits. The deposit is the one at the bottom and the earnings are at the top. Why is the white square white? It should be same as the line?
Here's my code:
Chart:
var ctx = document.getElementById('orders_graph').getContext('2d');
var Order_chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: [], // months
datasets: [{
label: 'Fortjenelse',
data: []
}]
},
// Configuration options go here
options:
{
responsive: true,
hover: {
mode: 'index',
intersect: false
},
spanGaps: true,
legend: {
display: false
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function(tooltipItem) {
return ' '+tooltipItem.yLabel+' DKK';
}
}
},
layout: {
// padding: { left: 0, right: 0, top: 10, bottom: 30}
},
scales:{
xAxes: [{
display: true //this will remove all the x-axis grid lines
}],
yAxes: [{
display: true, //this will remove all the x-axis grid lines
stacked: false,
ticks: {
beginAtZero: true
},
}],
}
}
});
Passing the data to the chart:
Order_chart.data.labels = order_array_parent_index;
Order_chart.data.datasets = [{
// Fortjenelse med renter
label: 'Profit',
data: order_array_parent,
fill: false,
lineTension: 0,
backgroundColor: [
'rgba(113, 217, 98, 0.2)',
],
borderColor: [
'rgba(113, 217, 98, 1)',
],
},
{
// Deposited amount
label: 'Deposit',
data: order_array_parent_deposits,
fill: false,
lineTension: 0,
backgroundColor: [
'rgba(255, 223, 82, 0.2)',
],
borderColor: [
'rgba(255, 223, 82, 1)',
],
},
]
Order_chart.update();
Any ideas on how to solve this?

Going through the Chart.js documentation, it seems like the tooltip bgColor isn't in an array, but just a color param. Try changing backgroundColor: [ the color ] to backgroundColor: 'rgba(x,x,x,x)' I don't have Chart.js, so I can't test, but I think that'll sort you.