score:11
Accepted answer
For some reason, chart.js uses the smallest amount in data as minimum ticks value. Simply adding ticks.min: 0
apparently solves the issue:
var ctx = document.getElementById('chart')
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: [
"Foo",
"Bar",
"Baz"
],
datasets: [{
data: [725000, 600000, 900000],
backgroundColor: [
"#ccf6ec",
"#ff6654",
"#009784"
],
hoverBackgroundColor: [
"#ccf6ec",
"#ff6654",
"#009784"
]
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
display: false,
ticks: {
min: 0
}
}],
yAxes: [{
display: false
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" width="400" height="400"></canvas>
Source: stackoverflow.com
Related Query
- ChartJS bar not showing up for simple data points
- ChartJS not showing data for time series bar chart
- Chartjs not showing all data points
- Chartjs Bar Chart showing old data when hovering
- Chartjs - data format for bar chart with multi-level x-axes
- Chartjs bar dataset label not showing
- ChartJS bar chart fixed width for dynamic data sets
- Missing Tooltip for some data points using chartjs
- chart js chart bar chart not showing data from 0
- Tool tip not showing for those label who's data overlapped on each other in chart.js
- ChartJS yAxis showing not coherent data
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- Chartjs Bar Chart showing old data when hovering when use of ajax
- Dynamically loaded chart data not showing Chartjs React
- ChartJS Bar Issue - Showing "zeros" and not center bars
- ChartJs bar not showing up
- ChartJS fails to render horizontal bar chart for timeseries data
- Angular ChartJs does not show Data for multiple Charts
- angular chartjs not showing data properly
- Chartjs pie chart not showing from dynamic data
- Showing points data withou hover chartjs
- Different color for each bar in a bar chart; ChartJS
- Chartjs random colors for each part of pie chart with data dynamically from database
- ChartJs title not showing
- Chart.js - Hover labels to display data for all data points on x-axis
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- Chart.js: only show labels on x-axis for data points
- show label in tooltip but not in x axis for chartjs line chart
- chartjs + Angular6 is not showing charts or any error
- Chartjs 2 scaling lots of data points
More Query from same tag
- ng2-charts & chart.js - Change background color
- Dynamic id with canvas on html and angular
- custom tooltips with react-chartjs-2 library
- How to adjust spaces between points in chart js?
- Javascript / JSON error: TypeError: myObj is undefined
- Tick - no negative
- Is it possible to get chart js data using ajax?
- Chartjs with zoom plugin zooms too much with wheel just with single turn
- Data Labels on top of points in line charts
- How can I display the percentage symbol inside the chartjs?
- borderdash options in chart js changes my legend
- how to Fill array with 0 if data is not present?
- How to create a charjs bar graph with many bars?
- Chart.js - Creating multiple charts on one page
- Chart.js - scaleType='date' not working
- Can a service get access to component's template
- angular Chart data-pushing from another javascript
- Cannot read property 'length' of null error in Javascript
- Chart.js noob - Can't get anything to display
- React Chart.js onClick for custom legends
- Generating different chart results on fly causes flickering
- Create a ChartJS with 2 database tables
- Modifying the X-Axis Labels of a Scatterplot in Chart.js 2
- charts.js global options gridLines
- ChartJS - would like to create a mixed chart with horizontal Bar and a dot to represent the answer from the current user
- Usage of Chartjs in Angular2 App
- Chart.js . ASP . Legend Template
- chart.js time series skips days
- onClick event to Hide dataset Chart.js V2
- React ChartJS Scatter Plot - cannot plot the data