Menu
Problem: As you can see...the first and last bar are cut in half...
Expectation: Display the first bar and last bar in full.
Evenly distribution is a must which is achieved via unitStepSize...
var data = {
labels: ["2015-05-01", "2015-05-02", "2015-05-03", "2015-05-04", "2015-05-05", "2015-05-06", "2015-05-07", "2015-05-08","2015-05-09","2015-05-10", "2015-05-11", "2015-05-12", "2015-05-13", "2015-05-14", "2015-05-15", "2015-05-16", "2015-05-17", "2015-05-18","2015-05-19","2015-05-20", "2015-05-21", "2015-05-22", "2015-05-23", "2015-05-24", "2015-05-25", "2015-05-26", "2015-05-27", "2015-05-28","2015-05-29","2015-05-30"],
datasets: [{
label: "My First dataset",
//new option, type will default to bar as that what is used to create the scale
type: "line",
fill: false,
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 4, 81, 56, 55, 40, 12, 33, 22, 25, 4, 19, 56, 55, 40, 12, 33, 65, 59, 4, 16, 56, 55, 40, 12, 33, 66, 78, 55]
}, {
label: "My Second dataset",
//new option, type will default to bar as that what is used to create the scale
type: "bar",
fill: false,
pointColor: "rgba(220,20,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [32, 25, 33, 88, 12, 92, 33, 28, 22, 32, 25, 33, 88, 12, 92, 33, 28, 22, 32, 25, 33, 88, 12, 92, 33, 28, 22, 90,91, 21]
}]
};
var options = {
scales: {
xAxes: [{
type:'time',
categoryPercentage: 0.1,
time:{
unit:'day',
unitStepSize:10
},
ticks: {
maxRotation: 0,
minRotation: 0
}
}],
}
};
var ctx = document.getElementById("myChart");
var myLineChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
678
A stacked chart is a form of bar chart that shows the composition and comparison of a few variables, either relative or absolute, over time. Also called a stacked bar or column chart, they look like a series of columns or bars that are stacked on top of each other.
Bar charts are created by setting type to bar (to flip the direction of the bars, set type to horizontalBar ). The colors of the bars are set by passing one color to backgroundColor (all bars will have the same color), or an array of colors.
Horizontal bar graphs represent the data horizontally. It is a graph whose bars are drawn horizontally. The data categories are shown on the vertical axis and the data values are shown on the horizontal axis.
Following are some simple steps to do so: Step 1: Create a React application using the following command. Step 2: After creating your project folder i.e. BARCHART_REACT, move to it using the following command. Step 3: After creating the ReactJS application, Install react-chartjs-2 and chart.
This worked for me:
xAxes: [{
offset: true,
}]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
