I have been racking my brain on this for days now, starting to think its a bug in the chartJS package? When I setup a stacked bar chart, even with a pretty simple options config, I tend to get very slim transparent gaps between the bar data itself. The more data you have in the bar, the more apparent it becomes. I've isolated it completely out of my code (we're using React and react-chartjs-2, but i=I've recreated it using vanilla ChartJS, latest version).
In my example here, I've turned all the bar data to black, and put it on a red background, with a hover border of white. If you look close you'll see vertical lines of red between the bars (ie: we're seeing through the bars themselves to the red background) and the white hover border never triggers on the left side.
Any ideas as to if this may be a data issue, or an options setting I haven't messed with yet, or possibly a bug in the package? The chart we are rendering this with is using thousands of data points and it starts to look like a broken gradient with all the subpixel transparent lines showing up. Any assistance would be greatly appreciated, thanks!
Here's some quick demo code i've put in a JSFiddle as an example:
var barOptions_stacked = {
scales: {
xAxes: [
{
ticks: {
fontColor: "#FFF"
},
stacked: true,
},
],
yAxes: [
{
ticks: {
fontColor: "#FFF"
},
stacked: true,
},
],
},
};
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['2014', '2013'],
datasets: [
{
label: "one",
data: [100,200],
backgroundColor: 'black',
hoverBorderColor: '#FFFFFF',
},
{
label: "two",
data: [300, 400],
backgroundColor: 'black',
hoverBorderColor: '#FFFFFF',
}
],
},
options: barOptions_stacked,
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<div style="background-color: red">
<canvas id="ctx"></canvas>
</div>
Here is a JSFiddle example, if you really expand the chart view up you'll see the lines in play.
JSFiddle Example
Bar Chart Example Img
Related
I use latest Chart.js 2.9.3. I've tried the following code with major ticks:
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
datasets: [{
barPercentage: 0.2,
borderColor: 'black',
borderWidth: 2,
borderSkipped: false,
backgroundColor: 'transparent',
data: [[0, 8000]]
}]
},
options: {
legend: false,
tooltips: false,
animation: false,
title: {
display: true,
fontSize: '26',
text: 'AT1G24460'
},
scales: {
xAxes: [{
position: 'top',
offset: true,
ticks: {
major: {
enabled: true,
fontColor: 'red'
}
},
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
display: false
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<div class="text-center">
<canvas id="chart"></canvas>
</div>
The result is the following (major ticks are not displayed at all). So how to make major tick marks work in chart.js?
P.S. My final goal is to have top axis like this:
What axis styling is possible without direct canvas painting (ticks below axis baseline, first and last ticks are enlarged, two labels for first and last ticks, no labels except fof first and last tick, etc.)
Thank you in advance.
Official answer:
Major ticks are only supported on the time scale in 2.9. In 3.0 they
are also being added to the log scale. They're not in the linear scale
yet. But major ticks are most useful for deciding which ticks not to
skip in the autoSkipper. 3.0 will also add better support for tick
styling via scriptable tick options (#7337), which will allow you to
make ticks that you want bolder, bigger, different colors, etc. and
you don't need major tick support for that. I'd recommend trying 3.0
I've got a working not stacked logarithmic horizontal bar chart .I need a copy of this chart where the X and Y-axis-es are stacked(both at the same time).The problem comes when I change the axises to stacked ,than the bars goes off canvas and the values don't fit the grid.(https://i.imgur.com/LH6YTy0.png) - The picture shows the values and the grid at the bottom shows that the datas not fitting the grid values - Is that a bug or am I overlooking something?
The code is a simple a chart declaration, there are 4 datasets I'm working with right now, each looks like this:
{label: "D_number_data", data: Array(11), fill: false, backgroundColor: "#80B300", borderColor: "#80B300", …}
I think nothing is wrong with the datasets or the way I assign them to the chart,so something must be with the stacked axis-es.
I've tried resizing and changing only one Axis to be stacked,which is also working, but the reason I need both axis to be stacked is that in that way they are not overlapping each other so it's easier to look at it and read the data.
let myChart = new Chart(ctx2, {
type: 'horizontalBar',
data: {
labels: [],
datasets: [],
},
options: {
labels:'50px',
borderWidth:1,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked:true,
barPercentage: 1,
ticks:{
autoSkip: false,
pointLabelFontSize: '20px'
},
}],
yAxes: [{
stacked: true,
barPercentage: 0.4,
ticks:{
fontColor: 'rgb(0, 0, 0)'},
fontSize:500,
}],
}
}
});
The expected result would be the values fit the values in the grid and the bars stays on canvas.
Found the problem, in my project the data in the dataset object was a string array (something like["1","2","3"]). After parseInt the elements in the data array , the stacked logarythmic bar chart work fine. Funny thing that I created many chart-s with string data arrays using chart.js, and I only encountered this issue in chart-s where the type was set to logarithmic, and both axis set to stacked.
I'm trying to change the background color of labels in a Polar Chart. I want to change the background color to black.
I'm using the global variable to change the font color:
Chart.defaults.global.defaultFontColor = 'rgba(255, 255, 255, 0.7)';
This is the chart that is shown.
Chart Printscreen
new Chart(ctx, {
data: data = {
datasets: [{
data: [25, 10, 20],
backgroundColor: [
'yellow',
'blue',
'red',
],
borderColor: [
'yellow',
'blue',
'red',
],
}],
labels: [
'Yellow',
'Blue',
'Red',
]
},
type: 'polarArea',
});
Thanks for the attention!
I checked the official documentation, and they seemed to have the same issue, especially when changing the theme to 'Night' or 'Sepia' from 'White'.
However, under further inspection, I found this GitHub issue that explained it.
After type: 'polarArea', add the following code to change the background-color of the text elements:
options: {
scale: {
ticks: {
backdropColor: 'black'
}
}
}
There is also a JSFiddle I made, which is here. Also, in this GitHub issue, I found that docs for this is under Linear Radial Axis, not in Polar Area. Hope that helps!
I am using angular-chart to draw charts in my web application. I Want to make UI for the Bars in the chart as shown in image. I have tried a lot to achieve this UI but not able to make it. Also I searched other librearies for the same UI. We can draw a single bell curve on the graph but I want to make each bar look like a bell curve.
Here is the JsFiddle for angular-chart.
Here is the code I am trying to do.
https://jsfiddle.net/quekid/untd28yq/
$scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
$scope.options = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left',
ticks: {
beginAtZero:true,
suggestedMin: 0
}
},
{
id: 'y-axis-2',
type: 'linear',
display: false,
position: 'right'
}
]
}
};
Please try with
$scope.colors= [{
fill: true,
backgroundColor: "#cb2431"
}];
This will be fill the area under the graph its work for me. Just try it out
jsfiddle
I'm trying to create a scatter-plot chart in chart.js mixing a line chart and a bubble chart to graph the dispersion of some data vs the "ideal" of a predictive math model.
I'm using the scales to scatter the xAxes and make a straight line (which represents the "ideal"). The problem is in the bubble chart, the data of bubble can't be exactly over the line, is technically impossible (in theory), but they are exactly over the "ideal" line.
Here is my example code for the chart:
var chart = new Chart(ctx, {
type: 'bubble',
data: {
labels: makeLabels().labels,
datasets: [
{
type: 'line',
label: 'Data',
data: makeLabels().labels,
fill: false,
backgroundColor: "rgba(218,83,79, .7)",
borderColor: "rgba(218,83,79, .7)",
pointRadius: 0
},
{
type: 'bubble',
label: 'Data2',
data: makeBubbles(),
backgroundColor: "rgba(76,78,80, .7)",
borderColor: "transparent"
}
]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
min: 0,
max: Math.max(...makeLabels().array)
}
}]
}
}
});
And here is the complete code with the dummie data and the playground in codepen.
Anyway, this is the actual result:
And this is the expected result:
The position of the line is irrelevant (the charts in the captures aren't plotted with the same data), but what i want is to cause the bubbles to disperse.
¿Any idea how to achieve it?
The reason your points are coming out linearly is because you are setting each data point's x and y value to be the same in makeBubbles(). This results in points that are positioned linearly.
To get the points to scatter just use point that don't fall into a linear pattern. To demonstrate what I mean, I have modified your makeBubbles() function so that your x and y values aren't equal. Now you get a very broad scatter.
arr = arr.map(function(item, i) {
return {x: item, y:arr[i - 1]}
});
Here is an example.