score:0
Accepted answer
your chart config looks just fine after change type: 'time'
to type: 'time'
. you can run the version below, which substitutes your python template variables.
here are some other things to check
- after correcting the
type
typo, look for console errors. - make sure moment.js is loading correctly.
- check the versions of moment.js and chart.js (example below uses 2.26.0 and 2.9.3 respectively).
- provide the actual html source (instead of the template), because if it's still broken it implies something wrong with the templating/passing values.
const config = {
// the type of chart we want to create
type: 'line', //types: bar, horizontalbar, pie, line, doughnut, radar, polararea
// the data for our dataset
data: {
labels: [new date('2019-12-19t13:36:29-08:00'), new date('2019-12-19t13:36:59-08:00'), new date('2019-12-19t13:37:29-08:00'), new date('2019-12-19t13:37:59-08:00'), new date('2019-12-19t13:38:29-08:00')],
datasets: [{
label: 'test string dates',
backgroundcolor: 'rgba(255, 99, 132, 0)',
bordercolor: 'rgb(117, 4, 28)',
borderwidth: 1,
hoverborderwidth: 3,
hoverbordercolor: '#000',
data: [0.05, 0.07, 0.15, 0.08, 0.05],
}]
},
options: {
title: {
display: true,
text: 'test string date time',
fontsize: 25,
},
legend: {
//display:false //to hide legend
position: 'right',
labels: {
fontcolor: '#000'
}
},
tooltips: {
//enabled:false,
},
scales: {
yaxes: [{
scalelabel: {
display: true,
labelstring: 'mg/m3',
fontcolor: '#000',
fontweight: 'bold',
fontsize: 25
}
}],
xaxes: [{
type: 'time',
time: {
parser: 'hh:mm:ss a', //these formatting values do nothing, i've tried a few different ones
unit: 'second', //i have tried minutes and hours too, same result
displayformats: {
'millisecond': 'hh:mm:ss a', //i have tried without the 'a' too, same result
'second': 'hh:mm:ss a',
'minute': 'hh:mm:ss a',
'hour': 'hh:mm:ss a',
'day': 'hh:mm:ss a',
'week': 'hh:mm:ss a',
'month': 'hh:mm:ss a',
'quarter': 'hh:mm:ss a',
'year': 'hh:mm:ss a',
}
},
ticks: {
source: 'auto'
},
scalelabel: {
display: true,
labelstring: 'recording time',
fontcolor: '#000',
fontweight: 'bold',
fontsize: 25
}
}]
},
responsive: true,
maintainaspectratio: false,
elements: {
point: {
radius: 0
},
line: {
tension: 0
}
},
}
};
const ctx = document.getelementbyid('canvas').getcontext('2d');
new chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.js"></script>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
Source: stackoverflow.com
Related Query
- Chart JS - set start of week for x axis time series
- Chart.js Dynamically Updating Chart with X Axis Time
- How do I change the 'months' language displayed on the date axis in Chart JS?
- chartjs time cartesian axis adapter and date library setup
- 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
- Adding a Date adapter for Time Cartesian axis from a cdn
- chart js - bar chart with time scale on Y axis in Hours and Minutes
- chart.js 3 and time axis displays wrong date data
- I am using chart.js I sent my time values throw my api as timestamp know i need to show them in the chart as date format
- Chart.js Chart Formatting - Legend & Y Axis & Title
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- Chart.js x axis date-time formatting fails
- Adding hours and minutes to a date object for time axis
- 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
- Time chart labels with some X axis labels using Chart js v3
- Chart.js bar chart with time on X axis and category on Y axis is not rendered
- date and time chart With Chart js
- Chart is not rendering properly time axis
- ChartJS time axis not plotting correctly | getting an hour instead of date
- How can I highlight/format a specific date label (e.g. today) on a time axis using chart.js?
- hereChartJS Line Chart with 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
- ChartJs line chart time cartesian axis number of ticks and wierd offset
- Not all date data shows on x axis line chart
- ChartJS fails to render one of the lines in cartesian chart following update after change to max Y axis label value
- Is it possible to pot a line chart of date vs time in ChartJS?
- Chart for Real time data with duplicate x axis
More Query from same tag
- NPM module doesn't work with Webpack 3 but works with vue-cli3 which based on Webpack 4
- How to set vertical lines for new day on x-axis in ChartJS v3.x
- Is there an option in chart.js to hide values in the graph legend
- tooltip messes up bar chart in Chart.js
- Chart.js won't display percentage label when value is above 1000?
- Export Canvas Charts to png and pdf
- Chart.js - generateLegend() call results in "undefined is not a function"
- Show date on xAxes without labels
- Line graph with linear timescale in Chart.js
- Equal distance grouped bar chart irrespective of scale - chart.js
- How to add several labels to the same set of data in chartjs?
- Chart.js Label Issue
- chartJS label on each side of the chart
- Split assoc array by keys
- How to parse time 'HH:MM:SS' and display steps on xAxis every minute in Chart.js
- Chart.js line graph doesn't show up most of the time
- chartjs: How to remove specific label
- Chart.js on web-app
- ChartJS works with Angular 5 while developing, but ng build fails
- Using and reading a variable from Knockout.js in Chart.js
- How to create two pie charts using Chart.js API?
- Draw bubbles to show details in line chart using chart js
- Rounded corners on chartJS v.2 - bar charts (with negative values)
- Charts.js - Colors for stacked bar on multi-series line/bar chart are not working
- chartjs line graph destroy function is not clearing the old chart instances
- Importing JSON to data and labels for chart.js
- How to convert Data table to Json in Javascript
- Update angular-chart.js on filtered list
- Is there any configuration in chart.js v2 that allows bar's to start from some number instead of origin?
- How is it possible to make curved bar chart or curved column charts in chart.js?