This is ApexChart Razor Page which is not showing any chart displays blank page. I want to implement ApexChart on MudBlazor .Net6
@page "/apexChart"
@using MudBlazor
@using MudBlazor.Charts
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
<script>
var options = {
chart: {
type: 'line'
},
series: [{
name: 'sales',
data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
}],
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
}
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
@code {
}
I was expecting to display apex chart in Mudblazor as it display in html code. The code below is html code for apex chart
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div id="chart"></div>
<script>
var options = {
chart: {
type: 'line'
},
series: [{
name: 'sales',
data: [30,40,35,50,49,60,70,91,125]
}],
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</body>
</html>
