score:2
Accepted answer
5000
is the lowest value in your dataset and Chart.js is creating its scale starting at 5000:
Set the beginAtZero
property to true
and you'll see the expected bar:
let data = [{
label: 'Available',
backgroundColor: '#3366ff',
data: [5580]
}, {
label: 'Budget',
backgroundColor: '#009999',
data: [5000, 6500]
}, {
label: 'Actual',
backgroundColor: '#92d400',
data: [5200, 7245]
}];
let myChart = new Chart(document.getElementById('chart'), {
type: 'horizontalBar',
data: {
labels: ["Rooms", "Guests"],
datasets: data
},
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>
Source: stackoverflow.com
Related Query
- ChartJS: Horizontal Bar with multiple datasets not showing Bars
- Horizontal bar with multiple sections in ChartJs
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- ChartJS Bar Issue - Showing "zeros" and not center bars
- ChartJS bar not showing up for simple data points
- Chartjs bar dataset label not showing
- How to remove bars for those bars with zero value in Chartjs bar chart?
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- Chartjs not working with d3 from csv source
- ChartJS update chart with multiple datasets
- ChartJs - Round borders on a doughnut chart with multiple datasets
- ChartJS Horizontal bars barely visible with 50 records on the Y axis
- Chartjs with Vue, Bar Chart Border Radius not working
- chartjs-plugin-datalabels not showing on stacked horizontal bar
- ChartJS horizontal bar with numbers on both scales
- ChartJS not showing data for time series bar chart
- Bar chart (chart.js) with only 2 points does not show one of the bars
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- ChartJS - would like to create a mixed chart with horizontal Bar and a dot to represent the answer from the current user
- ChartJs bar not showing up
- Draw stacked horizontal bar chart with Average line using ChartJS
- chartJS Horizontal Bar - Hide Stacked Bars But Still Show In Tooltip
- How to make multiple horizontal bar chartjs
- ChartJS - Issues with positioning and viewing various components of horizontal bar
- ChartJS Tooltips with time axis and multiple datasets
- ChartJS Bar chart with time scale - Bars overlap with each other
- Multiple datasets with one data value chartjs
- ChartJs How to display horizontal and vertical lines through the datasets points with their values on axes?
- How do I draw horizontal bars with a label using either ChartJS or D3?
- combo bar line chart with multiple grouped/stacked datasets
More Query from same tag
- Creating dynamic object to reorganize API response using Typescript
- Inserting and Fetching values from mongodb using nodejs and chartjs
- Align Chart JS Y-Axis dot with X-Axis value
- JavaScript Error - Uncaught SyntaxError: Unexpected token {
- Chart.js only displays on refresh in Rails app
- Chart.js - barchart - plugin labels
- Chart JS Y-axis labeling
- ChartJS Adding Different Lines for each column
- Hover/click area in filled line chart in chart.js
- Chart js does not load on page
- Chart.js - Add gradient to bar chart
- ChartJS: Draw vertical line at data point on chart on mouseover
- Styling background (fill) with ChartJs and React
- Remove gap when updating ChartJS
- how do I change the textsize in of doughnut in react-chartjs-2?
- If a radar chart values are full it occupies half the space (Chart.js)
- Vue + chartjs : Nearest point on hover tooltip not working
- Why is my chart not working? What am I missing
- Change height of chartjs dynamically
- How to modify bar width in Chartjs 2 bar charts
- How to style specific gridlines differently in chartJs?
- when click legend item in chart.js my bar is hiden but value of bar not hide
- Adding vertical and horizontal scroll to Chart js Bar graph
- ChartJS:align zeros on chart with multi axes
- Reactive Vue Chart.js component using Typescript
- Displaying line chart for multiple datasets using chart.js
- Chart.js find visible data points following zoom
- ChartJS on NodeJS: error Chart is not defined
- How to group chart labels together?
- How to iterate over array elements inside objects in javascript