I want to limit the maximum width of a bar chart
My CODE:
<script>
// bar chart data
var a=[];
a.push('kalai 2015-04-11');
var b=[];
b.push('300');
var barData = {
labels : a,
datasets : [
{
fillColor : "#48A497",
strokeColor : "#48A4D1",
data : b
}
]
}
// get bar chart canvas
var income = document.getElementById("income").getContext("2d");
// draw bar chart
new Chart(income).Bar(barData, {scaleGridLineWidth : 1});
<!--new Chart(income).Bar(barData);-->
</script>
What is the way to do so
It looks like this for single value
The size of the bar reduces as the number of bar increases How can i set maximum bar size to make it more viewable
I want to limit the maximum width of a bar chart
My CODE:
<script>
// bar chart data
var a=[];
a.push('kalai 2015-04-11');
var b=[];
b.push('300');
var barData = {
labels : a,
datasets : [
{
fillColor : "#48A497",
strokeColor : "#48A4D1",
data : b
}
]
}
// get bar chart canvas
var income = document.getElementById("income").getContext("2d");
// draw bar chart
new Chart(income).Bar(barData, {scaleGridLineWidth : 1});
<!--new Chart(income).Bar(barData);-->
</script>
What is the way to do so
It looks like this for single value
The size of the bar reduces as the number of bar increases How can i set maximum bar size to make it more viewable
Share Improve this question asked Apr 27, 2015 at 11:33 The6thSenseThe6thSense 8,3359 gold badges37 silver badges66 bronze badges 1- 1 stackoverflow.com/questions/29894577/… – Ashish Gangrade Commented Dec 24, 2016 at 5:30
4 Answers
Reset to default 6You can add new options, which are not available by default.But you need to edit chart.js
In Chart.js add these lines of code Step 1:
//Boolean - Whether barwidth should be fixed
isFixedWidth:false,
//Number - Pixel width of the bar
barWidth:20,
Add these two line in defaultConfig of Bar Chart
Step 2:
calculateBarWidth : function(datasetCount){
**if(options.isFixedWidth){
return options.barWidth;
}else{**
//The padding between datasets is to the right of each bar, providing that there are more than 1 dataset
var baseWidth = this.calculateBaseWidth() - ((datasetCount - 1) * options.barDatasetSpacing);
return (baseWidth / datasetCount);
}
Add this condition in calculateBarWidth function of barchart
Now you can set barWidth in custom js file as option by setting
isFixedWidth:true,
barWidth:xx
If you don't want to specify fixed barwidth, just change isFixedWidth:false
Its kinda late to answer this but hope this helps someone out there... play around with barDatasetSpacing [ adds spacing after each bar ] and barValueSpacing [ adds spacing before each bar ] to be able to achieve your desired bar width.. example below when initiating your bar chart
... barDatasetSpacing:10, barValueSpacing:30, ...
Hope it helps..
I did it by extending Bar chart, and calculating barValueSpacing dynamically. I use angular chartjs
var MAX_BAR_WIDTH = 50;
Chart.types.Bar.extend({
name: "BarAlt",
draw: function(){
var datasetSize = n // calculate ur dataset size here
var barW = this.chart.width / datasetSize;
if(barW > MAX_BAR_WIDTH){
this.options.barValueSpacing = Math.floor((this.chart.width - (MAX_BAR_WIDTH * datasetSize)) / datasetSize);
}
Chart.types.Bar.prototype.draw.apply(this, arguments);
}
});
Did you tried following options?
{
//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero : true,
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - If there is a stroke on each bar
barShowStroke : true,
//Number - Pixel width of the bar stroke
barStrokeWidth : 2,
//Number - Spacing between each of the X value sets
barValueSpacing : 5,
//Number - Spacing between data sets within X values
barDatasetSpacing : 1,
//String - A legend template
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
}