How to draw ApexCharts crosshair line from the marker (y value) to the bottom?

Question

Using apexchart

const data = [45, 52, 78, 45, 69, 23, 30, 45, 52, 88]
const dataXCategories = ["10.12", "11.12", "12.12", "13.12", "14.12", "15.12", "16.12", "17.12", "18.12", "19.12"]

new ApexCharts(chart, {
  chart: {
    height: 165,
    type: "area",
    toolbar: {
      show: false
    }
  },
  stroke: {
    show: true,
    curve: 'smooth',
    lineCap: 'butt',
    colors: undefined,
    width: 2,
    dashArray: 0,
  },
  colors: ["#00f"],
  dataLabels: {
    enabled: false
  },
  series: [{
    name: "Series 1",
    data: data
  }],
  fill: {
    type: "gradient",
    gradient: {
      shadeIntensity: 1,
      opacityFrom: .7,
      opacityTo: .9,
      stops: [0, 90, 100]
    }
  },
  xaxis: {
    categories: dataXCategories,
    labels: {
      show: true,
      format: 'dd/MM',
      style: {
        fontSize: "11px",
        fontWeight: 400,
        fontFamily: "Inter",
        colors: ["#999", "#999", "#999", "#999", "#999", "#999", "#999", "#999", "#999", "#999"],
      }
    },
    crosshairs: {
      show: true,
      opacity: 1,
      position: 'front',
      stroke: {
        color: '#4A3AFF',
        width: 2,
        dashArray: 0
      }
    }
  },
  yaxis: {
    min: 0,
    max: 100,
    tickAmount: 4,
    labels: {
      show: true,
      offsetX: -12,
      style: {
        fontSize: "11px",
        fontWeight: 400,
        fontFamily: "Inter",
        colors: ["#999"],
      },
      formatter: function(value) {
        return `${value}%`;
      }
    },
  },
  grid: {
    show: true,
    borderColor: '#EDEDED',
    strokeDashArray: 0,
    position: 'back',
    xaxis: {
      lines: {
        show: true
      }
    },
    yaxis: {
      lines: {
        show: true
      }
    },
    row: {
      colors: undefined,
      opacity: .5
    },
    column: {
      colors: undefined,
      opacity: .5
    },
    padding: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0
    },
  },
  markers: {
    colors: '#4A3AFF',
    hover: {
      size: undefined,
      sizeOffset: 7
    }
  }
}).render();

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart" class="apex-charts" dir="ltr"></div>

Now the blue line is equal to the height of the graph

Please tell me how to make the line start from the marker to the bottom line x

I will be glad for any help

Badacadabra · Accepted Answer · 2023-01-15T11:49:59.340

I do not think you can do this with simple configuration. However, since ApexCharts is based on SVG, you can manipulate the DOM yourself quite easily.

As I said previously in other answers, because I have already used this technique several times, what I am going to show you is more experimental than official.

It works, though.

In your case, the idea is to put some code in the mouseMove event callback. The use of a MutationObserver is recommended to watch for changes in the DOM. When a marker (which is a circle) is hovered, its r, cx and cy attributes are updated. In particular, cy is the most interesting because it gives us the vertical position of the active marker. r is also useful to adjust the offset of crosshairs.

Here is the main part of the code:

chart: {
  // ...
  events: {
    mouseMove: () => {
      let crosshairs = document.querySelector('.apexcharts-xcrosshairs'),
          marker = document.querySelector('.apexcharts-marker');
            
      let settings = { attributes: true },
          observer = new MutationObserver(() => {
            crosshairs.setAttribute('y1', `${marker.cy.baseVal.value + marker.r.baseVal.value + 1}`);
          });

      observer.observe(marker, settings);
    }
  }
},

Here is the full code:

const data = [45, 52, 78, 45, 69, 23, 30, 45, 52, 88];
const dataXCategories = ["10.12", "11.12", "12.12", "13.12", "14.12", "15.12", "16.12", "17.12", "18.12", "19.12"];

new ApexCharts(chart, {
  chart: {
    height: 165,
    type: 'area',
    toolbar: {
      show: false
    },
    events: {
      mouseMove: () => {
        let crosshairs = document.querySelector('.apexcharts-xcrosshairs'),
            marker = document.querySelector('.apexcharts-marker');
            
        let settings = { attributes: true },
            observer = new MutationObserver(() => {
              crosshairs.setAttribute('y1', `${marker.cy.baseVal.value + marker.r.baseVal.value + 1}`);
            });

        observer.observe(marker, settings);
      }
    }
  },
  stroke: {
    show: true,
    curve: 'smooth',
    lineCap: 'butt',
    colors: undefined,
    width: 2,
    dashArray: 0,
  },
  colors: ['#00f'],
  dataLabels: {
    enabled: false
  },
  series: [{
    name: 'Series 1',
    data: data
  }],
  fill: {
    type: 'gradient',
    gradient: {
      shadeIntensity: 1,
      opacityFrom: .7,
      opacityTo: .9,
      stops: [0, 90, 100]
    }
  },
  xaxis: {
    categories: dataXCategories,
    labels: {
      show: true,
      format: 'dd/MM',
      style: {
        fontSize: '11px',
        fontWeight: 400,
        fontFamily: 'Inter',
        colors: ['#999', '#999', '#999', '#999', '#999', '#999', '#999', '#999', '#999', '#999']
      }
    },
    crosshairs: {
      show: true,
      opacity: 1,
      position: 'front',
      stroke: {
        color: '#4A3AFF',
        width: 2,
        dashArray: 0
      }
    }
  },
  yaxis: {
    min: 0,
    max: 100,
    tickAmount: 4,
    labels: {
      show: true,
      offsetX: -12,
      style: {
        fontSize: '11px',
        fontWeight: 400,
        fontFamily: 'Inter',
        colors: ['#999']
      },
      formatter: value => `${value}%`
    },
  },
  grid: {
    show: true,
    borderColor: '#EDEDED',
    strokeDashArray: 0,
    position: 'back',
    xaxis: {
      lines: {
        show: true
      }
    },
    yaxis: {
      lines: {
        show: true
      }
    },
    row: {
      colors: undefined,
      opacity: .5
    },
    column: {
      colors: undefined,
      opacity: .5
    },
    padding: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0
    },
  },
  markers: {
    colors: '#4A3AFF',
    hover: {
      size: undefined,
      sizeOffset: 7
    }
  }
}).render();

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart" class="apex-charts" dir="ltr"></div>

How to draw ApexCharts crosshair line from the marker (y value) to the bottom?

1 Answers1