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

ChartJS multiple annotations (vertical lines)

i am trying to put 2 vertical lines on a chart.JS chart using the annotations plugin. i am using the following versions:
chart.js = 2.8.0
annotations plugin = 0.5.7
here's the JSFiddle
please see my code below:
var ann = ["4.35"];
var ann_labels = ["start"];
var annotations_array = ann.map(function(value, index) {
return {
type: 'line',
id: 'vline' + index,
mode: 'vertical',
scaleID: 'x-axis-0',
value: value,
borderColor: 'green',
borderWidth: 1,
label: {
enabled: true,
position: "bottom",
content: ann_labels
}
}
});
var ann2 = ["4.29"];
var ann_labels2 = ["stop"];
var annotations_array2 = ann2.map(function(value, index) {
return {
type: 'line',
id: 'vline2' + index,
mode: 'vertical',
scaleID: 'x-axis-0',
value: value,
borderColor: 'green',
borderWidth: 1,
label: {
enabled: true,
position: "top",
content: ann_labels2
}
}
});
var ctx = document.getElementById('test').getContext('2d');
var test = new Chart(ctx, {
type: 'line',
data: {
labels: ["1.44","4.03","4.35","3.99","3.58","3.75","4.29","5.02","5.95","6.65"],
datasets: [{
data: ["1", "2", "1", "2", "1", "2", "1", "2", "1", "2"],
yAxisID: 'A',
backgroundColor: [
'rgba(91, 192, 222, 0.1)',
],
borderColor: [
'rgba(0, 123, 255, 0.8)',
],
borderWidth: 1.3,
},
{
data: ["10", "11", "12","13","14","15","16","17",],
yAxisID: 'B',
backgroundColor: [
'rgba(255, 206, 86, 0.0)',
],
borderColor: [
'rgba(217, 83, 79, 0.6)',
],
borderWidth: 1.3,
}]
},
options: {
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: annotations_array
},
maintainAspectRatio: true,
scales: {
yAxes: [{
id: 'A',
ticks: {
callback: function(value, index, values) {
return value + ' m';
},
reverse: true,
}
},
{
id: 'B',
position: 'right',
ticks: {
callback: function(value, index, values) {
return value + ' °C';
},
reverse: true,
}
}]
},
elements: {
point:{
radius: 0,
}
},
legend: {
position: 'bottom',
display: false,
},
}
});
however, i am unable to display both vertical lines (annotations_array and annotations_array2) at the same time.
everything works fine when i do this:
annotations: annotations_array
or this:
annotations: annotations_array2
but when i try to print both arrays, it doesnt work:
annotations: annotations_array, annotations_array2
I have also tried this without any luck:
annotations: [{annotations_array},{annotations_array2}]
does anyone know what am i doing wrong?
Thanks in advance!

You have to provide both annotations as object in 1 array, not an array containing objects containing arrays, see example:
var ann = ["4.35", "4.29"];
var ann_labels = ["start", "stop"];
var annotations_array = ann.map(function(value, index) {
return {
type: 'line',
id: 'vline' + index,
mode: 'vertical',
scaleID: 'x-axis-0',
value: value,
borderColor: 'green',
borderWidth: 1,
label: {
enabled: true,
position: "bottom",
content: ann_labels[index]
}
}
});
var ctx = document.getElementById('test').getContext('2d');
var test = new Chart(ctx, {
type: 'line',
data: {
labels: ["1.44", "4.03", "4.35", "3.99", "3.58", "3.75", "4.29", "5.02", "5.95", "6.65"],
datasets: [{
data: ["1", "2", "1", "2", "1", "2", "1", "2", "1", "2"],
yAxisID: 'A',
backgroundColor: [
'rgba(91, 192, 222, 0.1)',
],
borderColor: [
'rgba(0, 123, 255, 0.8)',
],
borderWidth: 1.3,
},
{
data: ["10", "11", "12", "13", "14", "15", "16", "17", ],
yAxisID: 'B',
backgroundColor: [
'rgba(255, 206, 86, 0.0)',
],
borderColor: [
'rgba(217, 83, 79, 0.6)',
],
borderWidth: 1.3,
}
]
},
options: {
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: annotations_array
},
maintainAspectRatio: true,
scales: {
yAxes: [{
id: 'A',
ticks: {
callback: function(value, index, values) {
return value + ' m';
},
reverse: true,
}
},
{
id: 'B',
position: 'right',
ticks: {
callback: function(value, index, values) {
return value + ' °C';
},
reverse: true,
}
}
]
},
elements: {
point: {
radius: 0,
}
},
legend: {
position: 'bottom',
display: false,
},
}
});
<h3 class="card-text"><canvas id="test"></canvas></h3>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
Fiddle: https://jsfiddle.net/Leelenaleee/6Ltycqfh/7/

