score:0
using a scatter chart is a good choice. the solution however depends on the format of your data. let's presume, it looks like this:
const data = [
{ name: 'rachel', calls: ['2021-03-01 10:15', '2021-03-01 18:02', '2021-03-02 06:48'] },
{ name: 'william', calls: ['2021-03-01 13:24', '2021-03-02 08:41', '2021-03-02 11:13'] },
{ name: 'barbara', calls: ['2021-03-01 07:58', '2021-03-01 15:47', '2021-03-02 10:16'] }
];
you need to create a dataset
for each user and provide the data in point format where the values of distinct users are different but all values of a same user are identical. this can be done using the array.map()
method as follows:
data.map((user, i) => ({
label: user.name,
data: user.calls.map(call => ({ x: call, y: i + 1 }))
}))
now you also need to define a ticks.callback
function on the y-axis that transforms the numeric tick value back to the user name
yaxes: [{
ticks: {
...
callback: v => v % 1 == 0 ? data[v - 1].name : undefined
}
}],
please take a look at below runnable code and see how it works.
const data = [
{ name: 'rachel', calls: ['2021-03-01 10:15', '2021-03-01 18:02', '2021-03-02 06:48'] },
{ name: 'william', calls: ['2021-03-01 13:24', '2021-03-02 08:41', '2021-03-02 11:13'] },
{ name: 'barbara', calls: ['2021-03-01 07:58', '2021-03-01 15:47', '2021-03-02 10:16'] }
];
const colors = ['red', 'blue', 'green'];
new chart('mychart', {
type: 'scatter',
data: {
datasets: data.map((user, i) => ({
label: user.name,
data: user.calls.map(call => ({ x: call, y: i + 1 })),
backgroundcolor: colors[i],
pointradius: 4
}))
},
options: {
responsive: true,
tooltips: {
callbacks: {
title: tooltipitem => data[tooltipitem[0].datasetindex].name,
label: tooltipitem => tooltipitem.xlabel
}
},
scales: {
yaxes: [{
ticks: {
min: 0.5,
max: data.length + 0.5,
stepsize: 0.5,
callback: v => v % 1 == 0 ? data[v - 1].name : undefined
}
}],
xaxes: [{
type: 'time',
time: {
unit: 'hour',
displayformats: {
hour: 'mmm-dd hh'
},
tooltipformat: 'mmm-dd hh:mm'
},
gridlines: {
linewidth: 0
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.bundle.min.js"></script>
<canvas id="mychart" height="80"></canvas>
Source: stackoverflow.com
Related Query
- How to display data labels outside in pie chart with lines in ionic
- ChartJs line chart - display permanent icon above some data points with text on hover
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- Chart JS display Data Value on the top of the Bar
- Beginner using chart.js: having trouble display state full of data into a column chart using variables
- how to display chart data as html table chartjs
- Display data labels on a pie chart in angular-chart.js
- How to display chart using Chartjs with JSON data in Laravel
- How do I get a chart.js chart to display data in a Node/React web application?
- How do I display chart on my HTML page based on JSON data sent by Node JS
- Chart JS how to display an array of data objects as bar chart
- How to get Data from API to display chart using chartjs in Vuejs
- Display legend of grouped data (different colors) in chart
- The chart doesn't display the data from my call to the API with Axios
- Display chart data based on API call
- How can i display my data in a chart using chart js
- Is there a way to display a chart label that has no data behind it in Chart.js
- Chart.js 3.x not able to display data on chart
- How do I destroy/update Chart Data in this chart.js code example?
- display ng2 chart when the property of data returned is >=0
- getting additional value fields from data source for dx.chartjs doughnut chart
- Chart.js returns a console error and does not display the chart when using variables as data input
- Adding condition in ComponentDidMount to display chart data
- How to adding data in loop and display chart dynamically like in live (chart.js & typescript & angular)?
- Display data at ends of floating bar graph (created using chart js)
- Unable to display data in Bar Chart using react-chart-2
- how to display table from chart js data in canvas.js using java script .?
- Not being able to display value from json data into chart js
- How to display data on hover inside doughnut chart in Angular Chart?
- Using data in HTML to display ChartJS Doughnut chart
More Query from same tag
- How to group smaller Pie Chart slices together to Improve Readability in chartjs
- Zoom chartjs with many X values
- Changing default values for Chart JS
- Type error in using chartjs and tc-angular-chartjs
- chartjs - Not taking the height in reponsive chart
- chart.js bar chart x-axis label disappeared
- How to show data values or index labels in ChartJs (Latest Version)
- Chartjs - Changing legend as a line with pointsyle of circle?
- Chart.js limit the display size of the chart
- Relative bar chart overlay on line chart in chart.js
- How to pass my array of objects into a graph with Chart.js
- ChartJS multiple annotations (vertical lines)
- Charts.js display two combined line charts for last 7 days
- Retrieving daily & monthly totals from MySQL for use in a chart
- Stack two y axes using chart.js
- How to enable zoom plugin using Chart JS?
- Chartjs! How to remove datalabel when value is 0
- chartjs-plugin-streaming: onRefresh() callback isn't working
- Charts.js - Colors for stacked bar on multi-series line/bar chart are not working
- Chartjs 3.5.0 - Radar Chart - Converting the labels to images
- How to create dynamic D3 tickFormat in dc charts
- How to use GET method to choose the right table to show ChartJS graph?
- How do I obtain a Chart instance for Chart.js
- ChartJS color specific Grid Lines
- How to control visibility of canvas image via button outside the canvas(ChartJs)?
- How to generate color code dynamically by swapping 2 characters within a string using PHP
- chart js -data on chart in rotated form
- I dont know how to sum expenses based on category in sequelize
- Passing data in array that came from an array to chartjs with django
- Change Legend Box Outline Chart.js 2