score:17
Thank you guys for helping, I observed that chart.js will automatically take value for y-axis based on your data, you can change y/x-axis setting under Options > Scales , I also needed to change step size of y-axis and get rid of x-axis grid line,"ticks" is something I was looking for, here is my sample code and steps to achieved all these.
Step 1) Canvas this is place holder where your chart will display on JSP
<canvas width="1393px;" height="500px;" id="stacked"></canvas>
Step 2) Create sample datasets (this is JSON you need to create based on your requirement but make sure you provide exact the same formated JSON response as given below along with your data.
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Dataset 1',
backgroundColor: "red",
data: [9, 6, 6, 8, 6, 9, 8]
},
{
label: 'Dataset 1',
backgroundColor: "rgba(225,226,228,0.5)",
data: [9, 6, 6, 8, 6, 9, 8]
}]
};
or you can call JSON from controller inside script as below
var jsonArry = <%=request.getAttribute("jsonArry")%>;
Step 3) call that JSON which you have created at step 2
function barChart(){
var context = document.getElementById('stacked').getContext('2d');
var myBar = new Chart(context, {
type: 'bar',
data: jsonArry,
options: {
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
ticks:{
stepSize : 10,
},
stacked: true,
gridLines: {
lineWidth: 0,
color: "rgba(255,255,255,0)"
}
}],
yAxes: [{
stacked: true,
ticks: {
min: 0,
stepSize: 1,
}
}]
}
}
});
};
Hope this will help , for reference I have used following documentation Chart JS
Thanks.
score:2
Just remove the stacked
option and it will stop starting from 0 (unless your data starts from 0).
Related fiddle - http://jsfiddle.net/rsyk9he0/
For stacked charts, Chart.js builds a list of positive and negative sums for each stack (bar) and then uses that to figure out the scale min and max values. If there are no negative values, the list of negative sums is a list of 0s. This forces the scale min to be 0.
scaleStartValue, scaleStepWidth, etc. are options from v1.x of Chart.js. You are using v2.x. See How to make integer scale in Chartjs for the 2.x equivalents.
Source: stackoverflow.com
Related Query
- How can I automatically rescale the y axis of my log chart using ChartJS?
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- How can I make two of my lines in Chart JS thicker
- How can I make a stepline or stepped chart in chart.js or D3?
- How do I change the 'months' language displayed on the date axis in Chart JS?
- How can configure my y-axis on chart.js?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- Chart js: how can I align the legend and the title
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- How can I trigger the hover mode from outside the chart with charts.js 2?
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- How can I make line on chart thinner?
- How can I rotate a pie chart in charts.js?
- How can I configure Chart.js in a Electron app?
- How can I achieve displaying data points on chart but Dotted? Chart.js V3.7.0
- Chart is too big. How can I reduce size for the chart in vue js?
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- How to Remove axis Lines from chart in chart js
- how can i modify scale labels in angular chart js?
- I have 10 points inn x-axis, ranging [-25,-20,,-15,-10,0,10,20,30,40,50]. But I want my line chart to start from -15 of x-axis. How we can achieve?
- How can I style scale numbers in a Polar Area chart (chart.js)
- How can I add a unit to the end of my Y Axis values in ChartJS?
- How can I have different values for the chart and the tooltip in chart.js?
- using react-chartjs-2 , How can I save my chart as png using a download button
- how to minimize x axis labels to day hours in chart js
- how to label axis within radar chart with chart.js
More Query from same tag
- How to display data values on bar graph (chart.js)?
- Add Padding Right to Extended Line Chart in Chart.js V2
- Configuring locale with bundled (CDN) chartjs-adapter-date-fns.bundle.min.js?
- Implementing Data Decimation in vue chartjs
- Is it possible to make chartjs charts scrollable?
- How to display half hour ticks on x-axes
- Changing tooltip color in Chart.js
- chart.js-plugin-annotations multiple horizontal lines in one chart
- Rest Api data fetching error while using chartjs
- Hide all labels and tooltips in Chart.js and make it very small size
- How to set minimal value for bar chart in Chart.js? (ver. 2.0.2)
- How to update the chart dynamically with vue-chartjs?
- Create a pie chart with chartjs package in R
- Error with Chartjs radar pointLabels color Scriptable
- Chart.js combine two pieces of data into one bar
- Is it possible to reverse the display order of segments in polar chart?
- Mixed chart not showing both charts simultaneously chart.js
- Disable chartJS tool tip on one dataset only
- Chart.js chart.update() method is not doing anything
- Where can I download a certain version of d3.js for angular?
- Chart.js – Line Chart Tooltip Labels
- Chart.js v2, remove padding/margin from radar chart
- Is it possible to use mouseenter and mouseleave event in chart js?
- ChartJS: Is it possible to omit last grid line to save space
- How to add background color between two specific lines in Chartjs 3.1
- get yLabel value onclick chart js
- Angular-ChartJs : Use a service inside a custom tooltip of a graphic chartJs
- Best way to connect Django Query results to Chart.js charts?
- Chartjs background color multiple Dataset
- Chart.js hiding lable