When use frappe-chart method in JS file

I want to add frappe-chart in page.
I had code for frappe-chart in Page tempreture_graph.js file but when load I got one UTF-8 error
please give me solution.

tempreture_graph.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Frappe from '/node_modules/frappe-charts/dist/frappe-charts.min.esm'
import {Chart} from “/node_modules/frappe-charts/dist/frappe-charts.min.esm”
frappe.pages['tempreture-graph'].on_page_load = function(wrapper) {
	var page = frappe.ui.make_app_page({
		parent: wrapper,
		title: 'Graph',
		single_column: true
	});
	console.log(page)
	frappe.breadcrumbs.add("Selling")
	page.add_menu_item('Sales Order', () => frappe.set_route('List', 'Sales Order'))
	
	// Chart constructor works like this:
	// const your-chart
	// Parameters required are:
	// #1 container element =  This is any CSS selector or DOM Object
	// #2 options object = At a minimum:  Data, composed itself of an array of labels and array of datasets
	const container = '.layout-main-section';
	// .layout-main-section
	const options = {
		parent: $(page.container),
		data: {
			labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
				"12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
			],

			datasets: [
				{
					name: "Some Data", type: "bar",
					values: [25, 40, 30, 35, 8, 52, 17, -4]
				},
				{
					name: "Another Set", type: "line",
					values: [25, 50, -10, 15, 18, 32, 27, 14]
				}
			]
		},
		title: "My Awesome Chart on a page in ERPNext",
		type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
		height: 250,
		colors: ['#7cd6fd', '#743ee2']
	}

	// existing code
const chart = new frappeChart.Chart(dedicated_div, options)
// add
setTimeout(function () {chart.draw(!0)}, 1);
}

Thank You
Aum Trivedi

1 Like