score:1
Accepted answer
the default behavior of chart.js is to center charts, looking at the picture i am doubting that you have supplied two values in the labels array of data (not sure) if that's not the case please see this fiddle (http://jsfiddle.net/m5rq6bdj/2/) or the below code, which may help.
var ctx = document.getelementbyid("mychart").getcontext('2d');
var mychart = new chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: 'blueberries',
data: [2],
bordercolor: 'blue',
fill: false,
linetension: 0,
borderdash: [10,5]
}, {
label: 'apples',
data: [1],
bordercolor: 'red',
fill: false,
linetension: 0.1
}]
},
options: {
responsive: true,
maintainaspectratio: false,
scales: {
xaxes: [{
display: false,
ticks: {
scalebeginatzero: false
}
}],
yaxes: [{
display: true,
ticks: {
beginatzero: true,
fontsize: 12,
fontfamily: 'lato, sans-serif'
},
scalelabel: {
display: true,
labelstring: 'fruits counted',
fontstyle: 'bold',
fontfamily: 'lato, sans-serif'
}
}]
},
legend: {
display: true,
position: 'bottom',
labels: {
fontcolor: '#333',
fontfamily: 'lato, sans-serif',
}
}
}
});
Source: stackoverflow.com
Related Query
- Chart.js Bar Chart - how to chart bars from 0
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How to have solid colored bars in angular-chart bar chart
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- How to make bar chart animation where all bars grow at the same speed?
- how to customize tool tip while mouse go over bars on Chart js bar chart
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- How to center bars on x-axis of Chart.js bar graph?
- Chart.js: How to get x-axis labels to show on top of bars in bar chart
- How to set custom Y Axis Values (Chart.js v2.8.0) in Chart Bar JS
- chartjs 2.7 how to add labels in center of horizontal bar graph
- How to prevent empty bars from taking up width in Chart.js bar chart
- How to remove the extra Y axis from a bar chart in chart.js
- How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- how to show bar graph on y axis in charjs
- How to align bars in bar chart - Chart.js
- How to add custom text inside the bar and how to reduce the step size in y axis in chart js( Bar chart )
- how to highlight the bars in stacked bar chart of chart.js on clicking a legend
- How to keep side bars in Chartjs bar graph from clipping?
- How to Add X axis Padding in chart js Line Graph
- Combo bar chart graph line gets obscured by bars
- How to change bar color on a angular-chart and chart js bar graph with multiple datasets?
- How can i get the Chart JS Bar Graph Bar Label and Value on click?
- How to reduce the gap between bars on bar chart
- How to set percentage value by default on each bars in horizontal bar chart js
- chart js 2 how to set bar width
- Chart.js Bar Chart: How to remove space between the bars in v2.3?
- How to prevent first/last bars from being cut off in a chart with time scale
- How to create rounded bars for Bar Chart.js v2?
More Query from same tag
- fill: 'origin' property does not work for my chart
- vue-chartjs remove top rectangle (datasets label)
- React-chartjs-2 update height dynamically
- How to make multiple stacked charts to share the same yAxis?
- How to use GET method to choose the right table to show ChartJS graph?
- Click on Element Inside Doughnut Chart
- chartjs: bars smaller than actual column, tooltip doesn't display
- No rendered annotation line on Line Chart
- call Column that is complex in query
- Vue chartjs is not rendering from API
- Chart.js line chart set background color
- Chart.js polar chart
- How to add new data point and remove leftmost data point dynamically in Chartjs
- Integrate Blazor with Chart.js: how to pass an object
- How to remove transparency from bar charts?
- Chartjs - line chart display with addData() is bugged?
- Blank PNG image using Chart JS . toBase64Image() function
- Chart.js - mixing bar and line graphs - can I get the lines to fill the full column?
- Chart.JS TypeError: this.scale is undefined
- Limit labesl on chart.js bar chart
- Tick - no negative
- ChartJs is not working in angular 4 with no errors
- How to load a chart in a diferent page
- chartjs-plugin-dragdata isn''t working with scatter charts
- Saving columns from an SQL table into an array using Python
- chart.js version 2.4.0 does not display bars for me
- Adding reading off lines in ChartJS
- Chartjs doughnut chart rounded corners for half doghnut
- Format Y axis of Chart.JS as Time
- What can I do to ensure that my charts diagram reload every time I choose it from my dropdown?