Add an explanation on how to use JavaScript chart libraries in MarkBind

docs/userGuide/usingHtmlJavaScriptCss.md

@@ -5,6 +5,7 @@
 <frontmatter>
   title: "User Guide: {{ title }}"
   layout: userGuide.md
+  pageNav: 2
 </frontmatter>
 
 <span id="link" class="d-none">
@@ -18,6 +19,8 @@
 **A MarkBind source file can contain a mixture of HTML, JavaScript, and CSS** as a normal web page would.
 </div>
 
+## Markdown in HTML
+
 ==Text within HTML tags are considered plain text unless the text is preceded by a blank line,== in which case the text is parsed as Markdown text.
 
 <div class="indented">
@@ -61,5 +64,89 @@ Alternatively, you can use `<markdown>` (for _block_ Markdown elements such as h
 
 </div>
 
+## JavaScript libraries
+
+External JavaScript libraries can be included in MarkBind to add a wide range of features and functionalities. One such use case is to add a charting library for data visualization.
+
+### Charts
+
+Popular chart libraries such as [Chart.js](https://www.chartjs.org/) and [Apache ECharts](https://echarts.apache.org) can be used in MarkBind to create beautiful charts, similar to how they are used in any HTML web page. The details of how to use these libraries are beyond the scope of this section, but you can find more information on their websites. In general, you will perform these 3 steps:
+
+1. Import the library via a CDN or locally.
+1. Specify a target HTML element to render the chart.
+1. Initialize the chart with the data and options.
+
+<box type="warning">
+
+As mentioned in the [above section](#markdown-in-html), you **should not** leave any blank lines within HTML elements to prevent MarkBind from parsing the contents as Markdown instead of code/text.
+</box>
+
+{{ icon_example }} Here is an example of how to use Chart.js to create a pie chart.
+
+<include src="codeAndOutput.md" boilerplate>
+<variable name="highlightStyle">HTML</variable>
+<variable name="code">
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
+<div style="width:400px;height:400px;">
+  <canvas id="myChart"></canvas>
+</div>
+<script>
+// Get the 2d context of the canvas (of where we want to draw the chart)
+const ctx = document.getElementById('myChart').getContext('2d');
+// Instantiate the Chart class with the data for the pie chart
+const myChart = new Chart(ctx, {
+    type: 'pie',
+    data: {
+        labels: ['Red', 'Blue', 'Yellow'],
+        datasets: [{
+            label: '# of Votes',
+            data: [12, 19, 3],
+            backgroundColor: [
+              'rgb(255, 99, 132)',
+              'rgb(54, 162, 235)',
+              'rgb(255, 205, 86)'
+            ]
+        }]
+    }
+});
+</script>
+</variable>
+</include>
+
+{{ icon_example }} Here is an example of how to use Apache ECharts to create a bar chart.
+
+<include src="codeAndOutput.md" boilerplate>
+<variable name="highlightStyle">HTML</variable>
+<variable name="code">
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js"></script>
+<div id="echart" style="width:400px;height:400px;"></div>
+<script type="text/javascript">
+  // Initialize the echarts instance based on the prepared dom
+  var eChart = echarts.init(document.getElementById('echart'));
+  // Specify the configuration items and data for the chart
+  var option = {
+    title: {
+      text: 'ECharts Getting Started'
+    },
+    xAxis: {
+      data: ['Shirts', 'Cardigans', 'Chiffons']
+    },
+    tooltip: {},
+    yAxis: {},
+    series: [
+      {
+        name: 'sales',
+        type: 'bar',
+        data: [5, 20, 36]
+      }
+    ]
+  };
+  // Display the chart using the configuration items and data just specified.
+  eChart.setOption(option);
+</script>
+</variable>
+</include>
+
 {% from "njk/common.njk" import previous_next %}
 {{ previous_next('components/advanced', 'tweakingThePageStructure') }}