score:2
Accepted answer
Yes, you can use object notation like so:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [{
x: "Red",
y: 5
}, {
x: "Blue",
y: 3
}, {
x: "Yellow",
y: 8
}],
borderColor: 'pink'
},
{
label: '# of Points',
data: [{
x: "Yellow",
y: 8
}, {
x: "Green",
y: 5
}, {
x: "Purple",
y: 3
}, {
x: "Orange",
y: 8
}],
borderColor: 'orange'
}
]
},
options: {}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<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>
</body>
Source: stackoverflow.com
Related Query
- chart.js add second line in a Line chart that starts from end of first line
- How to add second Y-axis for Bar and Line chart in Chart.js?
- ChartJS, Primeng, Gap first and end of line chart
- How to add data dynamically to primevue Line chart from vuejs3?
- Chart.js - add data to line chart from clicking pie chart segment
- How to clear a chart from a canvas so that hover events cannot be triggered?
- How to add an on click event to my Line chart using Chart.js
- How to add text at end of each line in charts.js
- How to add datas to chart js from javascript array itself?
- Adding Chart.js line chart to Jinja2/Flask html page from JS file
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- Chart.js line chart tooltip shows wrong label when line doesn't start at first label
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- How to add gradient background to Line Chart [vue-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?
- How to add area with break on line chart with fill color
- Add data to line chart using chart.js
- add info for points in line chart (js)
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- How to create Bar chart that gets updated from new ajax requests with ChartJS?
- How to make aspecific API call from within a Line Chart class in ReactJS using react-chartjs-2?
- I have 10 points inn x-axis, ranging [-25,-20,,-15,-10,0,10,20,30,40,50]. But I want my line chart to start from -15 of x-axis. How we can achieve?
- Chart.js - how to add a second data line to the line graph
- How to sort XY line chart tooltip items based on value and add thousands separators?
- How can I add a euro sign (€) to all tooltips in my chart js line chart
- How to change background color of labels in line chart from chart.js?
- Remove label from line chart - react-chartjs-2
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- Range at the end of the line chart
More Query from same tag
- In chart.js, how to know if a yAxes tick is bumping/rendering over/into another
- How to invert scale display on radar chart (chart.js)
- Chart.js Chart Formatting - Legend & Y Axis & Title
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- chartjs cutoutPercentage and tooltips does not works in nextjs
- How to group and count missing values using linq
- How to implement dynamic data on chartjs?
- Add information on y Chart Js
- Can we draw a Line Chart with both solid and dotted line in it?
- Chart JS, Choose different Y-axis for different datasets
- Is it possible to generate multiple chart in Laravel using chartjs ? If possible please give the solution
- How to get the length (height) of the vertical bar in Chart.js
- Chart.options returns "Property 'options' does not exist on type 'chart'"
- Chart js Datalabels styling
- Using Chart.Js to plot a scatter plot from an Array
- Trying to update background color on chart.js
- How to show/hide animation when legend clicked chart js
- "Type of import (".../charjs/types/indexsm" has no construct signatures issue on Vue3 and ChartJS?
- JQuery calling global from local
- Chartjs sample can't be reproduced
- Hover/click area in filled line chart in chart.js
- Updating a chart from chart.js in vue
- $scope variable not updating when factory object changes AngularJS
- Chart.js tooltip at any point on the chart
- chartjs doesn't render dates properly
- Two charts in a page not working, using Chart.js 3.1.1 cdn in Laravel 8.x framework
- How do i programmatically set bar fillColor in chartJs + angular
- React-chartjs not working
- Display Time In Y Axis - Bubble Chart
- Load more historical data in Line charts on panning left