i try puting some values in my charts from my homepage components and my question

for now i want show in charts the values records

this my code from records to my chats

import { Component, OnInit } from '@angular/core';
declare var $: any;
declare var Index: any;
declare var Charts: any;
@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {

records=[
  {
  codprodut:'1',
  descricao:'Peras',
  quantidade:'200',
  preco:'200€'
},

{
codprodut:'2',
descricao:'Maças',
quantidade:'20',
preco:'10€'
},
{
codprodut:'3',
descricao:'Merda',
quantidade:'20',
preco:'5€'
},

]
  constructor() { }

  ngOnInit() {
   $(document).ready(function() {
 Charts.init();
   Index.init();

    });
  }

}

chart.js code

var Charts = function() {"use strict";
	
	var doughnutChartHandler = function() {
		var data = [{
			value: 300,
			color: '#F7464A',
			highlight: '#FF5A5E',
			label: 'Red'
		}, {
			value: 50,
			color: '#46BFBD',
			highlight: '#5AD3D1',
			label: 'Green'
		}, {
			value: 100,
			color: '#FDB45C',
			highlight: '#FFC870',
			label: 'Yellow'
		}];

		// Chart.js Options
		var options = {

			// Sets the chart to be responsive
			responsive: false,

			//Boolean - Whether we should show a stroke on each segment
			segmentShowStroke: true,

			//String - The colour of each segment stroke
			segmentStrokeColor: '#fff',

			//Number - The width of each segment stroke
			segmentStrokeWidth: 2,

			//Number - The percentage of the chart that we cut out of the middle
			percentageInnerCutout: 50, // This is 0 for Pie charts

			//Number - Amount of animation steps
			animationSteps: 100,

			//String - Animation easing effect
			animationEasing: 'easeOutBounce',

			//Boolean - Whether we animate the rotation of the Doughnut
			animateRotate: true,

			//Boolean - Whether we animate scaling the Doughnut from the centre
			animateScale: false,

			//String - A legend template
			legendTemplate: '<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'

		};

		// Get context with jQuery - using jQuery's .get() method.
		var ctx = $("#doughnutChart").get(0).getContext("2d");
		// This will get the first returned node in the jQuery collection.
		var doughnutChart = new Chart(ctx).Doughnut(data, options);

		//generate the legend
		var legend = doughnutChart.generateLegend();
		//and append it to your page somewhere
		$('#doughnutLegend').append(legend);
	};
	
	return {
		//main function to initiate template pages
		init: function() {
			doughnutChartHandler();
		}
	};
}();

i have to create  new post becouse i can´t edit the first

the problem is the following I created a graph and now I want to search for data but I can only if i put statict data but i want put with dinamy data I am using angular 7, nodejs and mongodb what i doing wrong how i convert my chart with static data to dinamic data this is my code

let TotalSell = function() {
 var data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [{
        label: 'My First dataset',
        fillColor: 'rgba(220,220,220,0.2)',
        strokeColor: 'rgba(220,220,220,1)',
        pointColor: 'rgba(220,220,220,1)',
        pointStrokeColor: '#fff',
        pointHighlightFill: '#fff',
        pointHighlightStroke: 'rgba(220,220,220,1)',
  data: [65, 59, 80, 81, 56, 55, 40, 84, 64, 120, 132, 87]
    }]
 };
    legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].strokeColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
 };

 var ctx = $("#TotalSell").get(0).getContext("2d");

 var chart1 = new Chart(ctx).Line(data, options);

 var legend = chart1.generateLegend();
 $('#TotalSellLegend').append(legend);
};

<div class="col-sm-6">
   <h5 class="over-title margin-bottom-15" style="text-align:center;">Total Sell</h5>
        <canvas id="TotalSell" class="full-width"></canvas>
        <div class="margin-top-20">
          <div class="inline pull-left">
            <div id="TotalSellLegend" class="chart-legend"></div>
          </div>
        </div>
      </div>