score:0
Accepted answer
now you have the correct syntax, you'd need to import the correct library as well. as i can see in the piece of code you gave, you imported
finally, i also noticed in your code you had a problem displaying tooltips for the red dataset. it is because you defined its color as
first of all, since the documentation is messy, i'm not surprised you didn't get how to create a time-scale chart. the actual call is the following :
window.myscatterxx = chart.scatter(ctx, {
data: chartdata,
options: {
title: {
display: true,
text: "it is now working",
fontsize: 36
},
scales: {
xaxes: [{
// this is the important part
type: "time",
}]
}
},
});
now you have the correct syntax, you'd need to import the correct library as well. as i can see in the piece of code you gave, you imported
chart.min.js
, but you need more since you know work with the time element.
you can either :
import
chart.bundle.min.js
, that contains both moment and chart libraries.
finally, i also noticed in your code you had a problem displaying tooltips for the red dataset. it is because you defined its color as
red
. change it to red
and tooltips will work again :
datasets: [{
bordercolor: 'red',
label: 'capital r in bordercolor, tooltips now work',
data: [
// ...
]
}]
you can see all these fixes live in this jsfiddle, and here is the final result :
Source: stackoverflow.com
Related Query
- Time Series Line chart js in react not working
- Click event of stacked line chart not working
- ChartJS - radar chart options not working
- Bubble Chart in Chartjs not working
- Css style not working well when resizing chart height in angular application
- code works fine on jsfiddle but one function is not working on website
- Chartjs not working with d3 from csv source
- in chart js tooltip font size is not working
- Chart JS not working with date
- Background color of the chart area in chartjs not working
- Chartjs with Vue, Bar Chart Border Radius not working
- Chart.js bubble chart pointStyle not working
- Charts.js - Colors for stacked bar on multi-series line/bar chart are not working
- Charts.js - Bar chart different colors for value intervals not working
- Chart JS not working with Phonegap
- Legend color not working with randomly generated background colors in chartjs pie chart
- Vertical align bar chart from chart.js not working
- chart js download to png with canvas.toDataURL() not working in IE and firefox
- vue-chartjs not working properly in flexbox and when resize chart goes blank
- chart.js legend not working for pie chart
- Chart JS not working with Dynamic Data
- ChartJS autoskip:False not working on line chart
- Destroying chart.js is not working when chart created inside function - chart.destroy() is not a function
- Chart JS tick options not working for y axis
- Trying to create a custom tooltip in a doughnut chart using chartsjs, but it is not working
- Chart js not working properly in Safari
- 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
- Tooltip callbacks in line chart JS not working
- Chart js plugin annotation not working in vue
- Chart js :Adding onclick event on slice of doughnut chart is not working in react-chartjs-2
More Query from same tag
- Data Labels are getting cut off on the top
- Chart.js options and documentation
- Save data from REST API Get method and use it one more time
- ChartJS rotate label value vertical
- ChartJS v2 - Keep tooltip open when user click on a point of a multiple lines chart
- Dynamically change type with react-chartjs-2 React
- Trying to set scale ticks beginAtZero using Chart.js is unsuccessful, why?
- Add border to Chart.js tooltips
- Chart Js + Angular
- Django Time Series with Chart JS
- How to change default label of each bubble in bubble chart using chartjs-plugin-datalabels
- How to pass an array to chart.js data:[] while creating a chart in php
- How to make x-axis start from 0 in chart.js graphs?
- Show multiple charts at HTML page?
- Chartjs - Loop thru dataset and assign colors
- Vue.js Vue-chart.js linear gradient background fill
- Chart JS - Make chart scrollable if too much data
- getBoundingClientRect gives incorrect value
- Multiples values in yAxes with same xAxes
- how do I break a comma separated string into new lines in tooltip callbacks afterBody?
- Chart.js - changing tick / label positions for x axis time series
- Dynamic chart codeigniter
- Angular 2 Chart.js and NG2-Charts Not Binding Data Objects After Updates To Project
- Chartjs - How to get last 7 days on x-axis labels?
- Chart.js: Don't stretch axes beyond chart
- How do I remove the y-axis labels from a graph?
- Resize chart.js canvas for printing
- Scatter plot in Chart.js with annotations
- Chart js Datalabels styling
- Ng2 ChartData filled with observable