Develop Reference

ChartJs hiding odd index values on x-axes/labels values

["06月10日","06月13日","06月14日","06月15日","06月16日","06月17日","06月20日","06月21日","06月22日","06月23日","06月24日","06月27日","06月28日","06月29日","06月30日","07月01日","07月04日","07月05日","07月06日","07月07日","07月08日","07月11日","07月12日","07月13日","07月14日","07月15日","07月19日","07月20日","07月21日","07月22日","07月25日","07月26日","07月27日","07月28日","07月29日","08月01日","08月02日","08月03日","08月04日","08月05日","08月08日","08月09日","08月10日","08月12日","08月15日","08月16日","08月17日"]
above are all the labels that I want to show on the graph but it hiding all the odd index values from the graph only showing even index values on the graph from the above list.
see the graph it missing some labels.
if you see the order all the even number index values are displayed and odd are hidden..
This is all my chart code...
const data = {
labels: dates,
datasets: [{
type: 'line',
label: 'Line graph',
data: line,
fill: false,
borderColor: '#ff5252',
backgroundColor: '#ff5252',
yAxisID: 'y-axis-a',
lineTension: 0.1,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointRadius: 5,
pointHitRadius: 10,
},{
type: 'bar',
label: 'Bar graph',
data: diff,
borderColor: colors,
backgroundColor: colors,
borderWidth: 2,
pointRadius: 5,
pointBorderWidth: 1,
pointHoverRadius: 7,
pointHoverBorderWidth: 2,
fill: true,
showLabelBackdrop:true,
},]
};
const config = {
type:"scatter",
data: data,
options: {
legend: {
display: false
},
responsive: false,
scales: {
y: {
display:false,
beginAtZero: true,
ticks: {
color: "#ffffff",
font: {
size: 14,
},
},
},
},
plugins: {
labels: {
ticks:{
font: {
size: 22
},
color: "#ffffff",
}
},
title: {
display: true,
text: title,
padding: {
top: 10,
bottom: 30,
},
font: {
size: 22,
},
color: "#ffffff"
}
}
}
};
const ctx = document.querySelector(`#chart${index+1}`).getContext('2d');
const myChart = new Chart(ctx, config)
I have also tried..
x:{ticks:{autoSkip:false}}
when I do this it changes my label to numbers..

when you are using the type:"scatter",
Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 4 pointslink for charts scatter charts
when you are not defining the values with x and y then used the x-axis and y-axis as linear and then you can manipulate the x-axes for both line and bar..if you will not provide the chart_type in config it will take axes as linear
you can
xAxisID: 'x-axis-bar',
xAxisID: 'x-axis-line',
and then hide the 1 x-axis and autoSkip=False it will show your all values.
I am attaching the all code below..
const data = {
labels: dates,
datasets: [{
type: 'line',
label: 'Line graph',
data: line,
fill: false,
borderColor: '#ff5252',
backgroundColor: '#ff5252',
yAxisID: 'y-axis-a',
xAxisID: 'x-axis-line',
lineTension: 0.5,
order:1,
},{
type: 'bar',
label: 'Bar graph',
data: diff,
borderColor: colors,
backgroundColor: colors,
borderWidth: 2,
pointRadius: 5,
xAxisID: 'x-axis-bar',
pointBorderWidth: 1,
pointHoverRadius: 7,
pointHoverBorderWidth: 2,
fill: true,
showLabelBackdrop:true,
order:2
},]
};
const config = {
data: data,
options: {
responsive: false,
scales: {
y: {
display:false,
beginAtZero: true,
ticks: {
color: "#ffffff",
font: {
size: 14,
},
},
},
'x-axis-bar':{
ticks:{
autoSkip:false,
stepSize:1.0,
}
},
'x-axis-line':{
display:false
}
},
plugins: {
labels: {
ticks:{
font: {
size: 22
},
color: "#ffffff",
}
},
title: {
display: true,
text: title,
padding: {
top: 10,
bottom: 30,
},
font: {
size: 22,
},
color: "#ffffff"
}
}
}
};
const ctx = document.querySelector(`#chart${index+1}`).getContext('2d');
const myChart = new Chart(ctx, config)

