My scatter chart keep pushing double values, I am using onchange="" and doing per user input to update the x-value in my HTML.
Here is the screenshots. User input x-values here is my chart problem, the 2nd and 3rd data keeps plotting on my first onchange value. Scatter chart photo.
Here is my function.
function interactiveChart() {
let test1 = document.getElementById('bzvaqxnufhyd1').value;
let test2 = document.getElementById('bzvaqxnufhyd2').value;
let test3 = document.getElementById('bzvaqxnufhyd3').value;
nineChart2.data.datasets[0].data.push({x: test1,y: 0});
nineChart2.data.datasets[0].data.push({x: test2,y: 1385.27});
nineChart2.data.datasets[0].data.push({x: test3,y: 1959.07});
console.log(nineChart2data1)
nineChart2.update();
nineChart2.render();
}
It push my y value after I inputted x-value #1 that is my problem.
This is my chart setup
var nineChart2data1 = [];
data: {
datasets: [{
type: 'scatter',
stacked: true,
fill: false,
showLine: true,
label: ["MODEL 20T"],
backgroundColor: 'red',
borderColor: 'red',
data: [{
dataPoints: nineChart2data1
}]
}
Related
I am using Chart.js v3.4 with Vue3. Here is my chart:
I am wondering if there is a way to remove the tick marks that go past the axis of the chart (pointing to the axis labels) so that the shape is a solid rectangle with labels.
Note: I am already using the drawBorder: false option for the y-axis.
Secondly I want to make it so there are exactly 5 grid lines on the y-axis to keep 4 rows of boxes on the chart at all times. I'm using dynamic data and ranges so the amount of boxes changes depending on the data. (You can see a new box just barely started at the bottom of the chart, I don't want that to be showing). The way I determine the min and max of the chart is by taking the min/max of the data array and subtracting/adding 2 to them.
You can make use of the drawTicks and count propertys to achieve what your want.
Live example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3]
}]
},
options: {
scales: {
y: {
ticks: {
count: 5,
padding: 10
},
grid: {
drawTicks: false
}
},
x: {
ticks: {
padding: 10
},
grid: {
drawTicks: false
}
}
}
}
}
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/3.4.0/chart.js"></script>
</body>
I have the following chart:
let ctx = document.getElementById("chart").getContext("2d");
var datasets = [
{
data: [1.1, 0.8, 1.2, 1.1, 0.7],
type: "line",
},
];
var options = {};
var data = {labels: [1, 2, 3, 4, 5], datasets: datasets};
var config = {type: "line", data: data, options: options};
var chart = new Chart(ctx, config);
which when renders shows the x-axis starting on a y-axis value of 0.6. Is there a way to have the x-axis running through a y-axis value of 1?
Not sure whether I understand your problem well. In case you want to your y-axis value start with 1 instead of 0.6 there is way to tell Chart.js by passing some options about these values.
Modifying your options definition like this:
var options = {
scales: {
yAxes: [{
ticks: {
min: 1
}
}]
}
};
should do the tick!
Check out the related documentation where you can find some more options and examples how to use them ;)
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.
I have a couple of pie/doughnut charts displayed using ChartJS. Usually, they contain data like [200, 1200, 300] and [30, 500] to give an estimate, but at rare occasions, they will contain [0, 0, 0] and [0, 0]. The problem then, is that the chart disappears, even though I have a border enabled. I have solved this by adding dummy values to the first element in the arrays, but I don't like how the code looks and want a better way.
Is it possible to make the border visible (a circle) when the array contains only zeroes?
Edit:
I don't seem to get any answers to this question. Is it considered a bug when the border is not showing on empty data or is this intended behavior? I don't know if anyone else has had this problem. I still need to find an elegant way to deal with this issue, and I haven't found one yet.
This is not a bug, as the borders are rendered per data item. If all the data is 0s, then every slice has no width, so no border can show (the only other way to handle this scenario for ChartJS would be to give each item equal sizing, which isn't better).
You can add a dummy value without a label and filter the legend and tooltips so that the data is treated like a blank space to the user. In the example below, a check before rendering the chart ensures that if all data points are 0, a data point with a value of 1 is added to the chart with no label. Two datasets are shown to highlight the difference.
let ctx = document.getElementById('chartContainer').getContext('2d');
let data = [[0, 0, 0], [1,2,3]];
let labels = ["A", "B", "C"];
let bgColors = ['yellow', 'orange', 'aquamarine'];
let options = {
borderWidth: 1,
borderColor: 'black',
legend: {
labels: {
// Prevent items with undefined labels from appearing in the legend
filter: (item) => item.text !== undefined
}
},
tooltips: {
// Prevent items with undefined labels from showing tooltips
filter: (item, chart) => chart.labels[item.index] !== undefined
}
}
let chartConfig = {
type: 'pie',
data: {
labels: labels,
datasets: [{
data: data[0],
backgroundColor: bgColors,
label: "data",
borderColor: 'black',
borderWidth: 2
}, {
data: data[1],
backgroundColor: bgColors,
label: "data",
borderColor: 'black',
borderWidth: 2
}]
},
options: options
}
// Check if data is all 0s; if it is, add dummy data to end with empty label
chartConfig.data.datasets.forEach(dataset => {
if (dataset.data.every(el => el === 0)) {
dataset.backgroundColor.push('rgba(255,255,255,0)');
dataset.data.push(1);
}
})
let pieChart = new Chart(ctx, chartConfig);
.chartContainer {
height: 200px;
width: 200px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0/dist/Chart.min.js"></script>
<div class="chartContainer">
<canvas id="chartContainer" width="200" height="200"></canvas>
</div>