score:0
Another solution that worked great for me, was to just use the line
type for the chart, configure it for using dates for the x axis, and addtionally disable the lines, so that it just looks like a scatterplot.
new Chart(ctx, {
type: 'line',
data: {
datasets: [{
x: 2017-07-08T06:15:02-0600,
y: 23.375
},{
x: 2017-07-08T06:20:02-0600,
y: 23.312
},{
x: 2017-07-08T06:25:02-0600,
y: 23.312
},{
x: 2017-07-08T06:30:02-0600,
y: 23.25
}]
},
options: {
showLine: false,
scales: {
x:{
type: 'time',
display: true,
title: {
display: true,
text: 'Date'
},
},
}
}
}
);
I see this as a quite elegant solution. The documentation even specifies:
The scatter chart supports all of the same properties as the line chart. By default, the scatter chart will override the showLine property of the line chart to false.
score:7
That advice isn't quite right. The javascript moment.js makes it possible to plat scatter data using dates as the x axis value. For some reason the bundled version in Chart.bundle.js wasn't working for me, so I downloaded moment.js directly. I'm using this to setup:
<script src="js/moment.js"></script>
<script src="js/Chart.min.js"></script>
and this for my chart.js data details:
data: [
{x: moment("2017-07-08T06:15:02-0600"), y: 23.375},
{x: moment("2017-07-08T06:20:02-0600"),y: 23.312},
{x: moment("2017-07-08T06:25:02-0600"),y: 23.312},
{x: moment("2017-07-08T06:30:02-0600"),y: 23.25}
],
It's working great!
score:8
According to the documentation of scatter charts:
Unlike the line chart where data can be supplied in two different formats, the scatter chart only accepts data in a point format.
So you can't use values like 2017-07-08T06:15:02-0600
. You can convert dates into numbers and use them in your data.
In your case:
data: [{
x: 1499516102000,
y: 23.375
}, {
x: 1499516402000,
y: 23.312
}, {
x: 1499516702000,
y: 23.312
}, {
x: 1499517002000,
y: 23.25
}
]
Now your xAxes will be with numbers, so you can use a callback
to modify xAxes labels.
Source: stackoverflow.com
Related Query
- time scatter plot w/ chart.js
- Mixed chart scatter plot with chart.js
- Flask with Chart JS Scatter Plot struggle
- How to plot chart from external JSON and format X-AXIS to show time using Chart.JS?
- How to use chart.js to plot line chart with x axis as time stamp in seconds
- Chart.js scatter chart plot data joins start and finish points together
- Chart.js scatter plot fill portions of chart based on value
- How to prevent first/last bars from being cut off in a chart with time scale
- how to plot multiple time series in chartjs where each time series has different times
- Chart JS - Use time for xAxes
- chart.js scatter chart - displaying label specific to point in tooltip
- Chart js display empty plot
- plot a bar chart.js time series
- chartjs: How to plot multi-line chart with irregular intervals
- Chart JS - set start of week for x axis time series
- Chart.js Dynamically Updating Chart with X Axis Time
- Chartjs time plot xAxis shows year 1970
- Category scale on Y-axis and time on x-axis in bubble chart in Chartjs
- Chartjs, plot data based with unequal time intervals
- Using Chart.Js to plot a scatter plot from an Array
- Show image instead a point in a ChartJS scatter plot
- Time series line chart is not displayed
- Time Series Line chart js in react not working
- Dynamically created Chart.js chart overpopulating time based x-axis?
- Non numeric for x-axis in scatter chart in CHART.js
- ChartJs Force scatter plot to be square shaped
- Plot lap times with Chart.js from time strings
- How to access or get value of specific graph on chart plot by click event?
- chart.js v 2.0.1 line, scatter chart pointRadius bug or I'm doing it wrong
- Stacked line chart not displaying correctly when Xaxis is time
More Query from same tag
- Chartjs: How to create padding between ticks and scale label
- Reloading ChartJs Image
- Ng2-Charts Linechart only showing first 2 two values
- Get Value for point clicked on Pie Chart in Chart.js 3
- How to make react-chartjs-2 responsive on mobile?
- Chart.JS value on top disappear when tooltip show up
- Chart.js will not show up second line
- Update ChartJS line chart from DynamoDB query
- Chart.js -- using update() with time scale datasets
- how to put a second pie chart right next to first pie chart inside the bootstrap card
- Highlight area programmatically - Chart.js
- How to change the z-index of chartjs annotations label?
- Populating Chart.Js line graph with multiple lines using data from a JSON Object
- add editable textbox to specific datapoint in a chart
- how to add fill on line diagram?
- How to generate PDF with Chart.js
- Getting "Uncaught TypeError: Cannot read properties of undefined (reading 'map')" when using Chartjs inside react axios method
- Specific grid line in X axis in ChartJs
- code works fine on jsfiddle but one function is not working on website
- Gradient line chart with ChartJS
- Save data from REST API Get method and use it one more time
- Correlating separate elements with different heights to line up along vertical center line
- How can i add an image as background in Chartjs?
- Display chart data based on API call
- Add different labels in a line chart - Chart.js
- Showing Percentage and Total In stacked Bar Chart of chart.js
- Is it possible to remove the border between the segments but leave the border around the pie chart in react-chartjs-2?
- ./~/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js Module not found: Can't resolve 'chart.js/helpers'
- Chartjs line graph dataset with offset
- Trouble with setting background color for Line chart at Chartjs version 3.5.1