Chart.js sets the maximum bar size of a bar chart

Question

I want to limit the maximum width of the histogram

My code is:

<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 this

It seems like a single meaning

The size of the bar decreases with increasing number of bars. How to set the maximum size of a bar to make it more visible.

Answer 1

You can add new options that 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 lines to the defaultConfig column 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 to the calculateBarWidth barchart function

Now you can set barWidth to the user js file as parameter by setting

 isFixedWidth:true, barWidth:xx 

If you do not want to specify a fixed bandwidth, just change isFixedWidth:false

Answer 2

Its a bit late to answer this, but hope this helps someone out there ... play with barDatasetSpacing [adds an interval after each bar] and barValueSpacing [adds an interval before each bar] to achieve the desired bandwidth. example below when starting your histogram

 ... barDatasetSpacing:10, barValueSpacing:30, ... 

Hope this helps.

Answer 3

I did this by expanding the histogram and dynamically calculating barValueSpacing. I am using 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); } }); 

Answer 4

Have you tried the 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>" }