title: ApexCharts crosshairs gradient line
body: <p><strong>Q:</strong> How to achieve this gradient crosshair line in ApexChart.js with Angular?</p>
  <p><a href="https://i.stack.imgur.com/cRyji.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cRyji.png" alt="enter image description here" /></a></p>
  <p><strong>What I've tried, from the docs:</strong>
  <a href="https://apexcharts.com/docs/options/xaxis/#crosshairsFillGradient" rel="nofollow noreferrer">https://apexcharts.com/docs/options/xaxis/#crosshairsFillGradient</a></p>
  <pre><code>xaxis: {
    crosshairs: {
      show: true,
      position: 'back',
      stroke: {
        color: 'rgba(255, 255, 255, 0.5)',
        width: 1,
        dashArray: 0,
      },
      //TODO: crosshair gradient
      fill: {
        type: 'gradient',
        color: 'blue', //sample color only
        gradient: {
          colorFrom: 'blue', //sample color only
          colorTo: 'blue', //sample color only
          stops: [0, 100, 0],
          opacityFrom: 1,
          opacityTo: 1
        },
      }
    }
  }
  </code></pre>
  <p><strong>Dependencies version:</strong>
  &quot;apexcharts&quot;: &quot;3.32.0&quot;,
  &quot;ng-apexcharts&quot;: &quot;1.6.0&quot;,</p>