Chartjs bar chart trying to get labels from datasets - chart.js

I am trying to implement chartJS bar chart and use the legend to filter bars.
I want to set the labels list to be empty because this allows me to remove bars clearly.
I am looking for a way to set the ticks with labels on X axis, since it is empty from text now.
JSfiddle:
https://jsfiddle.net/m1eorjwv/1/
var options = {
type: 'bar',
data: {
labels: [],
datasets: [
{
label: 'red',
data: [12],
borderWidth: 1
},
{
label: 'blue',
data: [7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false,
beginAtZero: true
}
}]
}
}
}
Thanks a lot, Alon

I managed to do this, here is the ansert:
enter code here
code
https://jsfiddle.net/ehacujny

Related

ChartJS 'Line chartjs' does not show output in NodeRED?

My requirement is to output 2 y-axis chart with real-time data readings in NodeRED. I have installed ChartJS package in NodeRED and now according to the documentation of the package there should be PATH, Title, X-Axis, Y-Axis, Payload. But I couldn't find the Payload tab anywhere in the Line Chartjs node?
Ref : https://www.npmjs.com/package/node-red-contrib-chartjs
So I assumed that I have to add the code which belonged to Payload inside a function node before the Line Chartjs node.
What I have tried : (my function node)
var left = {payload : msg.payload.readResults[0].v };
var right = {payload : msg.payload.readResults[1].v };
//return [[left,right]];
const labels = [1,2,3,4,5,6,7,8,9,10];
const data = {
labels: labels,
datasets: [
{
label: 'Dataset 1',
data: left,
borderColor: '#ff0000',
backgroundColor: '#ff0000',
yAxisID: 'leftCamber',
},
{
label: 'Dataset 2',
data: right,
borderColor: '#0000ff',
backgroundColor: '#0000ff',
yAxisID: 'rightCamber',
}
]
};
const config = {
type: 'line',
data: data,
options: {
responsive: true,
interaction: {
mode: 'index',
intersect: false,
},
stacked: false,
plugins: {
title: {
display: true,
text: 'Chart.js Line Chart - Multi Axis'
}
},
scales: {
leftCamber: {
type: 'linear',
display: true,
position: 'left',
},
rightCamber: {
type: 'linear',
display: true,
position: 'right',
// grid line settings
grid: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
},
}
},
};
const actions = [
{
name: 'CamberGraph',
handler(chart) {
chart.data.datasets.forEach(dataset => {
dataset.data = chart.data.labels.length
});
chart.update();
}
},
];
Here I have tried to get the 2 HTTP outputs I've named as left and right as my datasets(2 y-axis) vs hardcoded x-axis(1 through 10) which will be Footage later on.
PS : I have returned the left and right using return statement and it's outputting the values as I expected.
Currently I do not get any output in my debug window as well as in my ChartJS Line Chart when I inject the node. Using what I've tried so far can anybody show where I've done wrong or add/remove anything to make the graph work?
Thank you!

Chart JS - Bubble Chart is not getting rendered when loaded Dynamically

I would be glad if anyone can help me fix the problem i'm facing with Chart Js's Bubble Chart.
I am loading the chart dynamically based on change in drop down selection.
switch case is as below:
case "bar":
case "bubble":
case "line":
return {
type: value,
data: {
labels: labels,
datasets: [
{
data: data,
fill: false,
backgroundColor: colorCodes.chartBackGroundColor,
borderWidth: 1,
borderColor: colorCodes.chartGraphBorderColor,
hoverBorderWidth: 2
}
]
},
options: {
title: {
display: false
},
legend: {
display: false
},
layout: {
padding: 20
},
responsive: true,
maintainAspectRatio: false,
hover: {
animationDuration: 0
},
tooltips: {
enabled: false
},
animation: {
"duration": 1,
"onComplete": function () {
if (data.length > 0) {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize,
Chart.defaults.global.defaultFontStyle,
Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = data[index];
ctx.fillText(data, bar._model.x, bar._model.y);
});
});
}
}
},
scales: {
scaleOverride: true,
yAxes: [
{
scaleLabel: {
display: true,
labelString: chartTypeAndLabelConfig.yAxis.title,
fontSize: 20,
fontColor: "#1c969c"
},
display: true,
gridLines: {
display: true,
borderDash: [4, 2]
},
ticks: {
beginAtZero: true
}
}
],
xAxes: [
{
scaleLabel: {
display: true,
labelString: chartTypeAndLabelConfig.xAxis.title,
fontSize: 20,
fontColor: "#1c969c"
},
gridLines: {
display: false
}
}
]
}
}
};
the returned config is stored into a variable "chartConfig" and then the chart is created as below:
var chart = new Chart(ctx, chartConfig);
When dropdown is changed from bar to line or line to bar the chart is rendered, when i try to select bubble, i see same values plotted against x-axis and y-axis without any bubbles in the chart.
Example:
data = [1,2,3,4,5];
labels = [a,b,c,d,e];
when dropdown option for bubble is selected i get the chart rendered as:
When rendering chart dynamically, i'm also destroying the previously rendered chart and then rendering the chart based on the new config i get.
Is there anything i'm missing here?
I think the issue is that you need to convert the data into a format supported by bubble charts. For line and bar charts data can be integers or floats but for bubble charts they need to be Objects with a specified 'x', 'y' and 'r' (radius) value.
So for example to display a data in a bubble graph at point (1,4) with a radius of 10, you'll specify it as:
{x: 1, y: 4, r: 10}
One way of doing this could be to call a helper function before creating a bubble chart or storing a copy of the data as an Object to be used only for bubble charts. It really depends on how you've set up your project and if you are concerned about the number of computations carried out or not. Hope this helps!
Documentation for Chart.js Bubble Chart Data Structure

