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
- Chart.js multiple dataset issue: hovering over n-th point "hovers" over every dataset's n-th point
- How to add null value rows into pandas dataframe for missing years in a multi-line chart plot
- Charts js showing only when positives data
- Chart JS distance between bar stacked
- Chartjs 1 to n relationship
- chart.js Failed to create chart: can't acquire context from the given item
- Rest api / json error while using it with react chartjs
- Setting dynamic state data in Chart.JS + React
- Saving chart.js chart to a folder (Not download)
- How to show tooltip only for show x values in react charts
- Options beginAtZero doesn't work in angular-chart.js
- Dynamically updating Chart.js data in angular
- Lost column of bar chart in Chart.js
- Problem creating chart out of GET request with Angular
- Lograthmic yaxsis setting not working in chartjs
- Chart.js change height on window resize while maintaining aspect ratio
- plot a point on top on line chart in chartjs
- Chartjs disable color change on hover withouth disabling tooltips
- My chart is not shown on browser screen using chart.js in meteor
- Move x-axis to pass through given y-axis value in chart.js
- How to display data values on Chart.js
- Chart.js: Is it able to connect two points of data where there are no data between them?
- How to change the display of an axis Chart.js
- Mixed Diagram (Line/Bar) with two y-Axis won't display data on 2nd Axis
- ChartJS in React throws 'too may re-renders'
- Javascript get JSON into arrays, combine and use elsewhere
- How to use radial CanvasGradients with Chart.js's doughnut chart?
- Is it possible to combine multiple charts in one canvas in chartjs?
- $scope variable do not respond to the onClick function of angular chart
- Order and hide items of legend by value with Chartjs Angular