ApexCharts on hiding the vertical dotted line

user_13816233 0
Viewed 810

Trying to figure out a way to hide the vertical line that appears when you hover over the graph. I want to keep the hover on the small markers but I want to remove the line that splits the map up as I plan to keep it clean. If you have another solution or different chart options it would also be appreciated! Image of the line I want to be removed

apexcharts reactjs javascript
2 Answers

To hide the desired line, you need to set display: none; for the class .apexcharts-xcrosshairs, .apexcharts-ycrosshairs

var options = {
  chart: {
    type: 'line'
  },
  series: [{
    name: 'sales',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }],
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
  }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();
.apexcharts-xcrosshairs,
.apexcharts-ycrosshairs {
  display: none;
}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>

user_146758900

The dotted vertical line is the xaxis.crosshairs. You can hide them using the following configuration

var options = {
  chart: {
    type: 'line'
  },
  series: [{
    name: 'sales',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }],
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
    crosshairs: {
      show: false
    }
  }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>

user_12478640
Related