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
}
}
});

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

impossible to remove scale from radar chart (chart.js)

I have been trying all day to remove the scale of a radar chart in chart js. Although the chart works just fine, nothing seems to be working to remove the scale. Unfortunately the documentation is not that helpful for that issue.
here is what the graph looks like. The scale looks the same everytime. Clearing cache from browser does not help either.
here is the code for the chart:
function setChart(){
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['classA','classB','classC','classD'],
datasets: [{
label: 'revenue proportion per class',
data: [0.25, 0.3, 0.15, 0.3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
],
borderColor: ['rgba(255, 99, 132, 0.2)'],
borderWidth: 5
},
{
label: 'proportion of item quantity per class',
data: [0.25, 0.3, 0.15, 0.3],
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
],
borderColor: ['rgba(54, 162, 235, 0.2)'],
borderWidth: 5
}
],
and the options:
options: {
scale: {
ticks:{
label: false,
min: 0,
max: 1,
fixedStepSize: 4,
showLabelBackdrop: false,
fontSize: 0,
color: "#eee"
}
}
options: {
scale: {
ticks:{
display: false
}
}
I am doing something stupid? Any help on that would be welcomed!

options: {
scales: {
r: {
pointLabels: {
display: false // Hides the labels around the radar chart
},
ticks: {
display: false // Hides the labels in the middel (numbers)
}
}
}
}

The linear radial axis documentation lists four configuration options (as of v2.9.3):
angleLines
gridLines
pointLabels
ticks
Each of these is an object that supports the display property. Specifying display: false in all four objects removes the scale.
options: {
scale: {
angleLines: {
display: false
},
gridLines: {
display: false
},
pointLabels: {
display: false
},
ticks: {
display: false
},
}
}
Here's a working example:
new Chart('myChart', {
type: 'radar',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: 'Series 1',
data: [0.25, 0.3, 0.15, 0.3],
}]
},
options: {
scale: {
angleLines: {
display: false
},
gridLines: {
display: false
},
pointLabels: {
display: false
},
ticks: {
display: false
},
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3/dist/Chart.min.js"></script>
<canvas id="myChart"></canvas>

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.

Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset

I am trying to take a chartJS doughnut chart and instead of it displaying each piece of data on a single dataset I want each unique piece of data (with its own unique label) to display on its own dataset. This means to represent that data on each dataset it still needs two pieces of data:
- the desired value (ie. 80%)
- the difference value (ie. 20%)
After some research I figured out how to use callback function to display the dataset label to each of its data values and add a percentage character after its number value. Now I am trying to hide the tooltip for the second data value within each dataset. I am new to javascript so a little help would be appreciated! Cheers.
Chart.defaults.global.defaultFontSize = 16;
Chart.defaults.global.defaultFontColor = '#000';
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [
/* Outer doughnut data starts*/
{
data: [90, 10],
backgroundColor: [
'rgba(210, 35, 42, 1)',
'rgba(0, 0, 0, 0.05)'
],
label: 'Skill #1'
},
/* Outer doughnut data ends*/
/* Inner doughnut data starts*/
{
data: [50, 50],
backgroundColor: [
'rgba(210, 35, 42, 0.75)',
'rgba(0, 0, 0, 0.05)'
],
label: 'Skill #2'
},
/* Inner doughnut data ends*/
{
data: [15, 85],
backgroundColor: [
'rgba(210, 35, 42, 0.5)',
'rgba(0, 0, 0, 0.05)'
],
label: 'Skill #3'
},
{
data: [5, 95],
backgroundColor: [
'rgba(210, 35, 42, 0.25)',
'rgba(0, 0, 0, 0.05)'
],
label: 'Skill #4'
}
],
},
options: {
title: {
display: true,
text: 'My Skills',
fontSize: 24,
},
scales: {
xAxes: [{
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
display: false,
}
}],
yAxes: [{
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
display: false,
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var dslabelamt = dataset.data[tooltipItem.index];
return data.datasets[tooltipItem.datasetIndex].label + ': ' + dslabelamt + '%';
}
}
}
}
});
https://codepen.io/manudan711/pen/aadYRj

those data-sets in chart.js don't work alike series in other charts do, but are index-based. therefore you'd require only two datasets and then you'd have to map those values accordingly; so that index position 0, 1, 2, 3, ... on both of the data arrays, would sum up to 100.