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
- Label Color same as backgroundColor - ChartJS
- Creating a diagonal shaded area in chart.js
- Create Chart using Reactjs Chartjs and axios
- Chart.js how to resend animation command to a chart?
- How to remove grid on chart.js
- Passing the same props while rendering different elements conditionally in React.js
- How to display variables from Laravel controller to view javascript with specific index
- Why don't my datasets show up on line graph using Chart.js?
- Chart.js with 2 y-axis
- Script error : "Uncaught SyntaxError: Unexpected identifier"
- How to implement doughnut ChartJS with CodeIgniter 3 and display data from database
- chart.js bar chart change color based on value
- Chart JS - Title missing when clearing canvas if no data is available
- Using chart.js version 1.0.2 and 2.0 together
- Angular 6 ChartJS create canvas dynamically and create graph on it - an example?
- How to draw a needle on a custom donut chart and add datapoints to the needle?
- Extending Line Chart with custom line
- Chart.js sum y values depending on time unit
- Chart.js - Hide line using label string after load
- How to create an animate-on-update Stacked Bar chart using Chart.js(or Chartist)?
- ng-chart.js - First data set always has color gray
- angular-chart.js not rendering any chart
- chart.js dynamically set values of suggestedMin and suggestedMax based on values of array
- ChartJS: create linear x-axis on bar chart
- automatic Y-axis scale: max is always as 120% of highest value in ChartJS
- Django Chart.js ajax javascript "string data parsing error"
- Map through datasets in chartjs
- ChartJS - Size of the point doesn't change
- Chart.js updating-animations of radar-charts
- Event on Chart.JS's Bar Chart's mousein and mouseout?