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>
Related
I have a little experience with chartjs but I am unable to find a way to hide the default line. I'm adding this image here which I need to fix.
I need to hide the line like this one
https://i.stack.imgur.com/UXMpi.png.
I need to make it like this one
https://i.stack.imgur.com/Phsos.png
If anyone knows how to do this, please let me know. Thanks.
set display to false in the grid settings of the x axis and drawBorder to false in both axes like so:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'orange'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'pink'
}
]
},
options: {
scales: {
x: {
grid: {
display: false,
drawBorder: false
}
},
y: {
grid: {
drawBorder: 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.8.0/chart.js"></script>
</body>
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>
I am using Chart.js library in my project and I have one issue that I could't solve.
This label that describes what the data shown is about, is one info that I don't actually need in my project. How can I remove it completely?
In another chart I need to place it in the right side of the chart, but I can't manage it. How can I solve these two problems that I have?
At the moment my code looks like this:
type: 'bar',
data: {
labels: data.map(x => moment(x.date).format("MMM Do")),
datasets: [{
data: data.map(x => x.premium),
backgroundColor: '#ffec87',
borderColor: "#ffec87",
borderWidth: 2,
borderStyle: 'dotted'
}]
},
Any ideas?
Thanks in advance!
Since its part of the legend you will need to configure it in the options.
Don't show at all example:
const 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: {
plugins: {
legend: {
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.6.0/chart.js"></script>
</body>
Show it on the right side example:
const 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: {
plugins: {
legend: {
position: 'right'
}
}
}
}
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.0/chart.js"></script>
</body>
Dont show undefined labels:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
plugins: {
legend: {
labels: {
filter: (legendItem, data) => (typeof legendItem.text !== 'undefined')
}
}
}
}
}
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.0/chart.js"></script>
</body>
For more information you can read the documentation about it
I agree with LeeLenalee answer but I think you need this for aligning:
plugins: {
legend: {
align: 'end',
}
},
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