By default, chart.js seems to space out its x labels equally instead of plotting the (x,y) pairs in space.
var options = {
type: 'line',
data: {
labels: [0, 1, 10],
datasets: [{
data: [1, 2, 1]
}]
},
}
This puts the "1" label halfway between the 0 and the 10 on the x-axis (here's a fiddle). How can I make it locate 1/10 of the way to 10?
As per Chart.js xAxis linear scale : strange behavior you need a linear x-axis with data supplied as x,y pairs.
So, it needs to be:
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var scatterChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Linear Dataset',
data: [{ x: 0, y: 1}
,{x: 1, y: 2 }
,{ x: 10, y: 1} ]
}]
},
options: {
scales: {
xAxes: [{
type: 'linear'
,position: 'bottom'
}]
}
}
});
Related
As showed in the picture the points are cut in half when reaching bottom or top edges (when the data is 1 or 5 in this example).
I tried padding, adding some 'fake' data to extend the limits of 1 and 5 and removing it with callback function on ticks. None worked as expected
This is my config for this chart.
const config = {
type: 'line' as ChartType,
data: data,
options: {
pointStyle: 'circle',
//pointBackgroundColor: 'white',
scales: {
y: {
ticks: {
maxTicksLimit: 5,
stepSize: 1,
},
min: 1,
max: 5,
reverse: true,
},
},
},
};
Removing min and max, results in the expected output.
But I need min and max, cause I want fixed Y axes values
Any clues how to fix this?
You can use the afterDataLimits hook to set the max and min of the scale, that way it still overflows the chart area:
const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
type: "line",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
data: [12, 19, 3, 10, 2, 3],
borderColor: 'pink',
backgroundColor: 'pink',
radius: 10
}]
},
options: {
scales: {
y: {
afterDataLimits: (scale) => {
scale.max = 10;
scale.min = 0;
}
},
},
},
});
<canvas id="chart" width="250" height="120" />
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.6.0/dist/chart.min.js"></script>
I want to plot my temperature readings of my DIY thermostat and the heater-state using Chart.js. The heater-state is 0 or 1, but I saved it in a minimal representation: I have values only, when it comes on/off. The heating times are never equal to the measurement times, but in between.
I want to plot time-data on the same time x-axis. From at least 20 examples, questions here and other resources I collected this Fiddle, which is my best guess. However, I can't reasonably plot both time axes and their data. If I reduce it to numerical data on the x axis in a very much simplified example, I get the smaller dataset plotted on the first few x-values of the latter one.
The js code is:
var options = {
type: 'line',
data: {
labels: ["2018-12-07 08:45:17",
"2018-12-07 09:30:17", "2018-12-07 10:15:16",
"2018-12-07 11:00:17", "2018-12-07 14:45:16"],
datasets: [
{
label: '1st line',
data: [12, 19, 7, 9, 10, 8],
},
{
steppedLine: 'before',
xAxisID: 'x-axis-2',
label: '2nd line',
data: [
{
x: "2018-12-07 09:15:47",
y: 3
}, {
x: "2018-12-07 10:55:25",
y: 5
}, {
x: "2018-12-07 13:05:00",
y: 3
}],
}
]
},
options: {
scales: {
xAxes: [{}, {
id: 'x-axis-2',
type: 'linear',
position: 'bottom',
//display: false,
}],
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
First, you could use a unique xAxis and define it as a time cartesian axis.
xAxes: [{
type: 'time',
time: {
unit: 'second'
}
}]
Also you shouldn't provide data.labels but rather define each data point using an object containing x and y properties.
var options = {
type: 'line',
data: {
datasets: [{
label: '1st line',
data: [{
x: "2018-12-07 08:45:17",
y: 12
},
{
x: "2018-12-07 09:30:17",
y: 19
},
{
x: "2018-12-07 10:15:16",
y: 7
},
{
x: "2018-12-07 11:00:17",
y: 9
},
{
x: "2018-12-07 14:45:16",
y: 10
}
]
},
{
label: '2nd line',
steppedLine: 'before',
data: [{
x: "2018-12-07 09:15:47",
y: 3
},
{
x: "2018-12-07 10:55:25",
y: 5
},
{
x: "2018-12-07 13:05:00",
y: 3
}
],
backgroundColor: 'lightgreen'
}
]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'second'
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="chartJSContainer" height="90"></canvas>
I was finally able to figure out the problem which was the datastructure of the javaScript object. It requires this structure [{ "x": 1, "y":1}, {"x":2, "y":3} ] where in particular the x and y are the object properties x and y for each entry, rather than once and for all (which always made a lot more sense to me). But I can send the data without this extra labels and convert them on the fly with javascript like so:
datasets: [
{
label: 'Temperature',
data: response.temperature.x.map((x, i) => ({ x, y: response.temperature.y[i] })),
},
{
label: 'Room 2 Temperature',
data: response.temp2.x.map((x, i) => ({ x, y: response.temp2.y[i] })),
},
] // datasets
I have a chart where I already know the set amount of ticks I'll need. There's 3 with a grouped bar type chart. I'm scratching my head over how to force it. Right now it's showing 0 to whatever number ends up in my data set and auto scales as required.
By default it's assumed I'm using numbers to scale but in this scenario it's a Positive, neutral, negative (those labels literally) on Y-Axis that are the data points related to a specific date on X axis (with 2 grouped bars labeled AM/PM).
The Chart.js documentation doesn't seem to explain how to tweak when working outside of numbers on the ticks configurations and I'm not sure how to shoehorn this in. Any ideas? Below is the code for as far as I've gotten.
The screenshot example I basically simulated the 3 data points by choosing 4,8 and 12. I would like those labels to be (negative,positive,neutral) and make all other ticks disappear.
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Date/MoonCenter', 'Date/MoonCenter', 'Date/MoonCenter'],
datasets: [{
label: 'Dataset 1', backgroundColor: window.chartColors.red,
stack: 'Stack 0',
data: [4, 12, 4, 8, 12, 4]
},{
label: 'Dataset 1', backgroundColor: window.chartColors.blue,
stack: 'Stack 1',
data: [8, 8, 12, 4, 4, 12]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
you just need add the callback in the ticks,
<canvas id="myChart" width="400" height="400"></canvas>
<script src='Chart.js'></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Date/MoonCenter', 'Date/MoonCenter', 'Date/MoonCenter'],
datasets: [{
label: 'Dataset 1', backgroundColor: window.chartColors.red,
stack: 'Stack 0',
data: [4, 12, 4, 8, 12, 4]
}, {
label: 'Dataset 1', backgroundColor: window.chartColors.blue,
stack: 'Stack 1',
data: [8, 8, 12, 4, 4, 12]
}]
},
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
callback: function (label, index, labels) {
switch (label) {
case 4:
return 'negative';
case 8:
return 'positive';
case 12:
return 'neutral';
}
}
}
}
]
}
}
});
</script>
Additional to saul's answer:
Just add max-settings to the y-axis.
ticks: {
max: 12
}
You also have to do callbacks for the tooltip if you want to display "positive", "negative" and "neutral" instead of 4, 8 and 12.
I am using chartjs to make charts in my application.
The data is given as a scatter line chart:
var scatterChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}]
}]
} });
I am trying to get two line charts on top of each other but i am not able to do so. I want it like the image below -
How do i do this?
PS: In my scattered chart the y axis is time.
Taking from inspiration from this question, I am trying to figure out how to swap the axes of a Line chart in Chart.js.
For instance, in Highcharts we have this example, although it's an area chart.
Is it possible to "swap" the X and Y axis on a line chart?
datasets: [
{
label: "data1a",
data: [1,2,3,4,5,1,2,3]
}
]
yAxes: [
{
type: "linear",
display: true,
position: "left",
}
]
Here's my fiddle modified from the above link. I'm basically trying to move it so the graph looks rotated 90 degrees. I tried changing the y position to 'top' but it still doesn't look correct.
The proposal by #dralth works fine with version 2.8.0, but for some reason showLines: true does not work anymore since version 2.9.0.
It is still possible showing the lines by using the showLine property for each dataset.
In case of #dralth's example it works as follows (tested with version 2.9.3):
new Chart(document.getElementById('myChart'), {
type: 'scatter',
data: {
datasets: [
{
label: 'My Dataset',
data: [{x: 3, y: 2}, {x: 5, y: 7}, {x: 9, y: 10}],
showLine: true
},
],
},
options: {
scales: {
xAxes: [
{
type: 'linear',
position: 'bottom',
},
],
yAxes: [
{
type: 'linear',
},
],
}
}
})
I was able to accomplish this in Chart.js 2.8.0:
Change data to a list of objects with x and y. Since the intention is to swap x and y axis, put the "x data" in the y variable and vise verse.
eg. [{x: 3, y: 2}, {x: 5, y: 7}, {x: 9, y: 10}]
Set the chart type to 'scatter'
Add showLines: true to the options
The outcome is a line chart where the line can be horizontal, vertical, or even double back on itself. The orientation of the line is defined by which values you put in x and which you put in y.
Here's an example configuration:
new Chart(document.getElementById('myChart'), {
type: 'scatter',
data: {
datasets: [
{
label: 'My Dataset',
data: [{x: 3, y: 2}, {x: 5, y: 7}, {x: 9, y: 10}],
},
],
},
options: {
showLines: true,
scales: {
xAxes: [
{
type: 'linear',
position: 'bottom',
},
],
yAxes: [
{
type: 'linear',
},
],
}
}
})
If you're using an older version of Chart.js that doesn't have scatter plots, you can use this plugin: http://dima117.github.io/Chart.Scatter/