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
- Charts.js: Moment is not defined (using chart.bundle.min.js)
- How can I display the percentage symbol inside the chartjs?
- Uprading to chart.js@3.x with Angular 8
- Jinja throughs "SyntaxError: expected property name, got '%' " error
- Display labels on bar chart using Chart.js
- How to Push data dynamically from firebase to bar graph in angular
- How to embed php code in min.js file
- generate multiple charts via loop for chart js
- How to Add X axis Padding in chart js Line Graph
- scattered graph with xAxes of date react-chratjs-2
- Calling data from search bar to chart.js graph in Angular
- Where do I use chartjs's destroy function?
- Chart.js cartesian axes - Modifying tool-tip based on which y-axis the data corresponds to
- Plot bar graph in reactjs
- Using chart.js with laravel passing data from controller to view
- Can JS lib can be use in Native Tizen App?
- Angular 2 ng2-charts donut change segment color
- How to get data of json file for chart.js diagram
- How to create datasets dynamically for chart.js Line chart?
- Adding a Label to Chart js Pie Graph
- How can I add a label above just the last bar in a Chart.JS bar chart?
- New Chart.js Chart onclick
- Add all data in the tooltip of Chart JS
- Type error when config ChartJs in Typescript
- Multiple data sets not working when using ChartJS
- How do I remove the y-axis labels from a graph?
- How can I hide tick marks on Chart.js?
- Trying to access key in JSON array
- I can't display the vue-chart.js on the page
- How to align elements using a ChartBar from Chart.js and Alerts from Bootstrap 4?