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 try to show inactive setting in my chart. But it's not showing in my project { it's worked on another live editor }
Chart Library: Highcharts
Chart type: scatter
Chart Version:
"highcharts": "^6.1.1",
"highcharts-more": "^0.1.7","highcharts-react-official": "^3.1.0",
``const config = {
chart: {
zoomType: 'x',
type: 'scatter',
height: 400,
spacingLeft: 0,
spacingRight: 0,
spacingTop: 0,
spacingBottom: 0,
margin: [30, 50, 80, 180],
width: null,
style: {
fontFamily: 'Fira Sans'
},
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: {
type: 'datetime',
ordinal: false,
startOnTick: false,
endOnTick: false,
minPadding: 0,
maxPadding: 0,
Date: false,
tickInterval: 3600 * 4000,
minTickInterval: 3600 * 100,
minRange: 1000 * 60 * 60,
dateTimeLabelFormats: {
minute: '%I:%M',
hour: '%I %P',
},
offset: 0,
},
yAxis: [
{
title: {
text: 'Part A',
align: "high",
textAlign: "right",
rotation: 0,
offset: 0,
margin: 0,
y: -10,
x: -15,
style: {
fontWeight: 500,
fontSize: '14px',
lineHeight: 20,
color: "#333333",
},
},
labels: {
style: {
fontWeight: 300,
fontSize: '14px',
lineHeight: 16,
color: "#333333",
letterSpacing: 0,
},
y: 3,
align:'right',
},
categories: ['', 'B1', 'B2', '', 'A1', 'A2', 'A3', ''],
},
{
title: {
text: 'Part B',
align: "middle",
textAlign: "right",
rotation: 0,
offset: 0,
margin: 0,
y: 30,
x: 25,
style: {
fontWeight: 500,
fontSize: '14px',
lineHeight: 20,
color: "#333333",
},
},
},
],
plotOptions: {
column: {
stacking: 'normal',
column: {
pointPadding: 0,
borderWidth: 0,
groupPadding: 0,
grouping: true,
}
},
},
series: [
{
"name": "Poor",
"data": [[1.424304e+12, 1], [1.4243076e+12, 2], [1.4243148e+12, 1], [1.4243301e+12, 1], [1.4243364e+12, 6]],
color: '#FF8A45',
marker: {
symbol: 'square'
},
},
{
"name": "Fair",
"data": [[1.424304e+12, 6], [1.4243112e+12, 1], [1.4243292e+12, 2], [1.4243436e+12, 2], [1.4243616e+12, 2]],
color: '#FFC100',
marker: {
symbol: 'square'
},
},
{
"name": "Moderate",
"data": [[1.4243616e+12, 4], [1.4243436e+12, 4], [1.4243112e+12, 4], [1.424304e+12, 4], [1.4243292e+12, 6]],
color: '#B7DCFD',
marker: {
symbol: 'square'
},
},
{
"name": "Good",
"data": [[1.424304e+12, 5], [1.4243112e+12, 5], [1.4243292e+12, 5], [1.4243436e+12, 5], [1.4243616e+12, 6]],
color: '#00C96A',
marker: {
symbol: 'square'
},
},
],
credits: {
enabled: false
},
};``
Here is my full config of hoghchart
You are using the 6.1.1 version but inactive option is available from 7.1.0 https://www.highcharts.com/blog/changelog/#highcharts-v7.1.0 .
I would recommend to always using the latest highcharts version.
So, all you have to do is set "highcharts": "latest" in your project.
If for some reason you need to use an older version, use mouseOver and mouseOut events to change the series color on hover.
plotOptions: {
series: {
events: {
mouseOver: function() {
let hoveredSeries = this;
let allSeries = this.chart.series;
allSeries.forEach(series => {
if (series === hoveredSeries) {
return true
} else if (series.name === 'A') {
series.update({
color: 'rgba(0, 155, 0, 0.5)',
})
} else if (series.name === 'B') {
series.update({
color: 'rgba(255, 0, 0, 0.5)'
})
}
})
},
mouseOut: function() {
let hoveredSeries = this;
let allSeries = this.chart.series;
allSeries.forEach(series => {
if (series === hoveredSeries) {
return true
} else if (series.name === 'A') {
series.update({
color: 'rgba(0, 155, 0, 1)',
})
} else if (series.name === 'B') {
series.update({
color: 'rgba(255, 0, 0, 1)'
})
}
})
}
}
}
},
Example demo:
https://jsfiddle.net/BlackLabel/zgjsof7L/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver
I am working with angularjs highcharts-ng
https://github.com/pablojim/highcharts-ng
I need to add a custom button to the speedometer.
I've found this:
Add buttons in chart of Highcharts at runtime
exporting: {
buttons: {
customButton: {
text: 'Custom Button',
onclick: function () {
alert('You pressed the button!');
}
}
}
}
But it is not working to me:
$scope.highchartsNG = {
options: {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
}
},
exporting: {
buttons: {
customButton: {
text: 'Custom Button',
onclick: function () {
alert('You pressed the button!');
}
}
}
},
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
buttons: {
customButton: {
text: 'Custom Button'
}
}
,
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}],
};
http://jsfiddle.net/76dLm8h7/3/
I've tried to add the "exporting" option in different possitions inside the array, but It does'nt work.
Any help will be appreciate.
Thanks in advance.