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
- angular-chart.js, how to change colours labels
- Chart.JS Underfined with JSON
- Chartjs - Shift line plot to the right?
- Charts.js how to have 2 different size y-axis
- Chart.js in a Vue page throws error: do not mutate vuex store state outside mutation handlers
- How to rename properties in objects that are in an array. What is the right way to solve the task?
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- Resizing a Chart.js chart
- setInterval on myDoughnut animation
- Unix Timestamp Chart.js with PHP echo
- Highlight background on a single hour with chart.js and annotations
- Javascript and Chart.JS - issue with getting unique text in 3 donut hole charts - same text showing for all 3 donut holes
- Chart.js Charts not loading until hard refresh [Laravel] [Laravel Charts]
- Chart.js replace all data
- How can I keep the vertical lines under the horizontal ruler line is chartjs?
- ChartJs functional component does not refresh even when forceUpdate
- How to wait for all items to load within ng-repeat before then rendering a chart for each item
- chart.js how to configure the lable for both axis
- Chart Js, Style some ticks on the axis differently
- How to create a charts in Razor Pages pulling data from the database?
- How to draw a chart with Chart.JS?
- Redraw the old donut and create a new one by clicking on each color Chart.js
- angular 5 chart.js datalabels plugin
- How to draw lines between minimum and maximum value to average value in chartJS?
- Change section element every 20 seconds
- Chart.JS Chart Not Being Generated
- ChartJS: Highlight dataset in a stacked bar chart when hovering over the legend?
- How should i apply date picker in my chart
- Adding condition in ComponentDidMount to display chart data
- Add data to dynamically created Chart.js dataset