score:1
Accepted answer
you can use the min
and max
properties on the x axis like so:
const chart = new chart('chartjscontainer', {
type: "line",
data: {
labels: [
new date(1634847780000), // last of previous day - low tide
new date(1634869320000), // high tide 1
new date(1634891880000), // low tide 1
new date(1634913060000), // high tide 2
new date(1634935560000), // low tide 2
new date(1634955720000), // first of next day - high tide
],
datasets: [{
label: "my first dataset",
data: [0.7, 5.8, 0.8, 5.8, 0.8, 5.1], // meters above sea
tension: 0.5,
backgroundcolor: "#000000",
fill: {
target: "origin",
},
}, ],
},
options: {
interaction: {
mode: "point",
},
hover: {
mode: "point",
},
onhover: (e) => {
const canvasposition = getrelativeposition(e, chart);
// substitute the appropriate scale ids
const datax = chart.scales.x.getvalueforpixel(canvasposition.x);
const datay = chart.scales.y.getvalueforpixel(canvasposition.y);
console.log(datay);
},
plugins: {
tooltip: {
enabled: true,
},
legend: {
display: false,
},
},
scales: {
xaxis: {
type: "time",
min: new date(1634853600000), // should calculate this dynamic, not best way but can use: new date().sethours(0,0,0,0)
max: new date(1634939999000), // should calculate this dynamic, not best way but can use: new date().sethours(23,59,59)
time: {
unit: "hour",
displayformats: {
hour: "hh:mm",
},
// minunit: moment(1634860800000).format("hh:mm"),
},
},
yaxis: {
ticks: {
callback: function(value, index, values) {
return value + "m";
},
},
},
},
},
});
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.5.1/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</body>
Source: stackoverflow.com
Related Query
- Draw line between starting point and Ending point in semi doughnut chart in chart js
- Chart.JS Starting at 00:00am and ending at 23:59pm
- 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
- In Chart.js set chart title, name of x axis and y axis?
- Chart.js - Increase spacing between legend and chart
- Chart.js: bar chart first bar and last bar not displaying in full
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- chartjs datalabels change font and color of text displaying inside pie chart
- How to save Chart JS charts as image without black background using blobs and filesaver?
- How to add second Y-axis for Bar and Line chart in Chart.js?
- Chart.js Mixed Bar and Line chart with different scales
- Chart.js bar chart : Grid color and hide label
- Problem for display a chart with Chart.js and Angular
- How to use PrimeNg Chart of Width and Height?
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Chart.js Timeseries chart - formatting and missing data values
- chartjs - top and bottom padding of a chart area
- Draw a horizontal and vertical line on mouse hover in chart js
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Category scale on Y-axis and time on x-axis in bubble chart in Chartjs
- Can Chart.js combines Line Chart and Bar Chart in one canvas
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Creating a grouped and stacked chart in Chart.js
- Chart.js: width and height of a pie chart not respected
- Remove the label and show only value in tooltips of a bar chart
- Showing Percentage and Total In stacked Bar Chart of chart.js
- Chart js: how can I align the legend and the title
- Can we draw a Line Chart with both solid and dotted line in it?
- Chartjs not rendering chart and no error thrown
- ChartJS Line chart cut off at the top and bottom
More Query from same tag
- show xAxes on click
- How can I make small grid lines above ChartJS labels?
- How to set Custom tooltip event with Chartjs version 2.X
- Pie chart using chart.js and asp.net web Service (asmx)
- Undefined values in chart.js from json
- Chart.js how to show cursor pointer for labels & legends in line chart
- Side effects from Chartjs for only *some* clients
- Loading Laravel Chart consoletvs/charts:7.*
- ChartJS How to set color to just one bar
- chartjs maintain points position, put image alongside with label
- Chart.js barchart custom on hover method
- Chart.js - Why the chart cannot rendered in a child component but in the father component can?
- chart js showing some weird data at top of charts
- Chartjs barchart generate data for an array dataset
- Vue2 trying to set chart title
- Chart.js: How can a line series (out of many) change line color and thickness upon mouse hover?
- Chart.js add label inside bubble chart
- Split assoc array by keys
- Getting Error regarding :Cannot read property 'length' of undefined
- Chartjs-plugin-zoom plugin does not change x axis labels
- How to make intermittent lines to represent periods of presence and absence on a given line during it's length on Multi Axis chart?
- Chart.js hiding lable
- Chart.js not appearing in tabs
- Add a label to a point of a bubble graph (Chart.js)
- How to display date instead of year in morris line chart in js
- Chart.js is not respecting my container dimensions
- JS count numbers between
- Hiding unused axis in ng2-charts
- Why i only get one value after executing "for loop" to display "datasets.data" in ChartJS
- Chart does not display on webpage in Django app (with Chart.js)