Regrouping data chartjs

I need your help to solve my problem with regrouping data, I'm trying to create a chart using chartjs with dynamic data from an xml link, the code shown below works but not the exact way I want to.
In my current situation, I get "for example" ChefProjet=10, ChefProjet=7, ChefProjet=7, ChefProjet=7, so ChefProjet is repeated four times but I want to get ChefProjet shown only one time and it equals 31 (10+7+7+7), you can see the chart in the link of the picture. ↓
https://scontent.ftun11-1.fna.fbcdn.net/v/t1.15752-9/67271937_905246276477408_4457126943061442560_n.png?_nc_cat=101&_nc_oc=AQnTcvx_xBHwZTvX8evyZbi7zACL6uBR10or9Onqp5MJ-6yQLM9oa9eE0Bg2mkBsLhc&_nc_ht=scontent.ftun11-1.fna&oh=866978b6e1752f6dcf9be0086eba0122&oe=5DB50932
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + add2,
method: "GET",
headers: { "Accept": "application/json; odata=nometadata" },
success: function (data) {
if (data.value.length > 0) {
var pieValues = [];
var pieLabels = [];
for (var i = 0; i < data.value.length; i++) {
pieValues.push(parseInt(data.value[i].AssignmentWork));
pieLabels.push(data.value[i].ResourceName);
}
var pieData = {
datasets: [{
borderColor: "#80b6f4",
pointBorderColor: "#80b6f4",
pointBackgroundColor: "#80b6f4",
pointHoverBackgroundColor: "#80b6f4",
pointHoverBorderColor: "#80b6f4",
pointBorderWidth: 1,
pointHoverRadius: 1,
pointHoverBorderWidth: 1,
pointRadius: 2,
fill: false,
borderWidth: 1,
data: pieValues
}],
labels: pieLabels
};
var ctx = document.getElementById("myChart");
if (window.myPieChart2 != undefined)
{
window.myPieChart2.destroy();
}
//
window.myPieChart2 = new Chart(ctx, {
type: 'line',
data: pieData,
options: {
responsive: true,
legend: { display: false },
title: {
display: true,
text: 'Pourcentage d\'achevement des phases'
},
scales: {
xAxes: [{
gridLines: {
zeroLineColor: "transparent"
},
ticks: {
maxRotation: 90,
minRotation: 90,
fontSize:10
}
}],
yAxes: [{
ticks: {
fontColor: "rgba(0,0,0,0.5)",
fontStyle: "bold",
beginAtZero: true,
maxTicksLimit: 5,
padding: 20
},
gridLines: {
drawTicks: false,
display: false
}
}]
}
}
});
}
},
error: function (data) {
}
});
I will appreciate your time.

It worked, here is the solution:
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + add2,
method: "GET",
headers: { "Accept": "application/json; odata=nometadata" },
success: function (data) {
if (data.value.length > 0) {
var reducedObject = {};
for (var i = 0; i < data.value.length; i++) {
if (!reducedObject[data.value[i].ResourceName]) {
reducedObject[data.value[i].ResourceName] = 0;
}
reducedObject[data.value[i].ResourceName] += parseInt(data.value[i].AssignmentWork);
}
var keys = Object.keys(reducedObject);
var pieLabels = [];
var pieValues = [];
for (var i = 0; i < keys.length; i++) {
pieValues.push(reducedObject[keys[i]]);
pieLabels.push(keys[i]);
}
var pieData = {
datasets: [{
borderColor: "#80b6f4",
pointBorderColor: "#80b6f4",
pointBackgroundColor: "#80b6f4",
pointHoverBackgroundColor: "#80b6f4",
pointHoverBorderColor: "#80b6f4",
pointBorderWidth: 1,
pointHoverRadius: 1,
pointHoverBorderWidth: 1,
pointRadius: 2,
fill: false,
borderWidth: 1,
data: pieValues
}],
labels: pieLabels
};
var ctx = document.getElementById("myChart");
if (window.myPieChart2 != undefined)
{
window.myPieChart2.destroy();
}
//
window.myPieChart2 = new Chart(ctx, {
type: 'line',
data: pieData,
options: {
responsive: true,
legend: { display: false },
title: {
display: true,
text: 'Pourcentage d\'achevement des phases'
},
scales: {
xAxes: [{
gridLines: {
zeroLineColor: "transparent"
},
ticks: {
maxRotation: 90,
minRotation: 90,
fontSize:10
}
}],
yAxes: [{
ticks: {
fontColor: "rgba(0,0,0,0.5)",
fontStyle: "bold",
beginAtZero: true,
maxTicksLimit: 5,
padding: 20
},
gridLines: {
drawTicks: false,
display: false
}
}]
}
}
});
}
},
error: function (data) {
}
});

