I am using Chart.js library in my React application.
I want to implement Bollinger Bands looking like this:
Is it possible and if so how? I have searched through issues of the repository and have not found the answer I am looking for.
If it is not possible what other library could you recommend? I have looked into:
Highcharts
React-charts
react-chartjs-2
React-financial-charts
react-stockcharts
Recharts
Could you direct me to the sources I need to read.
Thanks in advance.
This is not possible in chart.js by default, you can achieve this in 2 ways, you can write a custom inline plugin to draw it on the canvas or you can use 2 extra datasets and filter out the legend
Extra datasets example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
backgroundColor: 'black',
borderColor: 'black'
},
{
label: 'boll 1',
data: [6.6, 9, 4, 7, 0, 2],
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 0,
tension: 0.4,
pointHitRadius: 0
},
{
label: 'boll 2',
data: [7.3, 11.5, 5.9, 9.6, 5, 11],
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 0,
fill: '-1',
tension: 0.4,
pointHitRadius: 0
}
]
},
options: {
plugins: {
legend: {
labels: {
filter: (label, data) => (!label.text.includes("boll"))
}
}
}
}
}
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.2.0/chart.js"></script>
</body>
Related
I am trying to set min/max starting values to scale and circular grid to a radar in chartjs, but none seens to work.
const chart1 = new Chart($('#chart-area1'), {
type: 'radar',
data: {
labels: ['test1', 'test2', 'test3'],
datasets: [{
label: '1',
data: [20, 25, 55],
borderColor: setup_borderColor[0],
backgroundColor: setup_backgroundColor[0],
borderWidth: 1
},{
label: '2',
data: [25, 35, 40],
borderColor: setup_borderColor[1],
backgroundColor: setup_backgroundColor[1],
borderWidth: 1
}]
},
options: {
scale: {
min: 0,
max: 100,
},
scales: {
r: {
grid: {
circular: true
}
}
}
}
});
The radar chartjs should start at 0 with a max value at 100 and be a circular grid, but both options dont work, my result:
Result:
Chartjs version: Chart.js v2.9.3
You are mixing V2 and V3 syntax in all the wrong ways, in V2 you need to use the scale option not scales.r and the min/max have to be configured in the ticks part not in the root and grid must be gridLines:
var options = {
type: 'radar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
scale: {
ticks: {
max: 40,
min: 0
},
gridLines: {
circular: true
}
}
}
}
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/2.9.4/Chart.js"></script>
</body>
For more info you can read the 2.9.4 documentation
I am using Chart.js to draw a simple line chart.
How can I make small grid lines on top of the xAxis labels?
The documentation for Line Chart is here: https://www.chartjs.org/docs/2.7.3/getting-started/?h=line, but I can't find anything about it.
I removed the XAxis and YAxis grid lines.
This is an example of the small grid lines wanted:
Thanks in advance.
Instead of removing the gridlines you can set the drawOnChartArea to false:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
scales: {
x: {
grid: {
drawOnChartArea: false
}
},
y: {
grid: {
drawOnChartArea: 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.6.2/chart.js"></script>
</body>
Is it possible to create a chart like this (following image) using Chart.js version 3?
Any suggestions would be greatly appreciated.
You can stack the x axis together with a smaller bar percentage for the inner bar:
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: 'orange',
barPercentage: 0.6
},
{
label: '# of Votes',
data: [12, 19, 8, 10, 5, 13],
backgroundColor: 'pink'
}
]
},
options: {
scales: {
x: {
stacked: true
}
}
}
}
const 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.6.2/chart.js"></script>
</body>
I have this plot in matplotlib python, this is a histogram and some specifics functions. I'm trying the same plot with ChartJS using bar/line mixed chart. The problem is that the the x-axis points have to be the same for both graphs and the form of the function is not achieved. Is this plot possible in Chart JS. If not, what libraries can I use?
Yes this is possible by using a second x axis with the same labels but the offset and display set to false:
const labels = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
const options = {
type: 'bar',
data: {
labels,
datasets: [{
type: 'line',
xAxisID: 'x2',
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange',
backgroundColor: 'orange'
},
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink',
backgroundColor: 'pink'
}
]
},
options: {
scales: {
x: {},
x2: {
labels,
offset: false,
display: false
}
}
}
}
const 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.5.1/chart.js"></script>
</body>
I would like to only have a legend label for only two of my three datasets in my chart.js stacked bar chart.
Is there a way to do this? At the moment I am only able to hide the entire legend by putting the following in my chart options:
legend: {
display: false
}
I.e. would it be possible to specify which datasets have a legend and which don't in the options? (or in the datasets if that's possible).
You can use the filter on the labels of the legend to filter out the datasets you dont want to show in the legend, see example:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
backgroundColor: 'red'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
backgroundColor: 'blue'
},
{
label: 'dont show this',
data: [17, 1, 15, 18, 13, 17],
borderWidth: 1,
backgroundColor: 'orange'
}
]
},
options: {
plugins: {
legend: {
labels: {
filter: (legendItem, chartData) => (legendItem.text !== 'dont show this')
}
}
}
}
}
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.3.2/chart.js"></script>
</body>
Documentation: https://www.chartjs.org/docs/master/configuration/legend.html#legend-label-configuration