Mapping a list of products to list of price graph points

I’m thinking of using fl_chart to create a beautiful graph for my app

I’m receiving from my backend a list of shop items which each have a price

I’d like to create a filter graph similar to Airbnb which allows filtering items inside a price range

• the graph would show on the X-axis the price & on Y-axis the number of items for that price or maybe best? -> the percentage of items at that price relative to the total number of items

I’m thinking to build this graph I should first map my list of items into an array of prices such as :

pricesInCurrency = [8, 7, 12, 14, 12, 12, 14, 6, 14, 9]

and then creating a graph from this array by getting the percentage of each price - how ?

-> 3 items were mapped to the array above as 12₹ so it would be 3%

Do I need to create a dictionary to associate my price values to their percentage to build my graph?

Or what is the right approach to parse my response into graph points?

Right now I just need to build the graph, to achieve the filtering feature I will most likely use a range slider below my graph

Here is what my ShopItem looks like - I need to map a List<ShopItem> shopItems into graph points

class ShopItem extends Equatable {
  final String id;
  final String name;
  final String category;
  final String description;
  final String imageUrl;
  final double price;

  const ShopItem({
    required this.id,
    required this.name,
    required this.category,
    required this.description,
    required this.imageUrl,
    required this.price,
  });

  @override
  List<Object?> get props => [id, name, category, description, imageUrl, price];
}

class PriceGraphPoint {

final priceXcoordinate;
final percentageOfShopItemsAtThisPriceYcoordinate;

}