ChartJS Bar chart with time scale - Bars overlap with each other

I'm trying to create a ChartJs Bar chart which contains date on labels.
The chart bars over lap with each other unevenly. Works well when the time scale is removed however, the labels are not date sorted. The labels and data are dynamically populated, so cannot sort it before rendering.
Below is the sample image,
And, if the scales (xAxis) is removed, it give proper output (but not sorted)
example: https://codepen.io/karthikkbala/pen/QWjVQqb
Sample data:
[ "2020-05-13", "2020-05-11", "2020-05-12", "2020-05-14", "2020-05-09", "2020-05-10", ]
[ 20, 11, 9, 22, 11, 9, ]

You can omit labels in the chart configuration and instead generate data as individual points through objects containing x and y properties as shown here.
const labels = ["2020-05-13", "2020-05-11", "2020-05-12", "2020-05-14", "2020-05-09", "2020-05-10"];
const baseData = [20, 11, 9, 22, 11, 9];
const data = labels.map((l, i) => ({ x: l, y: baseData[i] }));
This produces the following data.
[
{ "x": "2020-05-13", "y": 20 },
{ "x": "2020-05-11", "y": 11 },
{ "x": "2020-05-12", "y": 9 },
{ "x": "2020-05-14", "y": 22 },
{ "x": "2020-05-09", "y": 11 },
{ "x": "2020-05-10", "y": 9 }
]
The xAxis would then have to be defined as follows:
xAxes: [{
offset: true,
type: 'time',
time: {
unit: 'day',
source: 'data',
tooltipFormat: 'MMM DD'
}
}],
Please have a look at your amended code below.
const labels = ["2020-05-13", "2020-05-11", "2020-05-12", "2020-05-14", "2020-05-09", "2020-05-10"];
const baseData = [20, 11, 9, 22, 11, 9];
const data = labels.map((l, i) => ({ x: l, y: baseData[i] }));
var chartData = {
datasets: [{
label: "All Detections",
backgroundColor: "#02a499",
borderColor: "#ffffff",
borderWidth: 1,
hoverBackgroundColor: "#02a499",
hoverBorderColor: "#02a499",
data: data
}]
};
new Chart("ChartByDate", {
type: 'bar',
data: chartData,
options: {
scales: {
xAxes: [{
offset: true,
type: 'time',
time: {
unit: 'day',
source: 'data',
tooltipFormat: 'MMM DD'
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="ChartByDate"></canvas>

Chart.js -> line chart -> multiple points with the same X

I am using chart.js to create some charts, and I need to make line chart that have multiple entries for the same point in the X axes.
In other words, this:
Whatever I try, i can not create it to look like the image.
Dose anyone know how I can manage this (with plugins or without)?

This can be done with a scatter graph, the data has to be an array of objects with x and y, also you can adjust the tension of the line.
var data = {
datasets: [{
label: "Dataset #1",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [{
x: 0,
y: 5
},
{
x: 1,
y: 10
},
{
x: 1,
y: 5
},
{
x: 3,
y: 10
}]
}]
};
var option = {
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}]
},
elements: {
line: {
tension: .1, // bezier curves
}
}
};
Chart.Scatter('chart_0', {
options: option,
data: data
});
[Codepen]https://codepen.io/devil-geek/pen/KrQWBP

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.