score:0
Accepted answer
The scales are part of the options object, if you place it in the options it works just fine:
document.addEventListener("DOMContentLoaded", function() {
var weeklyHistoryChartEl = document.getElementById('weeklyHistory').getContext('2d');
var weeklyHistoryChart = new Chart(weeklyHistoryChartEl, {
type: 'line',
options: {
scales: {
x: {
type: 'time',
parsing: false
}
}
}
});
weeklyHistoryChart.data = JSON.parse('{"datasets":[{"data":[{"x":1625443200,"y":11.74},{"x":1626048000,"y":12.43},{"x":1626652800,"y":34.18}],"label":"Hike","hidden":true},{"data":[{"x":1624233600,"y":5.27},{"x":1630281600,"y":7.32}],"label":"Kayaking","hidden":true},{"data":[{"x":1626652800,"y":17.99}],"label":"NordicSki","hidden":true},{"data":[{"x":1623024000,"y":9.98},{"x":1623628800,"y":15.97},{"x":1624233600,"y":29.07},{"x":1624838400,"y":57.26},{"x":1625443200,"y":15.87},{"x":1627257600,"y":40.73},{"x":1627862400,"y":29.87},{"x":1628467200,"y":58.87},{"x":1629072000,"y":7.62},{"x":1629676800,"y":21.52},{"x":1630281600,"y":6.03}],"label":"Ride","hidden":true},{"data":[{"x":1628467200,"y":0}],"label":"RockClimbing","hidden":true},{"data":[{"x":1623628800,"y":92.45},{"x":1624233600,"y":31.24},{"x":1624838400,"y":23.81},{"x":1625443200,"y":9.39},{"x":1626048000,"y":40.94},{"x":1626652800,"y":12.84},{"x":1627257600,"y":33.59},{"x":1627862400,"y":30.97},{"x":1628467200,"y":31.88},{"x":1629072000,"y":27.88},{"x":1629676800,"y":47.23},{"x":1630281600,"y":48.1}],"label":"Run","hidden":false},{"data":[{"x":1627862400,"y":30.2},{"x":1628467200,"y":36.24},{"x":1629676800,"y":85.58},{"x":1630281600,"y":52.81}],"label":"VirtualRide","hidden":true},{"data":[{"x":1623024000,"y":6.78},{"x":1626048000,"y":5.92}],"label":"Walk","hidden":true},{"data":[{"x":1623628800,"y":0},{"x":1628467200,"y":0}],"label":"Yoga","hidden":true}]}');
weeklyHistoryChart.update();
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"></script>
<canvas id="weeklyHistory"></canvas>
Source: stackoverflow.com
Related Query
- Chart.JS Time Axis Not Parsing
- Chart.js bar chart with time on X axis and category on Y axis is not rendered
- Chart is not rendering properly time axis
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- show label in tooltip but not in x axis for chartjs line chart
- Chart JS - set start of week for x axis time series
- Chart.js Dynamically Updating Chart with X Axis Time
- Time series line chart is not displayed
- Time Series Line chart js in react not working
- Stacked line chart not displaying correctly when Xaxis is time
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Display Time In Y Axis - Bubble Chart
- Chart.js Date and Time Bar Chart Not Rendering - Line Works Though
- ChartJS shows date, but not time, when displaying labels in time axis
- Chartjs does not show annotations when x axis is of type time
- chart js - bar chart with time scale on Y axis in Hours and Minutes
- Chart js data decimation not working, parsing issue
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- ChartJS not showing data for time series bar chart
- Why Chart.js v2 time based data not aligning with X axis correctly?
- How to use chart.js to plot line chart with x axis as time stamp in seconds
- Using epoch as time series on x axis in react-chartjs-2 not showing correct date
- X and Y axis labels not displaying on line chart (Chart.js)
- Time chart labels with some X axis labels using Chart js v3
- Chart JS tick options not working for y axis
- ChartJS time axis not plotting correctly | getting an hour instead of date
- 'Chart.js' time chart not displaying properly
- ng-charts not updating labels when chart data is updated at same time
- hereChartJS Line Chart with Time Axis
- ChartJs line chart time cartesian axis number of ticks and wierd offset
More Query from same tag
- chart cannot read multiple datasets from the back-end (single data is fine)
- Mixed chart barchart won't show
- Chart point hover error
- Convert date label on Y-axis Line Chart to specific date format
- Chart.js dynamically-created charts do not obey chart options
- how to make scrollable the legends of pie chart ( chart js )
- How do I customize y-axis labels on a Chart.js line chart?
- Calculate x and y coords for bullet trajectory - Chart.js
- Chart.js on web-app
- JavaScript variable in an object
- Chart.js animation: onComplete event fired on hover
- Charts with previous data appear when hovering the cursor over the chart in Chart.js
- ChartJS x-axis show only months of year
- Prevent y-axis labels from being cut off
- Chart not rendering with pug/jade and nodejs
- How to add an offset to a dataset in Chart js
- Chart JS date-hour AxesX
- Highlight area programmatically - Chart.js
- How to show labels beside the bar in Char js 2?
- Chart.js doughnut animate/draw clockwise
- impressions in google analytics is zero while sessions and users are more
- create a multi line chart using Chart.js
- Change pointer line style
- Using CSS variables (color) with chart.js - "var(--primaryColor)" not working
- Chartjs - legends take up too much space on mobile devices
- Zoom is very slow in ChartJS Zoom Plugin
- Chart.js Doughnut with rounded edges and text centered
- Chartjs Stacked bar have a stack id per x value
- Stack two y axes using chart.js
- Changing Fonts In Javascript's CanvasJS