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
- Chart.js - Black bar colors in mobile devices
- ChartJS - Override Attributes (AngularJS)
- Updating a Pie Chart in React as Data is Entered
- Change legend style from bar to line chart.js 2.4.0
- How do I type string in the tooltip in Chart.js?
- Angular chart.js onClick is not working - how to get all elements of a bar when it is clicked on
- Radar chart - show values near vertices in chart.js
- Realtime chart JS in Java obtaining the data from a sensor ;Chart.js: Failed to create chart: can't acquire context from the given item
- How to add background color for doughnut mid using chart,js
- how to pass the value of input to my bar chart
- How to change color of column in chart js
- vue js bar-chart gradient color not showing
- Get bar value when onClick Reactjs
- Chart.js create line graph using dates in the x-axis that reflect real time intervals (not evenly distributed)
- Always Enable Tooltip : Chart JS : V3 : Bubble Chart : react-chartjs-2
- Hide empty bars in Grouped Stacked Bar Chart - chart.js
- Chart.JS Mixed Chart - Bars Not Showing
- Chart.js how to remove final label on chart
- Why Chart.js v2 time based data not aligning with X axis correctly?
- Contrast chart.js datalabels colors with the background
- While placing chart.js Doughnut Chart inside Primeng Carousel, the text inside the canvas seems blurred/distorted a little bit
- Histogram like chart with intensity colored columns and per bin opacity to show intensity
- ChartJS and DiscordJS implementation question
- How to write with good practice?
- Custom Legend ChartJS not showing the text decoration: line through
- Remove the vertical line in the chart js line chart
- PrimeNg Pie Chart - By default show all tooltip?
- HTML Input Form to a Javascript Variable
- ChartJS: Custom legend not showing Labels for Multi-Pie chart
- How can I pass my sqlite data to django, and make chart?