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
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
Using a standard bar chart I am able to successfully create a chart with two datasets plotted on two y-axis. Working Example here: https://jsfiddle.net/pe8kxjqc/12/ How can I create the same chart as a horizontalBar chart with the labels on the left and the two dataset axes on the top and bottom?
The horizontalBar chart doesn't appear to handle the second axis as expected. I've tried the following but it doesn't work like expected:
var data = {
labels: ["Label1", "Label2", "Label3", "Label4", "Label5"],
datasets: [
{
"label": "Total V",
"xAxisID": "v",
"backgroundColor": "rgba(53,81,103,1)",
"borderColor": "rgba(53,81,103,.4)",
"data": [100,90,80,70,60]
},
{
"label": "Total C",
"xAxisID": "c",
"backgroundColor": "rgba(255,153,0,1)",
"borderColor": "rgba(255,153,0,.4)",
"data": [10,9,8,7,6]
}]};
var options = {scales:{
xAxes:[
{position:"top",id:"v", gridLines:{color:"rgba(53,81,103,.4)"}},
{position:"bottom",id:"c", gridLines:{color:"rgba(255,153,0,.4)"}}
]}};
var ctx = document.getElementById("myChart");
new Chart(ctx, {type: "horizontalBar",data:data, options:options});
You can have dynamic configuration for bar as well as horizontalBar you can use this configurations
Fiddle demo
var data = {
labels: ["Label1", "Label2", "Label3", "Label4", "Label5"],
datasets: [{
"label": "Total V",
"yAxisID": "A",
"backgroundColor": "rgba(53,81,103,1)",
"borderColor": "rgba(53,81,103,.4)",
"data": [100, 90, 80, 70, 60]
}, {
"label": "Total C",
"yAxisID": "A",
"backgroundColor": "rgba(255,153,0,1)",
"borderColor": "rgba(255,153,0,.4)",
"data": [10, 9, 8, 7, 6]
}]
};
var options = {
scales: {
yAxes: [{
id: 'A',
position: 'left'
}]
}
};
var ctx = document.getElementById("myChart");
new Chart(ctx, {
type: "horizontalBar",
data: data,
options: options
});
coming to your question the actual problem is with var options={...} it is made to work only with bar charts. Hope you understand
Update
Replace following as option in the chart above for required axis scales
var options = {scales:{yAxes:[{id: 'A',position: 'left',gridLines:{color:"rgba(53,81,103,.4)"}},{position:"top",id:"c", gridLines:{color:"rgba(255,153,0,.4)"},ticks: { min: 0,max: 100,}},]}};
updated fiddle
Basically you will need a y-axis for the first dataset which going to hold the labels. And you will need two x-axis for showing the values in the top and in the bottom.
The second dataset will go to the x-axis which is shown at the top.
Working fiddle included:
{
scales: {
yAxes: [{
id: 'A',
position: 'left',
display: true,
gridLines: {
color: "rgba(53,81,103,.4)"
}
}, ],
xAxes: [{
barPercentage: 0.4,
display: true,
id: "1",
position: 'bottom',
ticks: {
fontColor: 'rgb(0, 0, 0)'
},
fontSize: 500,
}, {
stacked: false,
barPercentage: 1,
display: true,
type: 'linear',
id: '2',
position: 'top',
ticks: {
fontColor: 'rgb(0, 0, 0)'
},
fontSize: 500,
}],
}
};
fiddle for two axis horizontal bar chart
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.
When Charts.js (Version: 2.1.3) renders my polar area charts for low data values the scale is drawn with fractional values:
Example polar area chart
The fractions do not make sense in the context of my data (student numbers). I would rather display a scale of whole numbers, or no scale. I have tried to change the chart options, looked at and tested various examples, searched for answers on this site and elsewhere, but no success yet. Any advice please?
Example of my code:
var ML_Chart_obj = new Chart(ctx,
{
type: "polarArea",
data: {
datasets: [{
data: [0,1,0],
backgroundColor: [
"rgba(060,186,084,0.6)"
,"rgba(244,194,013,0.6)"
,"rgba(219,050,054,0.6)"
],
label: ""
}],
labels: [
"Active, on target"
,"Unspecified start or end date"
,"Active, at risk"
]
},
options: {
scales: {
xAxes: [{
display:false
}]
},
legend: {
display: false
}
}
});
A little too late, but this is how you do it.
options{
scale: {
ticks: {
stepSize: 1
}
}
}