score:1
You can use d3.js for the intended behaviour. Here is a good post regarding that. Or You can also follow this article tweaking the plotkit chart to show the downwards negative bar.
To make it work it with chart.js(though not advisable as this is not supported in Chart.js) you can use this github pull and instead of using the global configuration object, i.e. setting:
Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleBeginAtZero = false;
Chart.defaults.global.barBeginAtOrigin = false,
Chart.defaults.global.animation = false;
use a separate config object and pass it into the chart constructor:
var chartOptions = {
responsive:true,
scaleBeginAtZero:false,
barBeginAtOrigin:true
}
var chartInstance = new Chart(ctx).Bar(myChartData, chartOptions);
score:1
This works for me.
scales: {
y: {
beginAtZero: true
},
}
score:2
I think you're looking for something like this
HTML
<canvas id="myChart" width="500" height="250"></canvas>
JS
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July", "August"],
datasets: [
{
data: [65, 59, 80, 81, 56, 55, 40, -30]
}
]
};
var options = {
scaleBeginAtZero: false
};
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx).Bar(data, options);
score:2
I'm using Chart.js version 2.0.2 and this could be achieved using yAxes.min
, and if the chart is empty you could use yAxes.suggestedMax
Example:
options:{
.
.
.
scales{
yAxes:[{
min:0,
//this value will be overridden if the scale is greater than this value
suggestedMax:10
}]
}
score:5
use beginat zero like below:
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
score:8
public barChartOptions: any = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true}
}]
},
}
score:47
The other answers didn't work for me. However, I did manage to find another config option that did work for me.
var options = {
// All of my other bar chart option here
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx).Bar(data, options);
Passing this for my chart options give me a bar chart with the scale starting at 0.
Source: stackoverflow.com
Related Query
- Chart.js Bar Chart - how to chart bars from 0
- How to prevent empty bars from taking up width in Chart.js bar chart
- How to prevent first/last bars from being cut off in a chart with time scale
- How to have solid colored bars in angular-chart bar chart
- 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
- How to create Bar chart that gets updated from new ajax requests with ChartJS?
- Chart.js: How to get x-axis labels to show on top of bars in bar chart
- How to remove the extra Y axis from a bar chart in chart.js
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- How to align bars in bar chart - Chart.js
- how to insert dynamic data from sql into chartjs stacked bar chart javascript
- 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 make labels on both side from horizontal bar chart js
- How to reduce the gap between bars on bar chart
- How to create Stacked bar chart from JSON in chart.js
- How to set percentage value by default on each bars in horizontal bar chart js
- How to clear a chart from a canvas so that hover events cannot be triggered?
- chart js 2 how to set bar width
- Chart.js Bar Chart: How to remove space between the bars in v2.3?
- How to create rounded bars for Bar Chart.js v2?
- How to put rounded corners on a Chart.js Bar chart
- chartjs : how to set custom scale in bar chart
- How to add second Y-axis for Bar and Line chart in Chart.js?
- How to create stacked bar chart using react-chartjs-2?
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- Hide empty bars in Grouped Stacked Bar Chart - chart.js
- How to display inline values in a stacked bar chart with Chart.js?
- ChartJs how to get from mulitiple dateset which dataset bar is clicked
More Query from same tag
- How to access specific data values from tooltip - Chart.js
- Chart.js - Responsiveness not correctly working on device orientation change
- Is it possible to make points in a line chart of Chart JS 3.7.0 look like a donut?
- how to change the label color and set y-axis values 1k intervals and hide y-axis?
- (chart.js v3.5.1) change bar background, label font color on click
- Chart JS not re rendering in Laravel Livewire
- Multiple lines / data series from JSON file with Chart.js
- How to create chart from a dict?
- How to Add X axis Padding in chart js Line Graph
- chartjs Line chart: scale respect value on x-axis
- how can I make selected data is highlighted on chart js?
- Create a chart on a dynamically created canvas in Angular-chart.js
- How to load data values from cookie into Chart.js
- Chart JS prepend labels to x-axis with addData
- AngularJs ChartJs tooltip z-index issue
- How can I show Bootstrap modal when on click in individual bars in chart.js
- Chart js how to toggle line without click
- Chart.js displays the label in a weird font in IE8
- Adding Vertical scroll bar in a bar-chart (chartjs)
- Chart.js repeating colors?
- ChartJS: get points information on hovering the points
- How to create dynamic D3 tickFormat in dc charts
- How can I set y-axis label on Chart.js?
- Chart.js: only show labels on x-axis for data points
- Chartjs inverted bars when negative value
- How to draw a chart with Chart.JS?
- Chart.js, changing the max height (not w/ canvas) or rounding up rule?
- Chart JS - How to display Label over Slices instead of text on hover
- How do I get a different label for each bar in a bar chart in ChartJS?
- How I can prevent of labels overlapping on mobile screen Chart.js