I am using react to render 2 charts, a line chart and bar chart stack vertically. When I scroll to look at barChart below, after each update, chartjs, forces my scroll to (0,0). I have seen some implementation that does not move the scroll's position after each update.
Please help
<canvas id="lineChart" onLoad={ load() }>
Your browser does not support canvas, please upgrade to latest browser
</canvas>
<canvas id="barChart" onLoad={ load() }>
Your browser does not support canvas, please upgrade to latest browser
</canvas>
//to load chart.js
var myChart = new Chart($("#barChart")[0], {
type: 'bar',
data: {
labels: props.labels,
datasets: [{
label: props.label,
data: props.data,
backgroundColor: props.labels.map(l => props.color) ,
borderColor: props.labels.map(l => props.borderColor) ,
borderWidth: 0.01
}]
},
options: {
scales: {
yAxes: [{
ticks: {beginAtZero: true}
}]
}
}
});
I had a similar issue when destroying a chart and recreating it. My workaround was to get the scroll position before destruction and reapply it after creation. For example in jQuery:
var pos = $(document).scrollTop();
if (chart != undefined)
chart.destroy();
chart = new Chart(ctx, chartOptions);
$(document).scrollTop(pos);
Related
I have several charts on a production tracking page, I'd like to avoid this effect that makes tracking inconsistent at first glance. Is there any option in chart.js for that ? If not, what is the best way to resolve this problem ?
I tried the option "bar percentage : 0.2", but the problem is it resolves only the width, not the height, and it causes another problem where there are several datas (it's ugly) :
To achieve this you will need to know the max value of your first chart. If you know this you can set the the suggestedMax value in the ticks options for the yAxes to that value.
var options = {
type: 'bar',
data: {
labels: ["Red"],
datasets: [{
label: '# of Votes',
data: [2],
borderWidth: 1,
}]
},
options: {
scales: {
yAxes: [{
ticks: {
suggestedMax: 25
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>
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
I am using below code to populate slice values in a pie chart using JS and it's correctly working but
I am observing another problem as these values are getting populated only once and when I reload the charts it's getting disappeared. Now let's say if I close the browser and open again or change the browser it will show values again. But after doing multiple force refresh Ctrl+F5 then also it's not showing the values. Could you please help?
Please note I am having more than 3 pie charts on the same page with a different id.
var canvas = document.getElementById('myChart');
new Chart(canvas, {
type: 'pie',
data: {
labels: ['January', 'February', 'March'],
datasets: [{
data: [50445, 33655, 15900],
backgroundColor: ['#FF6384', '#36A2EB','#FFCE56']
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
labels: {
render: 'percentage',
fontColor: ['green', 'white', 'red'],
precision: 2
}
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart"></canvas>
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 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.