score:1
Accepted answer
Did you try the below? Refer to Chartjs Documentation
const chartData = [10, 10, 10, 10, 10, 10, 18, 30, 45, 40, 33, 22, 10, 10, 10, 10, 10, 20, 33, 45, 42, 55, 30];
const dataLine = {
labels: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
datasets: [
{
label: 'kWh',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: chartData
}
]
};
Source: stackoverflow.com
Related Query
- Calling data from outside of Chartjs code
- Chartjs random colors for each part of pie chart with data dynamically from database
- React ChartJS prevent new data from being added into state after it's redrawn?
- Filter ChartJS using data from PHP
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to create chartjs chart with data from database C#
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Calling data from search bar to chart.js graph in Angular
- I can't add data to chartjs from codeigniter
- Chartjs not working with d3 from csv source
- Calling external Chartjs chart from a javascript file into HTML in Flask
- chartjs xaxis ticks with round values from shifted input data
- Passing JSON data from PHP array into ChartJS
- How to get Data from API to display chart using chartjs in Vuejs
- Passing Data from Controller to ChartJS
- ChartJs - displaying data dynamically from back-end
- Passing data from a controller to ChartJS - Laravel
- ChartJS get data from Controller
- ChartJS have xAxes labels match data source
- Why is my data on chartjs not starting from the data that it should
- Displaying data from simple html form to display in chartjs
- chartjs how to update dynamically data from database(Chartjs cant get the data)
- Using number/text input field to set the data values in ChartJs stops the chart from being displayed
- To display data from mock server into chartjs using ember
- ionic display chartjs data from json http request
- Svelte , pass data to chartjs from API
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- JavaScript ignore commas inside ChartJS data field pulled from csv that data has commas and is enclosed by double quotes
- graph data from a angular form to ChartJs
- ChartJS - format datetime X axis when displaying data from MySql table
More Query from same tag
- How to dynamically call function with a for loop within Chart.js (JS)
- Charts.js graph not scaling to canvas size
- Chart.js - creating time series freqency chart with JSON data
- ChartJS and Ajax calls
- Create multiple dynamic stacked chart using chart.js in Angular 10?
- How do I increase the arrow length on the pie chart in Charts.js?
- Chartjs tooltip anchor point position on bar charts
- Creating charts (charts.js) values coming from SQLite database using AngularJS
- Chart,js Pie Chart can the gap between a pie chart and the legend be adjusted
- add value to Line chart.js
- Chart.js - y axis custom label
- Chart.js Text color
- vertical grid line not taking full hight of the canvas in chart js 3.3.2
- Chart.js v2 - Partial Y -grid lines with bar chart
- Working with multiple date axes in ChartJS
- Chartjs pie chart tooltip mode label
- Generate Chart With 2 Datasets Charts.js
- Something similar to grace available in the latest chartJs for ChartJs 2.9.3
- Loading or Activating ChartJS on Load
- Chart JS - X-Axis base on timezone
- Styling Bars and Lines with Chart.js
- ChartJS / Chartjs-plugin-annotation How to draw multiple vertical lines using an array?
- Chart.js Dropdown to select 1 day, yesterday and 7 days
- Type error in using chartjs and tc-angular-chartjs
- charts.js data doesn't fit second y-axis
- ChartJS set yAxes "ticks"
- chart.js automatic x axis distributed in time milliseconds
- ChartJS - Moving vertical line is display on top of tooltip
- Chart.js - Creating multiple charts on one page
- chart.js 2.7.1 - polar area chart has too much padding