I want to display data in chart js (version 3.7.1) with horizontal bar chart. Data are loading from backend. My problem is with widht of bar. When I have only a few records, bars are very thick.1 When I have a lot of records (for example 1000) bars are very narrow and are missing label.2 How can you see in images.
I would like have still the same widht for bars and if is a lot of records enable scroll.
There is my code:
createConfig(config: ChartConfigDto): ChartConfiguration {
return {
type: 'bar',
data: {
labels: config.labels,
datasets:
config.datasets.map((dataset, index) => ({
label: dataset.label,
backgroundColor: `${CHART_COLORS[index]}`,
borderColor: `${CHART_COLORS[index]}`,
data: dataset.data,
barThickness: 'flex',
}))
},
options: {
indexAxis: 'y',
plugins: {
title: {
display: true,
text: 'Sites',
},
legend: {
position: 'top',
},
},
responsive: true,
scales: {
x: {
stacked: true,
position: 'top',
},
y: {
stacked: true,
grid: {
display: false,
},
}
},
},
}
}
<div class="modal-body">
<canvas appChart [config]="config"></canvas>
</div>
Thank you for help
There are two properties you can use to achieve.
barThickness
maxBarThickness
You can use maxBarThickness property in the dataset.
Here I'm attaching Stackblitz demo
Related
I need to retrieve multiple datapoints from my JSON file and display them on the graph. However, it becomes jumbled around the x-axis, and becomes thin. How do I space these out?
I have
Graph
[
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true,
padding: 50
},
x: {
offset: true,
ticks: {
stepSize: 50,
fixedStepSize: 50,
}
}
},
plugins: {
title: {
display: true,
text: 'Worm Egg Count'
},
}
}
};
]2
I am trying to create a stacked bar chart (with chart.js 3.7+) which uses the entire canvas:
new Chart(..., {
type: 'bar',
data: {
labels: ['a','b','c','d','e'],
datasets: [{
backgroundColor: '#ff00ff',
data: [20,40,60,40,20],
},{
backgroundColor: '#00ff00',
data: [100,200,300,200,100],
}]
},
options: {
maintainAspectRatio: false,
responsive: true,
plugins: {
legend: { display: false },
},
scales: {
x: {
display: false,
stacked: true
},
y: {
display: true,
stacked: true
}
}
}
});
When I use a normal bar chart the graph is stretched to use up all the vertical space:
But when I stack the bars the combined longest bar doesn't use up all the vertical space:
How can I get the stacked bar chart to stretch to use all available vertical space?
See example here.
You could sum your arrays, find the max value in the resulting array and set the options.scales.y.max property with this value :
let data1 = [20,40,60,40,20];
let data2 = [100,200,300,200,100];
let sum = data1.map(function (num, idx) {
return num + data2[idx];
});
let max = Math.max(...sum);
var options =
{
maintainAspectRatio: false,
responsive: true,
plugins: {
legend: { display: false },
},
scales: {
x: {
display: false,
stacked: true
},
y: {
display: true,
stacked: true,
max: max
}
}
};
var mychart = new Chart(document.getElementById('mycanvas2').getContext('2d'), {
type: 'bar',
data: {
labels: ['a','b','c','d','e'],
datasets: [{
backgroundColor: '#ff00ff',
data: data1
},{
backgroundColor: '#00ff00',
data: data2
}]
},
options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<div style="width:400px; height: 200px">
<canvas id="mycanvas2"></canvas>
</div>
According to this issue with chart.js you can configure the y-axis bounds to fit the data:
options: {
scales: {
x: {
display: false,
stacked: true
},
y: {
display: true,
stacked: true,
bounds: 'data' <----------
}
}
}
Just a warning: I am new to chart.js!
I have a couple of horizontal bar charts and it works fine except one issue that I cannot shake off. I have 5 labels in y-axis but the legend on top of the graph only shows one small rectangle in the color of the first (topmost) bar and even that does not display the label itself, followed by list of labels. I thought it would display each label next to small bar same color as in chart.
Unfortunately, this is an intranet app and I cannot provide a link but here is what I have (data is passed to this function from an ajax call):
function drawRespChart(chartLabels, chartData) {
var ctx = $("#rtChart");
console.log("Labels Array: " + chartLabels);
console.log("Data Array: " + chartData);
if (chartRespTime)
chartRespTime.destroy();
var chart = {
labels: chartLabels,
datasets: [
{
label: chartLabels,
backgroundColor: ["#c45850", "#e8c3b9", "#3cba9f", "#8e5ea2", "#3e95cd"],
data: chartData
}
]
};
chartRespTime = new Chart(ctx, {
type: 'horizontalBar',
data: chart,
datalabels: {
anchor: 'end',
align: 'start',
},
options: {
title: {
display: true,
text: 'IDC Database Response Time (mili-seconds)'
},
legend: {
display: true,
labels: {
fontColor: 'rgb(255, 99, 132)'
}
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Count'
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Response Time (ms)'
}
}]
},
plugins: {
datalabels: {
color: 'white',
display: function (context) {
return context.dataset.data[context.dataIndex] > 15;
},
font: {
weight: 'bold'
},
formatter: Math.round
}
},
maintainAspectRatio: true,
responsive: true,
showInlineValues: true,
centeredInllineValues: true,
tooltipCaretSize: 0
}
});
}
This is what I see in console window:
Labels Array: 0-350,350-700,700-1000,1000-1500
Data Array: 5065,32,27,3
What I see as legend is one rectangle, same color as first bar, followed by list of labels.
It seems that charts.js labels only works when you split the datasets.
Leaving an example.
https://jsfiddle.net/code4mk/1j62ey38/
datasets: [ {
label: 'Result',
fill:false,
data: aDatasets1,
backgroundColor: '#E91E63',
},
{
label: 'Result2',
fill:false,
data: aDatasets2,
backgroundColor: '#E91E93',
}];
I have a relatively simple bar chart in my application.
Code:
new Chart(document.getElementById("foo"), {
type: "bar",
options: {
scales: {
yAxes: [{
display: false,
}],
xAxes: [{
display: false,
}]
},
elements: {
bar: {
borderWidth: 2,
borderColor: "#D2DDEC"
},
point: {
hoverRadius: 0
},
},
legend: {
display: false,
},
},
data: {
labels: Object.keys(values),
datasets: [{
data: Object.values(values),
}]
}
})
However, these bars will center in the middle of the container, while I would like these to start left.
Is there a way to do this? I don't see any align property in the API.
I've just added labels until I reached 31. fixed.
I'm using Chart.js and I want to remove labels with percentage marked with red circle on image below.
I'm using this code to produce this chart:
const options = {
responsive: true,
title: {
display: false
},
legend: {
display: false
},
tooltips: {
mode: 'index',
intersect: true
},
scales: {
yAxes: [{
type: 'linear',
position: 'left',
id: 'y-axis-1'
}, {
type: 'linear',
position: 'right',
id: 'y-axis-2',
gridLines: {
drawOnChartArea: false
}
}],
}
};
new Chart(document.getElementById('originalThirdChart').getContext('2d'), {
type: 'bar',
data: data,
options: options
});
How can I do this? Thanks in advance!
If you want to remove only the percentages, just add this line in your options
labels: { render: () => {} }
It will look like:
options: {
plugins: {
labels: {
render: () => {}
}
}
}
There must be some logic in your code. ctx.fillText(value + '%', position.x, position.y); like this. I don't see that in your code given code. if it is there, Please remove it. It will work.