score:53
Accepted answer
there's a setting called offset which seems to work for me:
xaxes: [{
offset: true
}]
var graphdata = {
dates: [
'2016-06-01',
'2016-07-01',
'2016-08-01',
'2016-09-01',
'2016-10-01',
'2016-11-01',
'2016-12-01',
'2017-01-01',
'2017-02-01',
'2017-03-01',
'2017-04-01',
'2017-05-01'
],
wins: [23, 5, 13, 24, 8, 11, 23, 5, 13, 24, 8, 11],
draws: [2, 1, 2, 0, 2, 2, 3, 1, 2, 4, 0, 1],
losses: [3, 1, 2, 10, 8, 8, 3, 1, 2, 10, 8, 8],
winrates: [50, 40, 72, 30, 46, 80, 50, 40, 72, 30, 46, 80]
};
var winsmax = math.max.apply(math, graphdata.wins);
var lossesmax = math.max.apply(math, graphdata.losses);
var ctx = document.getelementbyid("mychart");
var mychart = new chart(ctx, {
type: "bar",
data: {
labels: graphdata.dates.map((date) => moment(date)),
datasets: [
{
type: "bar",
backgroundcolor: "green",
hoverbackgroundcolor: "green",
data: graphdata.wins,
yaxisid: "winsandlosses"
},
{
type: "bar",
backgroundcolor: "red",
hoverbackgroundcolor: "red",
data: graphdata.losses.map((i) => -i),
yaxisid: "winsandlosses"
},
{
type: "line",
data: graphdata.winrates,
fill: true,
backgroundcolor: "gray",
pointradius: 0,
pointhoverradius: 0,
yaxisid: "winrate"
}
]
},
options: {
legend: {
display: false
},
scales: {
xaxes: [{
type: "time",
time: {
unit: "month",
displayformats: {
month: "mmm"
}
},
stacked: true,
gridlines: {
display: false
},
ticks: {
callback: (label) => label.touppercase(),
fontsize: 10
},
offset:true
}],
yaxes: [
{
id: "winsandlosses",
stacked: true,
ticks: {
min: (lossesmax + 10) * -1,
max: winsmax + 10,
callback: (label) => math.abs(label) // todo: localization (number formatting).
},
display: false
},
{
id: "winrate",
ticks: {
min: 0,
max: 100,
stepsize: 10,
callback: (label) => label + "%", // todo: localization (number formatting).
fontsize: 10
}
}
]
}
}
});
.mychartdiv {
max-width: 800px;
max-height: 400px;
}
<script src="https://npmcdn.com/chart.js@latest/dist/chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<html>
<body>
<div class="mychartdiv">
<canvas id="mychart" width="800" height="400"></canvas>
</div>
</body>
</html>
Source: stackoverflow.com
Related Query
- How to prevent first/last bars from being cut off in a chart with time scale
- How do I prevent the scale labels from being cut off in chartjs?
- How to stop axis label from being cut off in chart JS?
- Prevent y-axis labels from being cut off
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- How to set a time scale to a ChartJS chart from JSON?
- How to prevent empty bars from taking up width in Chart.js bar chart
- ChartJS Bar chart with time scale - Bars overlap with each other
- Chart.js Bar Chart - how to chart bars from 0
- chart.js v2: Align time scale labels with the center of the bars
- How can I trigger the hover mode from outside the chart with charts.js 2?
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to create chartjs chart with data from database C#
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- How to create Bar chart that gets updated from new ajax requests with ChartJS?
- How to prevent tick labels from "jumping" when drawn with ChartJS BeforeDraw
- How to plot chart from external JSON and format X-AXIS to show time using Chart.JS?
- chart js - bar chart with time scale on Y axis in Hours and Minutes
- How do you make a progressive line chart with time as the X axis?
- How to create a chart with chartjs.org with data from an array?
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- How to use chart.js to plot line chart with x axis as time stamp in seconds
- ChartJS - Horizontal Stacked Bar Chart Tooltip being cut off by Bottom of Canvas
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- How to load new chart (chartsjs) from api call with jquery?
- Chart js legend are being cut off if the bar height is equal to port height - chart js
- How to create a chart.js scatter chart with data from two lists
- How to use computed property with data from JSON in data object for time axis in Vue using Chart.js
- How to use log scale with Chart Kick?
- How to fill my chart (chart.js) with my own data from API
More Query from same tag
- How to use a Data Array within a Chart JS dataset?
- Unable to make the x-zoom to work when xAxes type is different from 'time'
- Can't generate multi-axis combo chart (bar/line) using chart.js 2.7
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Copy div content to dynamically create a modal window:possible?
- Django Chart.js ajax javascript "string data parsing error"
- Show base64 image next to canvas with charts.js
- Difference between DXTREME and PhoneGap
- How to shade a portion of the background of ChartJS bubble chart?
- Add DataSet Bar Chart - Chart.JS
- Loop through multiple rows as labels and data in chart.js and PHP
- Editing Chart.js legend template
- ChartJs - width scale of chart area and label area
- How to add multiple background color in line charts
- Update data from server for ChartJS graph
- Chart.js coming up as blank
- Chart JS tick options not working for y axis
- How to make Radar chart's tooltips show "labels" in vue-chartjs?
- Vuejs - Chartjs - turning a doughnut chart to a gauge - rotation
- Missing Tooltip for some data points using chartjs
- PrimeFaces PolarArea Chart - GridLine Color Change
- Mixed Diagram (Line/Bar) with two y-Axis won't display data on 2nd Axis
- Chart.js how to resend animation command to a chart?
- Do not rotate scale title at xAxis
- Different color for line segments in ChartJS
- how to add percentage value to legend field in pie chart using chart.js
- chart.js LIne Graphs: Fill area above line as opposed to below and to the right
- add value to Line chart.js
- How scale sector in doughnut chartjs on hover?
- How to make the chart smaller than its container