score:0
you should define the xaxis
as a time cartesian axis. also you can use property displayformats
according to display formats from chart.js documentation. see moment.js for the allowed format strings.
to do so, add the following to your xaxis
inside the chart options
.
xaxes: [{
type: 'time',
time: {
displayformats: {
minute: 'dd/mm hh:mm'
}
},
...
please note that chart.js uses moment.js for the functionality of the time axis. therefore you should use the bundled version of chart.js that includes moment.js in a single file.
const worldarray = [{ time: 1583593111036, rank: 665 }, { time: 1583593163490, rank: 665 }, { time: 1583593233697, rank: 665 }, { time: 1583594921644, rank: 666 }, { time: 1583595055581, rank: 665 }, { time: 1583595404573, rank: 665 }, { time: 1583596247042, rank: 665 }, { time: 1583598655437, rank: 666 }, { time: 1583600457443, rank: 667 }, { time: 1583601460665, rank: 668 }, { time: 1583602660570, rank: 665 }, { time: 1583604281776, rank: 668 }, { time: 1583605854175, rank: 669 }, { time: 1583606447275, rank: 668 }, { time: 1583607161055, rank: 667 }, { time: 1583607882093, rank: 666 }, { time: 1583608179707, rank: 667 }, { time: 1583609744777, rank: 668 }, { time: 1583609860652, rank: 669 }, { time: 1583610648775, rank: 670 }, { time: 1583613344874, rank: 671 }, { time: 1583613459587, rank: 672 }];
const worldarraytime = worldarray.map(o => o.time);
const worldarraydata = worldarray.map(o => o.rank);
var worldctx = document.getelementbyid('worldchart').getcontext('2d');
var worldchart = new chart(worldctx, {
type: 'line',
data: {
labels: worldarraytime,
datasets: [{
data: worldarraydata,
label: "world",
bordercolor: "#3e95ce",
backgroundcolor: "#3e95ce",
fill: false
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'taric ranking'
},
scales: {
xaxes: [{
type: 'time',
time: {
tooltipformat: 'dd/mm hh:mm',
displayformats: {
minute: 'dd/mm hh:mm'
}
},
ticks: {
maxtickslimit: worldarraydata.length
}
}],
yaxes: [{
ticks: {
min: math.floor(math.min.apply(math, worldarraydata) - 2),
max: math.floor(math.max.apply(math, worldarraydata) + 2)
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.bundle.min.js"></script>
<canvas id="worldchart" height="150"></canvas>
score:0
i decided to use chartist.js since it offers an easier implementation of moment.js
if you know how to answer the question, i'm still interested tho.
Source: stackoverflow.com
Related Query
- ChartJS - How can I skip certain minutes on the X-Axis
- How can I change the color of certain lines in chartjs / vue-chartjs?
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- How can I load multiple Chartjs charts with different data on the same page?
- how can i send a list of numbers from views.py to a chartjs file im using for the front?
- How can I add a unit to the end of my Y Axis values in ChartJS?
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- how can i remove the grid lines in chartJs
- How can I display `Null` value data on Y Axis using the Primitive dataset format in Chart.js V3.7.0?
- How can I pass the data into the chartjs label?
- How can I move chartJs legend left side and change the width and Hight of the chart?
- how can I show only 2 numbers on the xAxe in Chartjs having more than two numbers on the chart? (line chart)
- How to Change the Y axis of an Primefaces 7.0 ChartJS Linechart with Java?
- How can I style ChartJS to always be at the bottom of a div?
- How can I put my label on the right hand side of my chart in Chartjs
- How i can i reduce the borderwidth of a chartjs dougnut chart
- How can I set 3 color to the same chartjs bar?
- How can I automatically rescale the y axis of my log chart using ChartJS?
- In chart.js how can I change the x axis on my line \chart from January-December to October-September? Basically, fiscal year instead of calendar year
- How can I hide the first Y Axis tick mark on ChartJs?
- How to set ChartJS Y axis title?
- How can I control the placement of my Chart.JS pie chart's legend, as well as its appearance?
- How to modify chartjs tooltip so i can add customized strings in tooltips
- How can I increase the size of the pie (Chart.JS)?
- How to remove the line/rule of an axis in Chart.js?
- How to properly use the chartjs datalabels plugin
- How to change the color of legend in chartjs and be able to add one more legend?
- How do I change the 'months' language displayed on the date axis in Chart JS?
- How to change the cursor to a pointer when I hover over a bar in a ChartJS bar chart?
- Chartjs change the specific label color in x axis in callback function
More Query from same tag
- Django chartjs multiple charts stacked
- Chart.js V2 line chart missing point
- Chart.js scatter chart stops working after extending to multiple datasets
- How to resize Chart.JS element in React.js?
- Drawing a line at a fixed angle relative to data with Chart.js
- Chart.js vertical line when hovering and shadow on line
- Update data when pressing submit in chartjs in vuejs
- responsive = false not working
- Is it possible to add a javascript chart in a webview in Xamari.Forms
- How can I display a set amount of ticks on the Y Axis?
- Hover/click area in filled line chart in chart.js
- How to show label for second y-axis in charts.js?
- Chart.js xAxes Date Labels are altered based on screen width
- Chart.js - generateLegend() call results in "undefined is not a function"
- how can i modify scale labels in angular chart js?
- ChartsJS get value of Data/Dataset Label for Tooltip
- Bootstrap tab is working but the tab content is not showing
- Html chart does not fit a small Android WebView
- Why can't I use a variable in same function scope in Javascript?
- Chart.js will not render using vue.js until window resizes
- Stacked bar chart starting from 0 - ChartJS React
- charts.js - json output to graph
- Chart.js - y axis custom label
- Combine multiple columns values to one label in chart.js
- Blank PNG image using Chart JS . toBase64Image() function
- Chartjs is stripping trailing zeros in decimal datasets
- How to display grouped bar chart using chart.js?
- Chart.js Chart Formatting - Legend & Y Axis & Title
- How to hide grid lines and x-axis labels in chart.js?
- Error with Chart.js : TypeError: t is undefined