I'd like to have more spacing between the bars in my horizontal bar graph. It looks terrible on a mobile device, and barely acceptable on a desktop browser. How can I accomplish this?
ChartJs Version: 2.4.0
function renderBarChart(chartDomID, title, labels, dataPoints, barColor) {
var ctx = document.getElementById(chartDomID).getContext("2d");
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: labels,
datasets: [
{
label: title,
data: dataPoints,
fill: false,
pointBorderColor: barColor,
backgroundColor: barColor,
borderColor: barColor
}
]
},
options: {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
// Suggest to start the y-axis at 0, if ChartJS thinks it makes sense.
suggestedMin: 0
}
}]
},
legend: {
display: false
}
}
});
Mobile View
Desktop View
You have to add width and height as an example here.
<canvas id="myChart" width="700" height="900"></canvas>
Related
I have a graph where I am trying to draw a pareto chart by using chart.js. I am combining bar chart and line chart to achieve this. Here is my sample graph:
Here is the code:
this.chartData = {
labels: labels,
datasets: [
{
data: lineData,
label: "Cumulative Total of Number of Reassignments",
type: 'line',
fill: false,
datalabels: {
color: "#0f0f0f"
},
},
{
label: "Number of Reassignments",
data: datasetsLabel,
datalabels: {
color: "#0f0f0f"
}
},
]
}
lineData array holds the values 45.87, 64.22, etc.
datasetsLabel array holds the values 250, 100, 90, etc.
I tried to use the following options:
this.options = {
responsive: true,
scales: {
yAxes: [
{
ticks: {
stepSize: 5,
},
},
{
display: true,
position: 'right',
ticks: {
max: 100,
min: 0,
stepSize: 10
}
}
],
},
}
What I want to achieve is put 45.87, 62.22, etc values to the right side of the graph. How can I achieve this?
I have used horizontal bar chart from chart.js where i need percentage values to be shown next to each bar at right side? here is the bar sample image.
click here to view sample image of bar chart
Also these are the options i have tried :
xAxes: [
{
ticks: {
min: 0,
max: 100
},
grid: {
offset: false
}
},
],
yAxes: [
{
gridLines: {
display: false,
},
display: "right",
barPercentage: 0.8,
minBarLength: 2,
},
],
Is there any option which can turn the percentage values on at he right side of the horizontal bar chart?
Please click below image to see the expected output
click image expected output
You can make use of the datalabels plugin
Example:
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.3.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0-rc"></script>
<canvas id="myChart" width="850" height="520"></canvas>
<script>
var ctx = document.getElementById('myChart');
Chart.register(ChartDataLabels);
Chart.defaults.set('plugins.datalabels', {
color: '#FE777B'
});
var myChart = new Chart(ctx, {
type: 'bar',
plugins: [ChartDataLabels],
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
data: [12, 19, 3, 5, 2, 3],
label: 'Advisor Closed MTD',
backgroundColor: 'rgb(192,111,94)',
barThickness: 25,
datalabels: {
color: '#FFCE56'
}
}],
},
options: {
indexAxis: 'y',
responsive: false,
plugins: {
datalabels: {
formatter: (val, context) => (`${val}%`),
anchor: 'end',
align: 'end',
labels: {
value: {
color: 'blue'
}
}
}
}
}
});
</script>
I am using Chart.js plugin.
I want to reduce the horizontal spacing.
Image 1 : I try
Image 2 : I want
JSFiddle Link Here!
HTML Code Here
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="myChart" width="800" height="300"></canvas>
CSS Code Here
canvas {
margin:0 auto;
}
JS Code Here
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['April', 'May'],
datasets: [{
label: 'facebook',
borderColor: 'rgba(0,0,0,0)',
backgroundColor: '#3b5998',
data: [179, 201]
}, {
label: 'instagram',
borderColor: 'rgba(255,255,255,0)',
backgroundColor: '#e8361c',
data: [31, 47]
}]
},
options: {
responsive: false,
scales: {
yAxes: [{
display: false,
ticks: {
suggestedMin: 0
},
gridLines: {
display:false
}
}],
xAxes: [{
display:true,
barPercentage: 0.7,
categoryPercentage: 0.3,
gridLines: {
display:false
}
}]
},
legend: {
position:'bottom'
},
animation:false
}
});
I want to reduce the interval between categories. I do not know if there is a corresponding option. Please help me.
I am working with a library that makes chartjs usable on react-native:
react-native-chartjs.
The chart works well, but when I press on the pie slices I only get the tooltip.
What I would like to, is to create my own function that will load a pop-up window instead of the tooltip provided by chart.js
How would you guys do it? Is it even doable? (I am pretty new to react-native, so sorry if it's a stupid question).
Image of the:
Chart
Chart code:
export const NutritionChart = (props) => {
return (
<Chart
chartConfiguration={
{
type: 'polarArea',
data: {
labels: ['Fiber', 'Protein', 'Healthy Oil', 'Good Energy']‚
datasets: [
{
label: '# of Votes',
data: [ 50, 140, 90, 120 ],
backgroundColor: backgroundColor,
borderColor: borderColor,
borderWidth: datasets.border,
hoverBackgroundColor: hoverBackgroundColor,
},
],
},
options: {
layout: {
padding: {
top: options.layout.padding.top,
bottom: options.layout.padding.bottom,
}
},
scale: {
display: false,
ticks: {
min:0,
max:200,
}
},
responsive: true,
maintainAspectRatio: false,
},
}
}
defaultFontSize={10}
/>
);
};
When the label is long, the y-axis is pushed to the left. It left a gap between the y-axis and the bar chart. Is there anyway to close the gap?
var labelList = ["Professional & Disciplinary Knowledge","Curriculum Planning and Instructional Delivery","Learning Environment","Creative Thinking","Problem solving and Critical Thinking","Research Skills"];
var barDatasource = {
labels: labelList,
datasets: [
]
};
var barConfig = {
type: 'bar',
data: barDatasource,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
suggestedMax: 4
}
}],
xAxes: []
},
legend: {
position: 'bottom',
},
title: {
display: true,
text: 'Radar Chart for WM Component Mean',
fontSize: 14,
fontStyle: 'bold'
}
}
};