score:6
You 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
score:0
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>"
}
score:1
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);
}
});
score:3
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..
Source: stackoverflow.com
Related Query
- Chart.js setting maximum bar size of bar chart
- How do I set a bar chart to default to a suggested maximum in chart.js v1.01?
- Set fixed label size for grouped bar chart in angular Chartjs
- Create bar chart with chart.js where space per bar is the same, overall chart size adjusted
- Can't increase font size in google bar chart
- Is there any way to change the font size of labels in bar chart in Chart.js v3?
- How to add custom text inside the bar and how to reduce the step size in y axis in chart js( Bar chart )
- setting chart.js stacked bar chart data dynamically
- Custom dataset object not setting chart.js bar chart colors in Angular 6
- chart js 2 how to set bar width
- Chartjs Bar Chart showing old data when hovering
- Chart.js: Bar Chart Click Events
- Chartjs v2.0: stacked bar chart
- Set minimum step size in chart js
- Horizontal stacked bar chart with chart.js
- Chart.js Bar Chart - how to chart bars from 0
- Horizontal bar chart in chart.js
- Vertical stacked bar chart with chart.js
- Changing fontFamily on ChartJS bar chart
- Chart.js: bar chart first bar and last bar not displaying in full
- How to put rounded corners on a Chart.js Bar chart
- Chart.js: Dynamic Changing of Chart Type (Line to Bar as Example)
- chartjs : how to set custom scale in bar chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chartjs Bar Chart Legend
- Add DataSet Bar Chart - Chart.JS
- Click event on stacked bar chart - ChartJs
- ChartJS add tooltip to a grouped bar chart
- How to add second Y-axis for Bar and Line chart in Chart.js?
- Overlapping Bar Chart using Chart.js
More Query from same tag
- How to properly unpack data from PHP array encoded as JSON from a JavaScript file
- Chart js cut the title and the legends
- Keep chart.js doughnut with fixed width and height centered in container
- Disable chartJS tool tip on one dataset only
- How does one add data to a Chart in an ajax call?
- Hide label on slice of Doghnut/Pie Chart Angular ng2-charts
- ng2 charts bar chart need spacing between 2 bars in series Angular
- Chart.js Y axis label, reverse tooltip order, shorten X axis labels
- Output array of hashes from Ruby on Rails to chart.js
- ChartJS Label Names Not Showing, Just ID
- Chart.js -> line chart -> multiple points with the same X
- How to dynamically set backgroundColor and borderColor barchart unsing Chart.js
- Error ReferenceError: CanvasGradient is not defined
- Hide gridlines in chartjs without the drawTicks
- Plot multiple graphs (Chart.js) from php loop for reading multiple files
- Chart.js not initiating
- How to draw pile/stacked bar chart?
- Wkhtmltopdf does not render Chart.JS 2.5.0 graph
- How to add on click event to chart js
- <Canvas is already in use. Chart with ID '18' must be destroyed before the canvas can be reused> in react
- White Space in stacked bar using chart.js
- how to use chart.js with knockout.js to create dynamic charts
- Chart.js canvas keeps shifting upwards if I add things below it? (Angular - Chart.JS - NG2Charts)
- Resize Chart Independently From Legend in ChartJS for Canvas Download
- How i can refresh chart without refresh page?
- ChartJS multiple X axis and extra labels in y axis
- How to check if HTML5 canvas element contains something in given coordinate region using javascript
- Unwanted comma in the tooltips when line breaking a label in ChartsJS
- Chart.js: adding a custom label to each item, and displaying it with a custom tooltip
- ChartJS canvas not displaying colors in edge browser