On hover bar is overlapped by label chartjs

I'm trying to generate a bar graph but after generating when i hover on bar first graph the hover works and tooltip is also coming correctly but when i hover on second or third bar the bar color becomes black
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="barChart" style="margin-top:10px"></canvas>
var ctxBarChart = document.getElementById('barChart').getContext('2d');
var chart = new Chart(ctxBarChart, {
// The type of chart we want to create
type: 'bar',
// The data for our dataset
data: {
labels: ['bar 1', 'bar 2', 'bar 3'],
datasets: [{
label: 'bar graph label',
backgroundColor: ['#ff7f27', 'DodgerBlue', 'Green'],
borderColor: ['#ff7f27', 'DodgerBlue', 'Green'],
data: [24.6154, 28.4, 28.4]
}]
},
// Configuration options go here
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
return tooltipItem.yLabel.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') + '%';
}
}
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
// max: 100,
min: 0,
// stepSize:20
}
}]
}
}
});
but the result i'm getting is like this please see following images for bar 1 and bar 2
This seems to be caused by case-sensitivity of colour names.
Change your colours to all lowercase like so:
backgroundColor: ['#ff7f27', 'dodgerblue', 'green'],
borderColor: ['#ff7f27', 'dodgerblue', 'green'],
The CSS3 specification explicitly states the names are case-insensitive so this looks like a bug in Chart.js

chat,js stacked bar chart (make one dataset into stacked)

Trying to put one dataset into stacked on bar chart .. is it possible ?? please refer my fiddle link fiddle here,
Just want to make test 3 data into stacked one.
my datasets are passed like this `
var dataSet = '';
var datasets = [];
for (i in label) {
dataSet = {
label: label[i],
data: dataY[i]
};
datasets.push(dataSet);
}
var barData = {
labels: dataX,
datasets: datasets
};
`
You need to enable the stacked option on both the x and y axes:
var stackedBar = new Chart(document.getElementById('chart'), {
type: 'bar',
data: {
labels: [1,2,3],
datasets: [{
label: 'series1',
backgroundColor: 'red',
data: [1,2,1],
stack: 1
},{
label: 'series2',
backgroundColor: 'lightblue',
data: [1,2,2],
stack: 2
},{
label: 'series3',
backgroundColor: 'lightgreen',
data: [2,1,2],
stack: 2
}]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>
As far as I searched google It seems it is not possible to put stacked grouped graph using chart.js and solution is to use D3.js

Horizontal bar chart in chart.js

I am trying to draw a horizontal bar chart using chart.js 2.3.0 -
var MeSeContext = document.getElementById("MeSeStatusCanvas").getContext("2d");
var MeSeData = {
labels: [
"ME",
"SE"
],
datasets: [
{
label: "Test",
data: [100, 75],
backgroundColor: ["#669911", "#119966" ],
hoverBackgroundColor: ["#66A2EB", "#FCCE56"]
}]
};
var MeSeChart = new Chart(MeSeContext, {
type: 'horizontalBar',
data: MeSeData,
options: {
scales: {
yAxes: [{
stacked: true
}]
}
}
});
But it only shows one bar. What did I miss here?
You can see only one chart because the lowest value of your data (75 here) is the scale's left limit.
As shown in the following screenshot of your code's result, if you hover on the scale, you can still see the associated data, which means it is here.
You have two ways to fix this :
Set the min property of the xScale ticks to the value you want (enough to see it of course) :
var MeSeChart = new Chart(MeSeContext, {
type: 'horizontalBar',
data: MeSeData,
options: {
scales: {
xAxes: [{
ticks: {
min: 60 // Edit the value according to what you need
}
}],
yAxes: [{
stacked: true
}]
}
}
});
You can see the result with a min set to 60 on this jsFiddle :
Set the beginAtZero property to true, which is the same as setting min to 0 :
xAxes: [{
ticks: {
beginAtZero: true
}
}],
You can see the result with the beginAtZero property set to true on this jsFiddle.