Chart Line Hds

<sl-chart-line-hds id="hds-line-chart-dark"></sl-chart-line-hds>
<script>

  const lineChart = document.getElementById('hds-line-chart-dark');

  lineChart.chartTitle = "Portfolio Performance (Dark)"
  lineChart.popoverTheme = "dark"
  lineChart.yLabel = 'Y-axis title name goes here';
  lineChart.xLabel = 'X-axis title name goes here';
  lineChart.data = data

</script>

<sl-chart-line-hds id="hds-line-chart"></sl-chart-line-hds>
<script>

  const lineChart = document.getElementById('hds-line-chart');

  lineChart.chartTitle = "Portfolio Performance (Light)"
  lineChart.yLabel = 'Y-axis label';
  lineChart.xLabel = 'X-axis label';
  lineChart.popoverTheme = "light"
  lineChart.data = data;

</script>

<sl-chart-line-hds value-type="percent" id="hds-line-chart-percent"></sl-chart-line-hds>
<script>

  const lineChart = document.getElementById('hds-line-chart-percent');
  lineChart.chartTitle = "Percentage values"
  lineChart.data = percentData;
</script>


<sl-chart-line-hds value-type="currency" id="hds-line-chart-currency"></sl-chart-line-hds>
<script>

  const lineChart = document.getElementById('hds-line-chart-currency');

  lineChart.chartTitle = "Currency values"

  lineChart.data = data;
</script>

<sl-chart-line-hds hide-legend title="Hide legend" id="hds-line-chart-hide-legend"></sl-chart-line-hds>
<script>
  const lineChart = document.getElementById('hds-line-chart-hide-legend');
  lineChart.data = data;
</script>

<sl-chart-line-hds hide-grid-lines title="Hide gridlines" id="hds-line-chart-hide-gridlines"></sl-chart-line-hds>
<script>
  const lineChart = document.getElementById('hds-line-chart-hide-gridlines');
  lineChart.data = data;
</script>

<sl-chart-line-hds show-x-axis title="Show X Axis" id="hds-line-chart-show-x-axis"></sl-chart-line-hds>
<script>
  const lineChart = document.getElementById('hds-line-chart-show-x-axis');
  lineChart.data = data;
</script>

<sl-chart-line-hds show-y-axis title="Show X Axis" id="hds-line-chart-show-y-axis"></sl-chart-line-hds>
<script>
  const lineChart = document.getElementById('hds-line-chart-show-y-axis');
  lineChart.data = data;
</script>