score:1
Accepted answer
you should add option offset: true
to the x-axis as follows:
xaxes: [{
type: 'time',
offset: true,
please take a look at your amended code and see how it works.
var ctx = document.getelementbyid("chart").getcontext('2d');
var recentactivitychart = new chart(ctx, {
type: 'bar',
data: {
labels: ['2020-01-01', '2020-01-02', '2020-01-03'],
datasets: [{
label: 'hours',
data: [60, 44, 43],
barthickness: 12,
backgroundcolor: "rgba(54, 162, 235, 1)",
bordercolor: "rgba(54, 162, 235, 1)",
borderwidth: 1
}]
},
options: {
animation: {
duration: 1000,
easing: "linear",
},
responsive: true,
maintainaspectratio: true,
legend: {
display: false,
position: 'bottom',
usepointstyle: true,
labels: {
fontcolor: "grey",
usepointstyle: true,
},
},
scales: {
yaxes: [{
gridlines: {
display: true,
borderdash: [8, 4],
},
scalelabel: {
display: true,
labelstring: 'hours',
},
ticks: {
beginatzero: false,
}
}],
xaxes: [{
type: 'time',
offset: true,
time: {
unit: 'day',
displayformats: {
day: 'dd-mm-yyyy'
},
},
gridlines: {
scaleshowverticallines: false,
display: false,
},
ticks: {
beginatzero: false,
}
}]
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.bundle.js"></script>
<canvas id="chart" width="400" height="200"></canvas>
Source: stackoverflow.com
Related Query
- chartjs chart spilling out of container
- VueJS + Chartjs - Chart only renders after code change
- ChartJS Line Chart - Points Connected out of order for Timeseries in Angular 6
- Chartjs Custom Legend for Doughnut Chart Having Labelled Lines Sticking Out of Each Section
- Dynamically update values of a chartjs chart
- Chartjs Bar Chart showing old data when hovering
- Chart area background color chartjs
- Chartjs v2.0: stacked bar chart
- Chartjs random colors for each part of pie chart with data dynamically from database
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- ReferenceError: Chart is not defined - chartjs
- ChartJS - Draw chart with label by month, data by day
- Changing fontFamily on ChartJS bar chart
- Display line chart with connected dots using chartJS
- chartjs : how to set custom scale in bar chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Dynamically update the options of a chart in chartjs using Javascript
- chartjs tooltip is cut off when out of canvas
- chartjs datalabels change font and color of text displaying inside pie chart
- How to fix chart Legends width-height with overflow scroll in ChartJS
- Chartjs Bar Chart Legend
- Chart.js responsive option - Chart not filling container
- show label in tooltip but not in x axis for chartjs line chart
- chartjs show dot point on hover over line chart
- Click event on stacked bar chart - ChartJs
- ChartJS add tooltip to a grouped bar chart
- ChartJs line chart repaint glitch while hovering over
- Display values outside of pie chart in chartjs
- ChartJS bar chart with legend which corresponds to each bar
- chartjs height does not follow parent container
More Query from same tag
- my anchor tags are not working in my website after i added chart.js in it
- How to slice list items in Django Template using javascript (or similar)
- How can I tighten letter spacing on labels with ChartJS?
- ChartJS hide labels on small screen sizes
- Horizontal bar with two yaxes chart js
- Execute 'onscroll' function only once
- Get data from dynamic ID for Chart.js
- How do I display chart on my HTML page based on JSON data sent by Node JS
- chart js and json, chart not showing up
- ChartJs - Labelling minimum and maximum value of the Y Axis
- Chart Click Event - Clicking label of doughnut chart, doesn't return label ng2-charts
- Chart js x-axis values getting repeated twice
- How to make multiple stacked charts to share the same yAxis?
- subcategories for each bar in multibar chart using chartjs
- Chart JS 2 Tick Label Border
- Can't get data into my Javascript function using Django
- Chart.js error: Bar is not a function
- Why wont the json_encoded data show
- While placing chart.js Doughnut Chart inside Primeng Carousel, the text inside the canvas seems blurred/distorted a little bit
- How to only draw the graph and the Xaxis gridlines using chart.js
- Error: Cannot read property 'props' of undefined, Calling parent Method in Child
- React without npm - is it possible to import libraries / modules?
- Increase space between largest bar and top grid line in charts.js
- Unable to access list elements in Django Webpage
- ChartJS get data from Controller
- ChartJS How to set max labels for X axis?
- Is there a way to change color of a chart's grid in y-axis - ng2-charts
- How to make Chart.js with dynamic months on x-axis
- Chart.js V2 ticklines no grid
- How to set max and min value for Y axis