I want to have a shaded diagonal area on a chart. Unfortunately, the fill attribute only fills the area that is vertically between two lines, and does not extend outwards to the edge of the chart, which results in this:
As a workaround I can use a single line with a large borderWidth, which properly fills the entire area:
However, borderWidth is specified in pixels, meaning that its width relative to the chart data will change depending on the display resolution.
How can I create a shaded area that covers the whole diagonal and whose width is specified in terms of the chart axes, not pixels?
If you make sure your last points fall outside of the chartarea so the line contiues to keep going it will fill correclty:
const options = {
type: 'line',
data: {
datasets: [{
label: '# of Votes',
data: [{
x: 0,
y: 20
}, {
x: 30,
y: 0
}],
}, {
label: '# of Points',
fill: '-1',
data: [{
x: 0,
y: 15
}, {
x: 25,
y: 0
}],
}]
},
options: {
scales: {
x: {
type: 'linear',
min: 10,
max: 20
},
y: {
min: 0,
max: 20
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
Related
I'm building a local html file that will generate some graphs using chartjs when offline. I'm just testing some example data I have.
See fiddle below.
http://jsfiddle.net/joshmoto/0odcemL7/
The issue is, i've set 8 points of data for each dataset, but the graph is only outputting 2 points for each dataset.
I need my x axis to display a automatic time grid distributed in seconds. My time data consists millisecond data, but my x axis grid needs to show steps in seconds. But my points must remain accurately positioned on the graph within the steps as the data is milliseconds.
.
var ctx = document.getElementById('log_chart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Engine Speed',
backgroundColor: '#ff0000',
borderColor: '#ff0000',
fill: false,
data: [{
t: new Date(0.37),
y: 2640
}, {
t: new Date(0.85),
y: 2560
}, {
t: new Date(1.33),
y: 2560
}, {
t: new Date(1.78),
y: 2560
}, {
t: new Date(2.23),
y: 2680
}, {
t: new Date(2.7),
y: 2920
}, {
t: new Date(3.16),
y: 3200
}, {
t: new Date(3.63),
y: 3520
}]
}, {
label: 'Mass Air Flow - Sensor',
backgroundColor: '#00FFFF',
borderColor: '#00FFFF',
fill: false,
data: [{
t: new Date(0.02),
y: 19.58
}, {
t: new Date(0.45),
y: 16.28
}, {
t: new Date(0.92),
y: 8.56
}, {
t: new Date(1.39),
y: 8.47
}, {
t: new Date(1.86),
y: 23.36
}, {
t: new Date(2.33),
y: 45.78
}, {
t: new Date(2.78),
y: 56.03
}, {
t: new Date(3.23),
y: 62.36
}]
}],
},
options: {
scales: {
// xAxes: [{
// type: 'time',
// displayFormats: {
// quarter: 'ss.SSS'
// },
// time: {
// unit: 'second'
// }
// }]
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0/dist/Chart.min.js"></script>
<div class="container">
<div class="col-12 mt-3 mb-3">
<canvas id="log_chart" width="600" height="200"></canvas>
</div>
</div>
Basically the data works like this...
t is the x axis but in time format seconds.
y is the value ranging from 0 - 5000
I'm trying my hardest to follow the docs but struggling to work this one out, I can't see anything obvious. If anyone can help out that would be awesome.
I think you need to provide more information to Chart.js so that it knows what to do with the X-Axis. On previous projects, I've given a labels property within the data.
Example -
// document ready
(function ($) {
var ctx = document.getElementById('log_chart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
datasets: [
{
label: 'Engine Speed',
backgroundColor: '#ff0000',
borderColor: '#ff0000',
fill: false,
data: [2640,2560,2560,2560, 2680, 2920, 3200, 3520]
},
{
label: 'Mass Air Flow - Sensor',
backgroundColor: '#00FFFF',
borderColor: '#00FFFF',
fill: false,
data: [19.58, 16.28, 8.56, 8.47, 23.36, 45.78, 56.03, 62.36]
}
],
},
options: {
scales: {
yAxes: [{
stacked: false
}],
}
}
});
})(jQuery);
So the labels property can then fill your X axis, and your data sets just plot the raw data onto the graph. The problem you'll run into with this kind of dataset is that the sensors readings are significantly lower than the engine speed, so not well represented on the chart. You'll have to work out some kind of way of normalising this data so it can be properly represented, e.g. adding a multiply to the mass airflow sensor readings.
I figured out using x axis type: linear; and removed the date functionality and just used the raw millisecond data in x rather than t.
See working example below.
var ctx = document.getElementById('log_chart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Engine Speed',
backgroundColor: '#ff0000',
borderColor: '#ff0000',
fill: false,
data: [{
x: 0.37,
y: 2640
}, {
x: 0.85,
y: 2560
}, {
x: 1.33,
y: 2560
}, {
x: 1.78,
y: 2560
}, {
x: 2.23,
y: 2680
}, {
x: 2.7,
y: 2920
}, {
x: 3.16,
y: 3200
}, {
x: 3.63,
y: 3520
}]
}, {
label: 'Mass Air Flow - Sensor',
backgroundColor: '#00FFFF',
borderColor: '#00FFFF',
fill: false,
data: [{
x: 0.02,
y: 19.58
}, {
x: 0.45,
y: 16.28
}, {
x: 0.92,
y: 8.56
}, {
x: 1.39,
y: 8.47
}, {
x: 1.86,
y: 23.36
}, {
x: 2.33,
y: 45.78
}, {
x: 2.78,
y: 56.03
}, {
x: 3.23,
y: 62.36
}]
}],
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js Time Scale"
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom'
}]
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0/dist/Chart.min.js"></script>
<div class="container">
<div class="col-12 mt-3 mb-3">
<canvas id="log_chart" width="600" height="200"></canvas>
</div>
</div>
I'm trying to create a "chart" where I only want to show the x-axis. Basically I'm trying to create visualization of a range (min-max) and a point that sits in between like:
I'm unable to find any resources online on how to make this, or what this type of plot is even called. If anyone could help out, that would be awesome!
This is straightforward to achieve through styling a line chart appropriately and using linear x- & y-axes with points defined via x and y coordinates.
By keeping y at 0 you can assure the points all appear in the same horizontal position.
The example below gets the visual result you want, but you'll probably want to disable tooltips for the 'fake' x-axis line via a callback:
let range = {
min: 0,
max: 100
},
pointVal = 65;
new Chart(document.getElementById("chart"), {
type: "line",
data: {
labels: ["", "", ""],
datasets: [{
pointBackgroundColor: "green",
pointRadius: 10,
pointHoverRadius: 10,
pointStyle: "rectRot",
data: [{
x: pointVal,
y: 0
}]
}, {
// this dataset becomes the 'fake' x-axis line.
pointBackgroundColor: "black",
borderColor: "black",
data: [{
x: range.min,
y: 0
},
{
x: range.max / 2,
y: 0
},
{
x: range.max,
y: 0
}
]
}]
},
options: {
legend: {
display: false
},
hover: {
mode: "point"
},
layout: {
padding: {
left: 10,
right: 10,
top: 0,
bottom: 0
}
},
scales: {
xAxes: [{
type: "linear",
display: false
}],
yAxes: [{
display: false
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div style="width:200px">
<canvas id="chart"></canvas>
</div>
Has anyone got an example of how to zoom a Y axis on a time series graph built with chartjs? Does anyone know if it's even possible?
I've been using chartjs-plugin-zoom. I've spent hours experimenting, searching for solutions and looking at the chartjs-plugin-zoom source.
Examples I've so far found show bar charts being zoomed, not a time series or X-Y charts.
I've implemented a hacky Y-axis zoom for now by setting the min and max of the Y scale. This works to a degree, but by doing this, you lose the ability to pan and see any data outside of the chart. And anyway, having to do this seems a bodge.
Grateful for an example of a working X-Y zoomable chart.
Answered my own question eventually. Basically, the example at https://codepen.io/anon/pen/PGabEK (linked from https://npmjs.com/package/chartjs-plugin-zoom) can be re-done as a time series.
Example HTML below.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
data: [
{ t: '2018-03-29 08:48', y: 20.2 },
{ t: '2018-03-29 16:24', y: 23.1 },
{ t: '2018-04-09 18:24', y: 20.7 },
{ t: '2018-04-10 02:10', y: 24.2 },
{ t: '2018-04-10 09:16', y: 24.2 }
],
type: 'line',
radius: 1,
hitRadius: 3,
fill: false,
backgroundColor: 'black',
borderWidth: 2,
label: 'Some label'
},
{
data: [
{ t: '2018-03-29 08:48', y: 22.5 },
{ t: '2018-03-29 16:24', y: 22.3 },
{ t: '2018-03-30 00:00', y: 21.5 },
{ t: '2018-03-30 07:36', y: 21.5 },
{ t: '2018-03-30 15:12', y: 21.5 }
],
type: 'line',
radius: 1,
hitRadius: 3,
fill: false,
backgroundColor: 'black',
borderWidth: 2,
label: 'Another label'
}
]
},
options: {
pan: {
enabled: true,
mode: 'xy'
},
zoom: {
enabled: true,
mode: 'xy'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.6.6/chartjs-plugin-zoom.min.js"></script>
<div id="chartDiv">
<canvas class="my-4 chartjs-render-monitor" id="myChart" style="display:block;"></canvas>
</div>
I'm using ChartJS to create a line chart with elements. I'm wondering if it possible to set borders on left and right of a element? This is my chart and it gets confusing if you have two elements next to each other and they have the same color.
I've found nothing in the docs that supports it, so I figure that I have to draw it myself using js but I was hoping someone had an solution first :)
In case I have to draw it myself I would run into a problem since every element can have different widths due to the time axis (X). What would be your idea to solve that?
Update
Every element in the chart is a new dataset and gets a gradient object as backgroundColor and fill sets as true. Here is an example of me pushing a new dataset into the chart
chart.data.datasets.push({
fill: true,
backgroundColor: gradient,
data: [
{
x: aIstartX,
y: yAxis_value,
.. Other attributes
},
{
x: newEntryXend,
y: yAxis_value,
..Other attributes
}]
});
xAxes: [
{
stacked: false,
type: 'time',
unit: 'minute',
position: 'bottom',
scaleLabel: {
display: true
},
time: {
displayFormats: {
'minute': 'mm:ss'
}
},
ticks: {
autoSkip: true,
beginAtZero: true,
stepSize: 2,
autoSkipPadding: 5,
padding: 10,
labelOffset: 5,
},
gridLines: {
display: false,
tickMarkLength: 20
},
}
]
Here is a fiddle of my issue
https://jsfiddle.net/fa8hvhtv/1/
Any reason why you can wanted to keep the same background colors for ,
Why cant you try as below
Demo
fill: true,
backgroundColor: 'red',
I've found a solution to my problem. The issue was that I was trying to create some space between my datasets and my datas attribute Y doesnt start and end at 0. Therefor I added two extra datapoints in each dataset with a borderWidth of 3 and borderColor that matches the backgroundColor of the chart. Each extra added datapoint will have a Y with the value of 0. An example of adding a dataset to my chart is below.
chart.data.datasets.push({
fill: true,
backgroundColor: gradient,
borderWidth: 3,
borderColor: '#333',
data: [
{
x: startXvalue,
y: 0
},
{
x: startXvalue,
y: startY,
.. Other attributes
},
{
x: newEntryXend,
y: endY,
.. Other attributes
},
{
x: newEntryXend,
y : 0
}]
});
I am creating line charts with 2 y-axes. one of those axes has two datasets but both run from the range of 0-100. The higher number being the better one. The second y-axis is usually lower in range (often in the single digits) and the best result is 1.
How can I invert the second y-axis so that 1 is at the top of the chart?
(I will try to find a solution myself, but at 5k+ lines in chart.js, it might take a while )
Thanks ^_^
Dev 2.0 of chart js supports an option to reverse the ticks when setting up the axis so your declaration of the second axis would become
{
type: "invertedLinear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "right",
id: "y-axis-2",
ticks: {
reverse: true
},
// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
}
}
Here it is in action https://jsfiddle.net/nwc8ys34/15/
Using v 2.7.0, and the following seems to work:
options: {
scales: {
yAxes: [{
ticks: {
reverse: true,
}
}]
}
}
In v3 the scale configs have been changed so the desired behaviour can be accomplished like so:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [40, 80, 100, 70, 60, 80],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange',
yAxisID: 'y2'
}
]
},
options: {
scales: {
y: {},
y2: {
position: 'right',
reverse: true
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>
Chart.js 4:
datasets: [{
label: "Strength",
yAxisID: "y1",
data: mappedData.sigStrength
}, {
label: "Bars",
yAxisID: "y2",
data: mappedData.sigBars
}]
scales: {
y1: {
type: "linear",
display: true,
position: "left",
reverse: true
},
y2: {
type: "linear",
display: true,
position: "right",
ticks: {
stepSize: 1
}
}
},