score:1
You can use the min and max of the scale to let the scale start and end later:
Example:
var data = [{
"t": 1622287843965,
"y": "35181.38"
},
{
"t": 1622288064247,
"y": "35779.44"
},
{
"t": 1622288261196,
"y": "35681.55"
},
{
"t": 1622288644294,
"y": "35552.49"
}
];
var ctx = document.getElementById('chartJSContainer');
const chartInstance = new Chart(ctx, {
type: "line",
data: {
datasets: [{
label: `Price`,
data: data,
backgroundColor: "rgba(134,159,152, 1)",
borderColor: "rgba(174, 305, 194, 0.4)"
}],
},
options: {
parsing: {
yAxisKey: 'y',
xAxisKey: 't',
},
scales: {
x: {
display: true,
type: 'time',
min: 1622287643465,
max: 1622288844294
}
},
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.1/dist/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
Documentation: https://www.chartjs.org/docs/master/axes/cartesian/time.html#common-options-to-all-axes
Source: stackoverflow.com
Related Query
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- How to plot chart from external JSON and format X-AXIS to show time using Chart.JS?
- How do i have a single Chart.vue component instead of different chart components and then display charts from it by changing id of the API
- How to set the data of chart in angular which is taken from the backend nodejs api that is store in mongodb and showing on the html page
- chart js tooltip how to control the data that show
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- How to show data values in top of bar chart and line chart in chart.js 3
- How do I keep chart.js charts in one JS file, and not get errors when the ID from the JS file don't exist on one specific html page?
- Angular chart how to show the legend data value by default along with legend name
- How to set the xAxes min and max values of time cartesian chart in Chart.js
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- How to show tooltip value of all data falling on the same axis in chart js?
- How to show the chartjs bar chart data values labels as text?
- How to stop displaying the data values from different data objects on Chart JS 2.x?
- How to plot a line chart which has both the start and points outside the canvas area using Chart.js
- How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- Chart.js how to show line chart without displaying the labels on xaxis and yaxis
- How to show tick marks and labels with grid line for the specific one on the X axis with Chart.js?
- angular-chart.js doughnut chart : how to show data in the center of a chart
- Chart.js how to make chart only show the most recent data
- How to take data from an API and create a chart on that using Chart.js and Angular 8?
- How to get a value from function javascript and print it to the chart
- How to prevent first/last bars from being cut off in a chart with time scale
- Chart JS show multiple data points for the same label
- How to hide the y axis and x axis line and label in my bar chart for chart.js
More Query from same tag
- Custom background limits for Doughnut (Gauge)
- Bar Chart With 2 Different Attribute Of The Same Variable [Chart.Js]
- Page break in Angular with Chartjs and tables
- build dynamic array for charts.js
- While placing chart.js Doughnut Chart inside Primeng Carousel, the text inside the canvas seems blurred/distorted a little bit
- How to noshown the scale while all datasets is hidden (chartjs)?
- chart.js fixed bar width issue
- destroy multiple charts on same page
- Customize ChartJS Hover Data Format
- How do you use user input as data values in chart.js?
- build a javascript callback function from php for chartjs
- TopoJson and ChartGeo/ChartJS: Unexpected geomerty
- How to pass a fetched object from App.js to a child component asynchronously in ReactJS v16+
- (Ionic 3) How to make font size of labels in charts.js responsive?
- I cant get Legend to work for my chartjs donut chart
- ChartJS - adding scroll to horizontal legend in Line chart
- How to make a chart with chartjs and Angular?
- Can't change labels' font color. Chartkick Ruby on rails
- Resize pie chart from chart.js
- How does chart updating works within the context of react?
- how to align count text center in horizontal bar in the Chart.js?
- How to remove square label from tooltip and make its information in one line?
- ChartJS custom bar chart
- Cannot create Chart using Chart.JS @ 2.9.4
- how do I use for loop inside script tag in ejs
- Chart.js not showing up on online site
- create a multi line chart using Chart.js
- How to apply data dynamically on initialisation for chart.js in angular?
- angular chart js set fill color of bar chart
- Html canvas element resets width and height to zero after drag/drop