score:3
Accepted answer
This also won't work in normal is, this is because your scale config is in V2 style while you are using V3.
In v3 every scale is its own object where the key is the scale ID so there are no more arrays. Changing your config to this will make it work:
options: {
scales: {
x: {
type: 'time'
}
}
}
EDIT:
You also need to import and register the time scale and not the category scale for the x axis.
import {
Chart as ChartJS,
TimeScale, //Import timescale instead of category for X axis
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
} from "chart.js";
import { Chart } from "react-chartjs-2";
ChartJS.register(
TimeScale, //Register timescale instead of category for X axis
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);
Source: stackoverflow.com
Related Query
- Time Series Line chart js in react not working
- Time series line chart is not displayed
- Click event of stacked line chart not working
- Stacked line chart not displaying correctly when Xaxis is time
- Chart.js Date and Time Bar Chart Not Rendering - Line Works Though
- 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?
- ChartJS not showing data for time series bar chart
- ChartJS autoskip:False not working on line chart
- Tooltip callbacks in line chart JS not working
- angular chart js type line setting chart-options not working
- show label in tooltip but not in x axis for chartjs line chart
- Chart JS - set start of week for x axis time series
- Angular-chart.js - Make line chart does not curve
- Can't get bar chart colors in Chart js working in React Js
- angular-chartjs line chart TypeError: t.merge is not a function
- Chart.js line chart is not displaying
- How can I create a time series line graph in chart.js?
- AutoSkip: False not working on time xAxes labels
- Line chart is not being displayed in Chart.js
- Series Details Not Showing in Angular Chart with Charts.js
- chartjs-plugin-zoom not working with my React project
- showing tooltips all the time in chartjs 2.4 not working
- ChartJS - radar chart options not working
- Bubble Chart in Chartjs not working
- Chart.js tooltip not showing on line chart
- annotation line not visible in scatter chart in chartjs
- Css style not working well when resizing chart height in angular application
- Line chart doesn't work with type time chart.js
- react-chartjs-2 line chart with time on X-axes with multiple data sets plotted wrong
- code works fine on jsfiddle but one function is not working on website
More Query from same tag
- angular-chart.js doughnut chart : how to show data in the center of a chart
- Chartjs.org Bar chart not scale properly
- Wrong label value is displayed on point hover - Chart.JS
- chart js put meter square / superscript on y axis
- zeroLineColor and zeroLineWidth not working for the x-axis in Chartjs
- Iterating over an array of objects and stack a Chart JS Bar?
- Chart.js Passing an array starting with 1 instead of 0 problem
- Chartjs - destroy() does nothing
- Chartjs v2 stroke shadow
- custom filter charts in chart.js
- ChartJS set yAxes "ticks"
- How to make 2 bar in a certain section of chart
- Chart.js doughnut-like radar chart (no anglelines in the center/empty center)
- PHP/Laravel - Chartjs implode does not function
- ChartJS place y-axis labels between ticks
- My ChartJS dates don't show up correctly from coinranking API
- Angular Chart.js - Remove Moment.js as Dependency / Reduce Bundle Size
- How can I arrange according to month using chart Js?
- format JSON data for chart.js from Angular 4 observable
- I am using chartjs node canvas to render a chart however the graph options are being ignored
- Using loops to create data arrays
- Chart.js doughnut animate/draw clockwise
- How can I remove the grid line in the background of the line chart?
- ChartKick - ChartJs - Legend onClick override with default behaviour
- Auto-Remove old Datapoints in Chart.js
- Display Chart(.js) when mouse hover over: TypeError: t is null
- Is there a way to make a view run without having to show the view in the browser in laravel?
- How to show slice value inside of slice in pie chart using chart.js
- Javascript function to check for missing dates on JSON object
- How to Render Chart Datasets in Vue?