Related
I am using react-chart-2 Line to show graph;
What i want is to have 2 line in the same graph but instead of multiple value in y axis i want the same y axis but different label; example i have these label
const colors = ['red', 'yellow', 'blue', 'green', 'pink'];
const sharpe = ['circle', 'square']
and i have these value:
const colorsData = [10, 5, 8, 9, 7]
const sharpeData = [17, 2]
in my options scale i have
scales: {
x: {
grid: {
drawOnChartArea: false,
},
position: 'bottom' as const;
labels: colors
},
x1: {
grid: {
drawOnChartArea: true,
},
position: 'top' as const,
labels: sharpe,
},
y: {
beginAtZero: true,
ticks: {
maxTicksLimit: 5,
stepSize: 5,
},
},
},
and in my data i have
{
labels: colors,
datasets: [
{
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgba(13, 202, 240, 1)',
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
data: colorsData,
xAxisId: 'x'
},
{
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgba(202, 13, 240, 1)',
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
data: sharpeData,
xAxisId: 'x1',
}
]
}
the expected result is that i have 2 x axis , in the bottom is the colors and in the top the sharpe; one y axis; and the two line will be drawed but the colors depends on colorsData value and the sharpe depends on sharpeData value.
But instead the colors line is drawed as expected but the sharpe line follow the colors label instead of sharpe label
What you are trying to achieve is not possible. The values of the top and bottom axis should be the same. Unless you stack two charts on top of one another with css.
You can only have the same labels for both axis x and x1 or y and y1 respectively.
This is the official docs on Charts.js for y axis.
https://www.chartjs.org/docs/latest/samples/line/multi-axis.html
Here is some code to give you an idea of what I have come to with top and bottom x axis:
Options:
const config = {
type: 'line',
data: data,
options: {
responsive: true,
interaction:{
mode: "index",
intersect: false,
},
stacked: false,
scales: {
x:{
type: "linear",
display: true,
position: "bottom",
},
x1:{
type: "linear",
display: true,
position: "top",
grid: {
drawOnChartArea: false,
},
},
},
},
};
Data:
const colors = ['red', 'yellow', 'blue', 'green', 'pink'];
const sharpeData = [17, 2, 9, 12 ,3];
const colorsData = [10, 5, 8, 9, 7];
const data = {
labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
datasets: [
{
label: "Colors",
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgba(13, 202, 240, 1)',
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
data: colorsData,
xAxisId: 'x',
},
{
label: "Shape",
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgba(202, 13, 240, 1)',
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
data: sharpeData,
xAxisId: 'x1',
}
]
};
Hope this helps!
Expected:
enter image description here
Current:
enter image description here
I want to have stepsizes and gridlines in the same line and some padding
How can i achieve that with chart.js v3
scales: {
y: {
stacked: true,
grid: {
offset: true,
display: true,
drawBorder: false,
drawOnChartArea: true,
borderDashOffset: 25,
borderColor: "#d1d2db",
borderWidth: 0.8800000000000001,
color: "#d1d2db",
},
min: 0,
max: max,
ticks: {
// forces step size to be 25 units
stepSize: 25,
beginAtZero: true,
callback: callback,
max: max,
},
title: {
display: false,
text: "Y axis title",
},
},
x: {
grid: {
offset: true,
display: true,
drawBorder: false,
drawOnChartArea: false,
drawTicks: false,
tickLength: 0,
// borderDash: [0, 1],
// borderDashOffset: 0,
borderColor: "#d1d2db",
// borderWidth: 0.8800000000000001,
color: "#d1d2db",
},
},
},
Btw, is it also possible to have perpendiculars from data points to x-axis as shown in expected design ?
To have the horizontal grid lines aligned with the y labels, define options.scales.y.grid.offset: false or omit the option.
For the vertical lines from the bottom of the chart up to individual data points, you can use the Plugin Core API. In the afterDraw hook for example, you can draw the lines directly on the canvas using the CanvasRenderingContext2D.
Please take a look at your amended and runnable code and see how it works.
new Chart('chart', {
type: 'line',
plugins: [{
afterDraw: chart => {
var ctx = chart.ctx;
ctx.save();
var xAxis = chart.scales.x;
var yAxis = chart.scales.y;
const data = chart.data.datasets[0].data;
xAxis.ticks.forEach((v, i) => {
var x = xAxis.getPixelForTick(i);
var yTop = yAxis.getPixelForValue(data[i]);
ctx.strokeStyle = '#aaaaaa';
ctx.beginPath();
ctx.moveTo(x, yAxis.bottom);
ctx.lineTo(x, yTop);
ctx.stroke();
});
ctx.restore();
}
}],
data: {
labels: [1, 2, 3, 4, 5, 6, 7],
datasets: [{
label: 'My Data',
data: [65, 59, 80, 81, 56, 55, 68],
borderColor: '#0a0'
}]
},
options: {
scales: {
y: {
stacked: true,
grid: {
display: true,
drawBorder: false,
drawOnChartArea: true,
borderDashOffset: 25,
borderColor: "#d1d2db",
borderWidth: 0.8800000000000001,
color: "#d1d2db",
},
min: 0,
ticks: {
stepSize: 25,
beginAtZero: true,
},
title: {
display: false,
text: "Y axis title",
},
},
x: {
grid: {
offset: true,
display: true,
drawBorder: false,
drawOnChartArea: false,
drawTicks: false,
tickLength: 0,
borderColor: "#d1d2db",
color: "#d1d2db",
},
},
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="chart" width="400" height="95"></canvas>
I have been trying to create overlays with Plotly.js, e.g. Week over Week, Month over Month etc., and I am required to render a similar looking chart as below. I believe the candleStick chart can get me somewhat near to it, but just wanted to explore if anyone has got a better idea.
Year Over Year, chart sample
The candleStick plots are a good option indeed, but they are somewhat limited in Plotly (see below). Another one is to use fill between two curves, something that'd look like this:
Here is the code to produce this:
<html>
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div class="item-graph" id="plotly_graph">
</div>
</body>
<script>
// Some random data
const date = ["2022/01/01", "2022/01/07", "2022/01/13", "2022/01/18", "2022/01/25", "2022/02/01", "2022/02/07", "2022/02/13", "2022/02/18", "2022/02/25"]
const new_date = date.map(function (d) { return new Date(d) })
const bluecurve = [450, 550, 460, 450, 530, 440, 340, 345, 290, 270]
const graycurve = [390, 410, 320, 490, 470, 380, 480, 410, 190, 310]
const min = [350, 430, 420, 410, 480, 350, 320, 310, 230, 190]
const max = [500, 600, 520, 490, 540, 500, 450, 390, 350, 360]
// Setting range of Forecast for hoverinfo
var hovertemplate = []
for (let i = 0; i < min.length; i++) {
hovertemplate.push(min[i] + ' - ' + max[i])
}
// Setting up the traces:
traces = [
{
x: new_date,
y: max,
// name: 'Forecast',
yaxis: 'y',
showlegend: false,
line: { width: 1, shape: 'hvh', color: "lightblue" },
hoverinfo: 'skip',
mode: 'lines',
},
{
x: new_date,
y: min,
name: 'Forecast',
yaxis: 'y',
showlegend: false,
line: { width: 1, shape: 'hvh', color: "lightblue" },
// hoverinfo: 'skip',
hovertemplate: hovertemplate,
mode: 'lines',
fillcolor: "lightblue",
fill: 'tonexty',
},
{
x: new_date,
y: bluecurve,
name: "This Year",
yaxis: 'y',
type: 'scatter',
showlegend: false,
mode: 'markers',
marker: {
size: 20,
color: "blue",
line: {
width: 2,
color: 'DarkSlateGrey'
},
},
},
{
x: new_date,
y: graycurve,
name: "Last Year",
yaxis: 'y',
type: 'scatter',
showlegend: false,
mode: 'markers',
marker: {
size: 20,
color: "lightgray",
line: {
width: 2,
color: 'DarkSlateGrey'
},
},
},
]
// Setting up layout
const layout = {
yaxis: {
rangemode: 'nonnegative',
range: [0, 700]
},
hovermode: "x unified",
};
// Creating the plots
Plotly.react("plotly_graph", traces, layout);
</script>
</html>
If you want to use candlesticks, you can change the layout and the first two elements on the traces to, respectively:
const layout= {
xaxis: {
type: 'date',
rangeslider: {
visible: false,
},
},
yaxis: {
rangemode: 'nonnegative',
range: [0,700]
},
hovermode: "x unified",
};
and
{
x: new_date,
low: min,
open: min,
high: max,
close: max,
decreasing: {line: {color: "lightblue" }},
increasing: {line: {color: "lightblue" }},
yaxis: 'y',
type: 'candlestick',
showlegend: false,
// text: hovertemplate,
hoverinfo: 'skip',
},
The hoverinfo of the candlesticks seem to always include high, low, open and close (I couldn't find a way to edit it, as text just adds to those, so I deactivated it). Here is how it looks like:
There's also no control over the width, apart from the number of sticks in the figure.
I have a set of data which will be displayed in a line chart. The X axis will have "days", Y axis will have values from 0 - 200.
I want the background of the chart to be "yellow" for values under 80, and "green" for values between 80-120, "red" for values higher than 120.
I've being reading the documentation but I couldn't find something similar, i've included a picture of how it should be.
Many thanks.
You can use chartjs-plugin-annotation and draw individual colored boxes as shown in the runnable code snippet below.
new Chart('chart', {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
datasets: [{
label: 'My Dataset',
data: [60, 90, 130, 110, 100, 90, 80, 70, 80, 100],
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgb(0, 0, 0)',
borderWidth: 1,
fill: false
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
stepSize: 20
},
gridLines: {
display: false
}
}],
xAxes: [{
gridLines: {
display: false
},
}]
},
annotation: {
annotations: [{
type: 'box',
yScaleID: 'y-axis-0',
yMin: 120,
yMax: 220,
borderColor: 'rgba(255, 51, 51, 0.25)',
borderWidth: 0,
backgroundColor: 'rgba(255, 51, 51, 0.25)',
},
{
type: 'box',
yScaleID: 'y-axis-0',
yMin: 80,
yMax: 120,
borderColor: 'rgba(0, 204, 0, 0.25)',
borderWidth: 0,
backgroundColor: 'rgba(0, 204, 0, 0.25)',
},
{
type: 'box',
yScaleID: 'y-axis-0',
yMin: 0,
yMax: 80,
borderColor: 'rgba(255, 255, 0, 0.25)',
borderWidth: 0,
backgroundColor: 'rgba(255, 255, 0, 0.25)',
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="chart" height="80"></canvas>
I'm creating a line chart using Chart.js. The chart has two datasets. The x-axis is date, and y-axis is the value. When I hover the first data in dataset 1, the first data in dataset 2 is also active(zoom). That isn't I expected. Is there any way to active only the hovered data. And is there any way to active all data by their y value, not by index.
I've tried edit the tooltips mode but the result is not I expected. It shows the tooltips in difference dataset with same index.
https://www.chartjs.org/docs/latest/general/interactions/modes.html
var ctx = document.getElementById("myChart");
var barChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Dataset 1',
data: [{
x: '2019-01-15',
y: 100
}, {
x: '2019-02-03',
y: 300
}],
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(255, 0, 0, 1)',
borderWidth: 1
}, {
label: 'Dataset 2',
data: [{
x: '2019-01-03',
y: 150
}, {
x: '2019-01-15',
y: 200
}, {
x: '2019-02-06',
y: 250
}],
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 255, 255, 1)',
borderWidth: 1
}],
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}],
xAxes: [{
type: 'time',
position: 'bottom',
time: {
min: "2019-1-1",
max: "2019-2-28",
unit: "month",
displayFormats: {
"month": "YYYY-MM",
}
}
}]
}
}
});
https://jsfiddle.net/t1gmrujo/2/
I've tried edit the tooltips mode but the result is not I expected. It shows the tooltips in difference dataset with same index.
The tooltip configuration controls display of the tooltip popup, not the dataset points. Points are controlled by the hover configuration. This is mentioned on the page you linked (emphasis mine):
When configuring interaction with the graph via hover or tooltips, a number of different modes are available.
If you only want the single point you are hovering over to be highlighted, use:
options: {
hover: {
mode: 'point'
}
}
If you want the whole dataset highlighted when hovering any single dataset point, use:
options: {
hover: {
mode: 'dataset'
}
}
If you want to highlight the dataset and see all dataset values in the tooltip, use:
options: {
hover: {
mode: 'dataset'
},
tooltips: {
mode: 'dataset'
}
}