score:1
Accepted answer
you can use reduce
function to count for each category. working solution
let res = [...data].reduce(
(a, c) => (a[c.items.selecteditem] = (a[c.items.selecteditem] || 0) + 1, a),{});
use the resulting object in your pie chart as following for labels and data.
labels = object.keys(res);
data = object.values(res));
score:0
i was a bit confused because you have both 'truck' & 'trucks', maybe thats an error in itself. but for your question, here is a solution:
const a = data.filter((a) => a.items.selecteditem === "car");
const b = data.filter((b) => b.items.selecteditem === "bikes");
const c = data.filter((c) => c.items.selecteditem === "motor");
const d = data.filter((d) => d.items.selecteditem === "truck");
const e = data.filter((e) => e.items.selecteditem === "trucks");
and when you insert data into the pie:
<pie
data={{
labels: ar,
datasets: [
{
data: [a.length, b.length, c.length, d.length, e.length],
backgroundcolor: ["red", "yellow", "green", "blue", "pink"],
bordercolor: ["rgba(255, 99, 132, 1)"],
borderwidth: 1
}
]
}}
height={400}
width={600}
options={{
maintainaspectratio: false,
title: {
display: true,
text: "selected",
fontsize: 20
},
legend: {
labels: {
fontsize: 25
}
}
}}
/>
Source: stackoverflow.com
Related Query
- Dynamically pass the JSON data in chartjs
- load external json data file in to chartjs in the angular component
- chartjs how to update dynamically data from database(Chartjs cant get the data)
- How can I pass the data into the chartjs label?
- How to pass sql query data onto the datasets field of chartjs using nodejs (ejs)
- how to dynamicly change the json data in chartjs
- Chartjs random colors for each part of pie chart with data dynamically from database
- Displaying JSON data in Chartjs
- Dynamically update the options of a chart in chartjs using Javascript
- Show data dynamically in line chart - ChartJS
- Chartjs 2.7.3: Set Y data at the correct X position axis
- React ChartJS 2 : Get data on clicking the chart
- Chartjs Data via json request not populating
- dynamically update the scale type of chartjs graph
- How to dynamically link json data to chart.js
- How can I load multiple Chartjs charts with different data on the same page?
- Completely hide the Y-axis on chartjs when data is hidden
- Angular 2: How to pass my API data to graph and Display the Graph with data
- How to display chart using Chartjs with JSON data in Laravel
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- Get method in php then pass the value into json format
- How to set the chartjs bar graph scale to the highest value in the result data
- Render chartjs and export image to data not in the DOM
- How to get the database data into ChartJS using codeigniter
- How to add new data point and remove leftmost data point dynamically in Chartjs
- Passing JSON data from PHP array into ChartJS
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- Read google sheet json data into chartjs
- ChartJs - displaying data dynamically from back-end
- How to set the gap between data items in a chartjs chart
More Query from same tag
- Chart.js multiTooltip Labels in Pie
- Chart.js bar chart label gets hidden on hover
- implement chartjs zoom with buttons
- react-chart2: Cannot read properties of undefined (reading 'map')
- How to make the whole <canvas> element in Chart.js V3.7.0 display cursor as pointer on hover?
- ChartJS: how to change data in hover box?
- Chart.js chart not rendering
- Y axis set custom value using chart.js
- Weird time formating with chart.js and moment.js
- Css style not working well when resizing chart height in angular application
- Chart js each label for each data
- Adding Chart.js line chart to Jinja2/Flask html page from JS file
- Customize Chart js dataset data
- Can we draw a Line Chart with both solid and dotted line in it?
- Can you add an action to an element within the tooltip in chart.js?
- How can i reformat dates
- Timeline on Y axis, with chart.js
- How can I show gridlines only of the even value ones withchartjs?
- How to properly use the chartjs datalabels plugin
- Multiple bubble chart datasets for chartjs
- Uncaught Error: [$injector:modulerr] (Error came up when I included chart.js)
- How to plot multiple value for one X-axis chart.js
- Is there a way to hide/customize ChartJS' above legend?
- Remove specific label
- Displaying Chart with data retrieved from Entity Framework in Controller
- Chart.js display x axis labels ON ticks in bar chart, not between
- Adding responsive text inside chart in Charts Js
- Chart JS - Title missing when clearing canvas if no data is available
- ChartJS dynamically adding values with jQuery array
- ReferenceError: Chart is not defined with primeNg and angular 4