Chart.js multicolored fill sections

I have a chart which contains blue or green data points depending on the value of a point.
Is it possible to change the fill color beneath these points to reflect their value as well?
Similar to this codepen https://codepen.io/jordanwillis/pen/BWxErp using a gradient of colors switching between them under each data point.
Below is my chart switching between colored datapoints.
var chartColors = {
blue: 'rgb(54, 162, 235)',
green: 'rgb(75, 192, 192)'
}
// x-axis labels
var chartData = {
labels: ['1/1/2018', '2/1/2018', '3/1/2018', '4/1/2018', '5/1/2018', '6/1/2018', '7/1/2018'],
datasets: [
{label: 'Light',
fill: true,
borderColor: window.chartColors.blue,
pointBackgroundColor: [],
pointBorderColor: [],
pointRadius: 10,
pointHoverRadius: 10,
data: data1},
]
};
window.onload = function() {
var config = document.getElementById("canvas").getContext("2d");
window.myLine = Chart.Line(config, {
type: "line",
data: chartData,
options: {
responsive: true,
title: {
display: true,
text: ['Light Intensity'],
fontSize: 14
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Date (3 day intervals)'
},
type: 'linear',
position: 'bottom',
ticks: {
max: 59,
min: 0,
stepSize: 10,
callback: function(value, index, values) {
return chartData.labels[index];
}
}
}],
yAxes: [{
display: true,
ticks:{min: 0, max: 400, reverse: false},
scaleLabel: {
display: true,
labelString: 'Photosynthetically Available Radiation'
}
}]
}
}
});
};
// change colors of points here
function algeaFill(respiration, depth){
var dataPoints = [];
lightAvgs = [65.3, 33.14, 22.01, 34.74, 26.58, 38.49, 48.12, 44.3, 28.55, 28.92, 37.21, 38.13, 42.49, 44.65, 80.62, 104.66, 87.16, 72.72, 91.07, 93.89, 113.01, 109.56, 110.08, 126.43, 128.98,
165.52, 196.73, 156.93, 140.41, 130.24, 164.14, 150.28, 127.09, 134.54, 129.89, 115.30, 181.71, 259.52, 269.57, 241.86, 221.29, 212.84, 246, 271.05, 238.03, 250.05, 256.02, 236.56, 259.93,
286.6, 283.94, 298.4, 279.81, 256.37, 262.98, 236.18, 305.79, 318.73, 289.67, 277.52];
for(var i = 0; i < 60; i++){
if(lightAvgs[i] <= depth){
window.myLine.data.datasets[0].pointBackgroundColor[i] = "green";
}else{
window.myLine.data.datasets[0].pointBackgroundColor[i] = "blue";
}
dataPoints.push({x: i, y: lightAvgs[i]});
}
return dataPoints;
}
// call algeaFill
window.myLine.data.datasets[0].data = algeaFill(respirationSlider.value, depthSlider.value);
window.myLine.update();
});

in each dataset object insert backgroundColor and pointBackgroundColor properties.
backgroundColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)'

Mark X value on Chart Js graph

