minMaxPoints.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Min Max Points example</title>


  <link href="../../assets/styles.css" rel="stylesheet" />

  <style>
    #chart {
      max-width: 650px;
      margin: 35px auto;
    }

  </style>
</head>

<body>
  <div id="chart">

  </div>


  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
  <script src="../../assets/stock-prices.js"></script>

  <script>
    var options = {
      chart: {
        height: 350,
        type: "area",
        zoom: {
          enabled: false
        },
        events: {
          mounted: function(ctx, config) {
            const lowest = ctx.getLowestValueInSeries(0)
            const highest = ctx.getHighestValueInSeries(0)

            ctx.addPointAnnotation({
              x: new Date(ctx.w.globals.seriesX[0][ctx.w.globals.series[0].indexOf(lowest)]).getTime(),
              y: lowest,
              label: {
                text: 'Lowest: ' + lowest,
                offsetY: 2
              },
              customSVG: {
                  SVG: `<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
                  <path d="M0 0h24v24H0z" fill="none"/>`,
                  cssClass: undefined,
                  offsetX: -10,
                  offsetY: -30
              }
            })

            ctx.addPointAnnotation({
              x: new Date(ctx.w.globals.seriesX[0][ctx.w.globals.series[0].indexOf(highest)]).getTime(),
              y: highest,
              label: {
                text: 'Highest: ' + highest,
                offsetY: 2
              },
            })
          }
        }
      },