score:13
time scale works only for x axis.
but for y you can use a linear
scale and express each time as date in milliseconds since 1970-01-01
(how the usual date
object does).
plunker or use the following example:
$(function(){
const ctx = document.getelementbyid('mychart').getcontext('2d');
let years = ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"];
let times = ["11:46:07", "11:41:14", "11:55:26", "12:14:58", "11:54:55", "11:54:04", "12:28:29", "12:35:18"];
let data = years.map((year, index) => ({
x: moment(`${year}-01-01`),
y: moment(`1970-02-01 ${times[index]}`).valueof()
}));
let bckcolors = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#565452", "#321456", "#129864", "#326812", "#215984"];
let mychart = new chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: "time",
backgroundcolor: 'rgba(188, 229, 214, 0.7)',
pointbackgroundcolor: bckcolors,
data: data,
pointborderwidth: 2,
pointradius: 5,
pointhoverradius: 7
}
]
},
options: {
scales: {
xaxes: [
{
type: 'time',
position: 'bottom',
time: {
displayformats: {
years: 'yyyy'
},
unit: 'year'
}
}
],
yaxes: [
{
type: 'linear',
position: 'left',
ticks: {
min: moment('1970-02-01 00:00:00').valueof(),
max: moment('1970-02-01 23:59:59').valueof(),
stepsize: 3.6e+6,
beginatzero: false,
callback: value => {
let date = moment(value);
if(date.diff(moment('1970-02-01 23:59:59'), 'minutes') === 0) {
return null;
}
return date.format('h a');
}
}
}
]
}
}
});
});
<html>
<head>
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/moment@2.14.1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.5.0/chart.min.js"></script>
</head>
<body>
<canvas id="mychart" width="500" height="300"></canvas>
</body>
</html>
explanation
you can have the years on x axis which can be a linear
, time
or category
scale.
in this example x axis is a time
scale.
the following code is used to generate values for x
and y
axis:
let data = years.map((year, index) => ({
x: moment(`${year}-01-01`),
y: moment(`1970-02-01 ${times[index]}`).valueof()
}));
for x
axis i used moment js
to create a date on the first day of the corresponding year.
for y
axis i used moment js
to create the date in milliseconds since 1970-01-01
. in this case all hours are combined with a day to form a date. 1970-02-01
in order to prevent an edge cases that may happen for 1970-01-01
. then these milliseconds, since 1970-01-01
, are used with the y
axis linear scale
.
y
axis tick.callback
is used to format the corresponding milliseconds to an hour. thus using the format h a
to obtain for example 1 am, 1 pm, 12 am, 12 pm, ...
.
Source: stackoverflow.com
Related Query
- Chart JS - set start of week for x axis time series
- time series stream, removing am/pm on x axis and 24 hour format
- Chart.js Dynamically Updating Chart with X Axis Time
- Format Y axis of Chart.JS as 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
- 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
- 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 with Time axis only displaying first grid line and tick label (unitStepSize)
- chart.JS time axis labels should be just in hours format
- How to use chart.js to plot line chart with x axis as time stamp in seconds
- 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
- Time format on the x axis in Chart.js
- Chart is not rendering properly time axis
- 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
- Chart for Real time data with duplicate x axis
- In Chart.js set chart title, name of x axis and y axis?
- How to format x-axis time scale values in Chart.js v2
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- How to prevent first/last bars from being cut off in a chart with time scale
- Chart Js change text label orientation on Ox axis
- Chart JS - Use time for xAxes
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- show label in tooltip but not in x axis for chartjs line chart
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- How do I change the 'months' language displayed on the date axis in Chart JS?
More Query from same tag
- Unable to hide Legend in Chartjs with PrimeFaces7.0
- How to add custom tooltips to only one label in Chart.js?
- Chart js with problems when using too many series
- Chart to update from a drop down selection
- ChartJS large data range
- how to determine which bar was clicked on a chart js
- How can I set a class to a HTML element which is created by custom tooltip function?
- php to json to chart.js
- "export 'default' (imported as 'Chart') was not found in 'chart.js'
- How to disable chartjs legendclick
- ChartJS Only Show Large Font Size for a Specific Tick
- ChartJS click on bar and change it's background color
- How do I use the return values from csv ajax request for x and y values?
- Why ChartJS's Bar Chart does not render bar for a specific value?
- chart.js won't display the chart in IE
- Two independent time axes in Chart.js
- Chart.js - How does it calculate Y-Axis on bar chart?
- Chart.js Customize tool tip to show more data
- Chartjs xaxes tick min
- Primefaces charts replaced by chartJS?
- How to remove color label on tool tip?
- Chart JS Line insert Picture
- How to update data from ajax call (chart.js)
- chartjs stepSize by 5
- protoype js 1.0.6 is conflicting with chart js
- How to generate dynamic bar chart in laravel using chart.js
- Displaying labels on a Doughnut Chart using Chart.js
- Remove Canvas then add new Canvas in same spot
- Set Animation speed - ChartJS?
- Font size will not change Chart.js version 3.2.1