I have this chart:
And I want to mark a given X value for the user. For example I want something like this:
The chart code:
var chart = new Chart(document.getElementById("featureChart"), {
type: 'scatter',
data: {
datasets: [{
label: "Benign_Cross_Entropy",
data: customize_date
}]
},
options: {
responsive: true
}
});
How can I do it ? Thanks
Edit: I'm trying to use annotation and i'm not sure what is wrong.
The example beaver gave in the comments looks good
var ann = [1];
var ann_values = ["your data"];
var annotations_array = ann.map(function(date, index) {
return {
type: 'line',
id: 'vline' + index,
mode: 'vertical',
scaleID: 'x-axis-0',
value: date,
borderColor: 'green',
borderWidth: 1,
label: {
enabled: true,
position: "center",
content: ann_values[index]
}
}
});
var chart = new Chart(document.getElementById("featureChart"), {
type: 'scatter',
data: {
datasets: [{
label: "Benign_Cross_Entropy",
data: customize_date,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderJoinStyle: 'miter'
// pointBorderColor: "rgba(75,192,192,1)",
// pointBackgroundColor: "#fff"
}
]
},
options: {
responsive: true,
elements: { point: { radius: 0 } },
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: annotations_array,
}
}
});

Here is the correct usage of annotation plugin:
var ann = [1];
var ann_labels = ["your data"];
var annotations_array = ann.map(function(value, index) {
return {
type: 'line',
id: 'vline' + index,
mode: 'vertical',
scaleID: 'x-axis-0',
value: value,
borderColor: 'red',
borderWidth: 2,
label: {
enabled: true,
position: "center",
content: ann_labels[index]
}
}
});
console.log(annotations_array)
var data = [{
x: 0,
y: 5
}, {
x: 1,
y: 6
}, {
x: 2,
y: 8
}, {
x: 3,
y: 9
}];
var chart = new Chart(document.getElementById("ctx"), {
type: 'scatter',
data: {
datasets: [{
label: "Benign_Cross_Entropy",
data: data,
borderWidth: 2,
showLine: true,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
//borderCapStyle: 'butt',
//borderJoinStyle: 'miter'
// pointBorderColor: "rgba(75,192,192,1)",
// pointBackgroundColor: "#fff"
}]
},
options: {
responsive: true,
//elements: { point: { radius: 0 } },
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: annotations_array,
},
scales: {
xAxes: [{
type: 'linear',
id: 'x-axis-0',
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.min.js"></script>
<canvas id="ctx"></canvas>
Here is a jsfiddle as well: https://jsfiddle.net/beaver71/e3b1Ldms/

Hide scale bar on label click in Charts.js

I have a simple Charts.js Line Chart with two datasets (lines).
When I click on one of the legend labels, the visibility of the lines in the chart is toggled, but the vertical scale bar still appears. My question is how to make the vertical scale bar to shown and hidden alongside to the line?
var data = {
labels: [1, 2, 3, 4],
datasets: [
{
label: "(Mbps) UP",
fill: false,
yAxisID: "y-axis-upstream",
backgroundColor: "#98B954",
borderColor: "#98B954",
pointBorderColor: "#98B954",
pointBackgroundColor: "#fff",
pointHoverBackgroundColor: "#98B954",
pointHoverBorderColor: "#98B954",
data: [1, 2, 3, 4]
},
{
label: "(Mbps) DOWN",
fill: false,
yAxisID: "y-axis-downstream",
backgroundColor: "#BE4B48",
borderColor: "#BE4B48",
pointBorderColor: "#BE4B48",
pointBackgroundColor: "#fff",
pointHoverBackgroundColor: "#BE4B48",
pointHoverBorderColor: "#BE4B48",
data: [10, 22, 33, 43]
}
]
};
var options = {
title: {
display: true,
text: "Chart Title"
},
legend: {
display: true,
position: "top"
},
scales: {
yAxes: [
{
id: "y-axis-upstream",
type: "linear",
display: true,
position: "left",
stepSize: 0.1,
fixedStepSize: 0.1,
gridLines: {
color: "rgba(152, 185, 84, 0.4)"
},
ticks: {
display: true,
fontColor: "#98B954"
}
},
{
id: "y-axis-downstream",
type: "linear",
display: true,
position: "right",
stepSize: 0.1,
fixedStepSize: 0.1,
gridLines: {
color: "rgba(190, 75, 72, 0.2)"
},
ticks: {
display: true,
fontColor: "#BE4B48"
}
}
]
}
};
var ctx = document.getElementById("chartID");
var chart = new Chart(ctx, {
type: type,
data: data,
options: options
});