score:1
Accepted answer
you can add a second x
axis that shows the date and empty labels for the other spaces, then you can use null
values in your data array to make the data points appear in the right spots.
example:
<!doctype html>
<html>
<head>
<!-- required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>chart.js mixed chart</title>
<!--chart.js js cdn-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.min.js"></script>
</head>
<body>
<div>
<canvas id="mychart"></canvas>
</div>
<script>
var ctx = document.getelementbyid('mychart').getcontext('2d');
var mychart = new chart(ctx, {
type: 'line',
data: {
labels: ["pm", "am", "night", "pm", "am", "night"],
datasets: [{
data: [null, 49, null, null, 51],
label: "am",
bordercolor: "#3e95cd",
backgroundcolor: "rgb(62,149,205)",
borderwidth: 2,
type: 'line',
fill: false,
showline: false
}, {
data: [47, null, null, 48],
label: "pm",
bordercolor: "#3cba9f",
backgroundcolor: "#3cba9f",
borderwidth: 2,
showline: false
}, {
data: [null, null, 50, null, null, 52],
label: "night",
bordercolor: "#ffa500",
backgroundcolor: "#ffa500",
borderwidth: 2,
showline: false
}
]
},
options: {
scales: {
xaxes: [{},
{
id: 'dates',
type: 'category',
position: 'bottom',
labels: ["", "05/05/2021", "", "", "06/05/2021", ""]
}
]
}
}
});
</script>
</body>
</html>
Source: stackoverflow.com
Related Query
- How to show group by data just like sample image using Chart.js?
- How can I show "No Data" message in Pie Chart when there is no data using VueJS?
- how to show data value on bar chart body rather than using tooltip?
- How to save Chart JS charts as image without black background using blobs and filesaver?
- chart js tooltip how to control the data that show
- How to show data values in top of bar chart and line chart in chart.js 3
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Angular chart how to show the legend data value by default along with legend name
- how to show data label on barchart using chart.js in Angular10 project?
- How to show percentage (%) using chartjs-plugin-labels ( Pie chart ) in angular 2/8
- Using chart js version 3, how to add custom data to external tooltip?
- How to display chart using Chartjs with JSON data in Laravel
- How to show slice value inside of slice in pie chart using chart.js
- How to plot chart from external JSON and format X-AXIS to show time using Chart.JS?
- How to send data to chart js using angular
- How to get Data from API to display chart using chartjs in Vuejs
- How to show tooltip value of all data falling on the same axis in chart js?
- How to get the data attribute of the canvas chart created using chartjs
- How to show the chartjs bar chart data values labels as text?
- how to show speedometer on Doughnut chart in chart.js using reactjs
- How can i display my data in a chart using chart js
- ChartJS Pie Chart How default just show 2 legend datas
- How to show tooltip only when data available in chart js?
- Chart Piechart in only show percentage on hover but it shows data and label with percentage both i just want to show percentage only percentage
- How to add image inside the doughnut chart using chart.js?
- How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- React: How to get loading spinner to show whilst API data loads into my chart.js chart
- How do I destroy/update Chart Data in this chart.js code example?
- How to show bar chart labels clearly using ChartJS?
More Query from same tag
- Chart.js line chart with area range
- Return List<object> from webservice
- ChartJS 3.7.1 tooltip callback, get label value for the next index
- ChartJs showing wrong labels of data (x-axis dates)
- Chart.js tooltip at any point on the chart
- Chart.js Draw a Stacked Bar Chart with Limit Line
- How to sort MMMYY on Chart.Js and display the values that match the month?
- Laravel 5.1 format date array for chart.js data
- Customize legend AngularJS
- TypeError: CanvasRenderService is not a constructor
- The real time chart sometimes does not display when I switch the target
- Series Details Not Showing in Angular Chart with Charts.js
- Add Link to X-Label Chart.js
- Set DataSource Of Chart.JS To Array
- Loading and updating dynamic charts with dynamic data (chart.js)
- Displaying custom dataset properties in tooltip in chart.js
- How to create a pannable real-time chart
- Chart JS prepend labels to x-axis with addData
- What's an efficient process for passing PHP arrays to to populate multiple ChartJS graphs?
- Chart.js bar chart is overflowing its containing element
- How do I customise doughnut chart using chart.js
- Chart.js not installing with NPM
- chart.js aspect ratio not square
- Creating mixed Bar Chart with ReactJS using recharts or react-chartjs-2
- Chart.js & Angular 2 - ng2-charts Custom on Click Event
- Grouping y-axis labels on multiple lines on a ChartJS with an extra dimension
- chart.JS i want to put different color for each Y axis value grid line color
- React ChartJS 2 : Get data on clicking the chart
- Chart.js, Can you override the legend label box color?
- How to make bars dashed in chart js?