score:23
i had a battle with this today too. you need to get a bit more specific with your dataset. in a line chart "datasets" is an array with each element of the array representing a line on your chart. chart.js is actually really flexible here once you work it out. you can tie a line (a dataset element) to an x-axis and/or a y-axis, each of which you can specify in detail.
in your case if we stick with a single line on the chart and you want the "time" part of the entry to be along the bottom (the x-axis) then all your times could go into the "labels" array and your "number" would be pin-pointed on the y-axis. to keep it simple without specifying our own scales with x and y axes and given this data:
var mydata = [{time:"10:00", number: "127"},
{time:"11:00", number: "140"},
{time:"12:00", number: "135"},
{time:"13:00", number: "122"}];
you could set up the "data" property of your chart to be:
var data = {
labels: ["10:00", "11:00", "12:00", "13:00"],
datasets: [
{
label: "my first dataset",
// insert styling, colors etc here
data: [{x: "10:00", y: 127},
{x: "11:00", y: 140},
{x: "12:00", y: 135},
{x: "13:00", y: 122}]
}
]};
note that the data array is now a bit more specific with each element of data plotting itself on the x-axis by referencing one of the labels rather than just being a raw number. you can now put another dataset object in the datasets array following this pattern and have two lines, obviously give your lines different colours and names ("label").
hope this helps.
score:4
since there's a number of questions in your post, i'll try to help out with at least some of them. in the case of your entry model with a number and a time you should create a scattered graph. here you define data objects with x and y values as shown in my example below. it requires that each entry x has a corresponding y. have a look at the scatter chart. http://www.chartjs.org/docs/#line-chart-scatter-line-charts
var d = new date();
var scatterchart = new chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'scatter dataset',
data: [{
x: new date().setdate(d.getdate()-5),
y: 0
}, {
x: new date(),
y: 10
}, {
x: new date().setdate(d.getdate()5),
y: 5
}]
}]
},
options: {
scales: {
xaxes: [{
type: "time",
time: {
format: "hh:mm",
unit: 'hour',
unitstepsize: 2,
displayformats: {
'minute': 'hh:mm',
'hour': 'hh:mm'
},
tooltipformat: 'hh:mm'
},
gridlines: {
display: false
}
}],
}
}
});
score:12
i found a really good solution here: https://github.com/chartjs/chart.js/issues/3953
basically, you can add in your own 'labels' property to each dataset and leverage it in the callbacks for the xaxes labels, tooltips, or whatever you like.
var ctx = $("#mychart");
var mychart = new chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [1, 2, 3, 4, 5],
backgroundcolor: [
'green',
'yellow',
'red',
'purple',
'blue',
],
labels: [
'green',
'yellow',
'red',
'purple',
'blue',
]
}, {
data: [6, 7, 8],
backgroundcolor: [
'black',
'grey',
'lightgrey'
],
labels: [
'black',
'grey',
'lightgrey'
],
},]
},
options: {
responsive: true,
legend: {
display: false,
},
tooltips: {
callbacks: {
label: function(tooltipitem, data) {
var dataset = data.datasets[tooltipitem.datasetindex];
var index = tooltipitem.index;
return dataset.labels[index] + ': ' + dataset.data[index];
}
}
}
}
});
what's important here is this piece:
tooltips: {
callbacks: {
label: function(tooltipitem, data) {
var dataset = data.datasets[tooltipitem.datasetindex];
var index = tooltipitem.index;
return dataset.labels[index] + ': ' + dataset.data[index];
}
}
}
Source: stackoverflow.com
Related Query
- Chart.js Line-Chart with different Labels for each Dataset
- chart.js Line chart with different background colors for each section
- How to display Line Chart dataset point labels with Chart.js?
- Chart.js - Line charts with different colors for each border lines
- ChartJS/High Charts Radar chart - Different radial axis labels for each category that appear on hover
- 2 Line Chart with different labels | Chart.js
- Chart.js manipulate each bar in chart with different labels
- Different labels needed for second line graph, chart js
- Chartjs random colors for each part of pie chart with data dynamically from database
- Chart.js how to show cursor pointer for labels & legends in line chart
- Chart.js Mixed Bar and Line chart with different scales
- Different color for each column in angular-chartjs bar chart
- Can I specify a different font size for each row of text in Chart Title?
- ChartJS - Line Chart with different size datasets
- Line chart with large number of labels on X axis
- chart js - Apply different color for each x-axes label
- Multiple line labels for chart js
- Add a text as tooltip for each point on a line chart
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Updating chart.js chart with dataset of different size
- create different labels for different data chart js
- Chart.js line chart with correctly spaced x labels
- chart.JS i want to put different color for each Y axis value grid line color
- How to set X coordinate for each bar with react chart js 2?
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- angular-chart.js : issue with pointHoverBorderColor property for line chart
- How do I get a different label for each bar in a bar chart in ChartJS?
- With Chart js, I am trying to color every 7th vertical (x axis) grid line (representing each week beginning visually)
- Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset
- Add different labels in a line chart - Chart.js
More Query from same tag
- Dynamically updating Chart.js data in angular
- ChartJS custom tooltip doesn't render background on labels (only the title)
- Charts in Ionic 2
- Chart.js using the value of certain data in external json file
- Chart.js - Is it possible to have two y axis with positive values one above the other?
- Cannot create Chart using Chart.JS @ 2.9.4
- How do I obtain a Chart instance for Chart.js
- Chart.js can't push dataset to charts made dynamically
- Chart.js Box Annotations Fill Entire Chart
- Chart.JS how to change order of y-axis
- How to create a line chart indicating which month a user wrote more or less blogs?
- How to change colors in react charts
- Chart.js - Line Chart format data to Lacs/Crores
- Horizontal stacked angular bar charts
- How to use the useEffect function in react js chart 2 to change the labels?
- hide data of the datasets in radar chart?
- How to generate color code dynamically by swapping 2 characters within a string using PHP
- how to put a y-axis and x-axis label while using html and chartjs
- Chart.js piechart, only have border on the outside of arc
- Single Stacked bar with three sections in Angular
- How to give break line in data label
- How to set min Value a step down of min value received from database in Y Axis in ChartJS
- React-chartjs-2 update height dynamically
- how to write labels along with data on top and bottom of each stack in bar chart
- ChartJS, merge legends for multiple charts
- Chart.js - add gradient instead of solid color - implementing solution
- ChartJS - zIndex value for points/tooltips?
- Chart.js: summing number of items in active/shown datasets on yAxes of pie chart
- Need help styling chart JS Radar chart
- Is there a way to have the tooltips always shown on a pie/doughnut in Chart.js v3?