CODEWITHSUNDEEP
javascripthtmlcssapexcharts
Shahriyor Sharifjonov
Shahriyor Sharifjonov

Reputation: 141

Apexcharts cursor pointer

I used apexcharts.js for making chartbar on js. So i want to change cursor to pointer. help please! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

my-code!

var options = {
  series: [{
  name: 'series1',
  data: [60, 85, 75, 120, 100, 109, 97]
}],
  toolbar: {
  show: false,
},
  chart: {
  height: 350,
  type: 'area',
  fontFamily: 'Proxima Nova',

  toolbar: {
    show: false
  },
},
dataLabels: {
  enabled: false
},
stroke: {
  curve: 'smooth'
},
xaxis: {
  categories: ["Янв", "Фев", "Март", "Апр", "Май", "Июнь", "Июль", "Авг", "Сен", "Окт", "Ноя", "Дек"]
},
tooltip: {
  x: {
    format: 'dd/MM/yy HH:mm'
  },
},
};

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

Upvotes: 1

Views: 4781

Answers (2)

Mahfuzur Rahman
Mahfuzur Rahman

Reputation: 51

I had same problem. Here is two solutions:

chart: {
            width: 320,
            type: ...,
            events: {
                dataPointMouseEnter: function(event) {
                    event.target.style.cursor = "pointer";
                    // or
                    event.fromElement.style.cursor = "pointer";
                }
            },
        }

Upvotes: 5

Jocelyn Nsa
Jocelyn Nsa

Reputation: 502

I had encountered the same problem. I will present you two solutions:

1st method : Found on Github

You can set the cursor to point with:

chart: {
  ...
  events: {
    dataPointMouseEnter: function(event) {
      event.path[0].style.cursor = "pointer";
    }
  }
}

See more details in this github link : https://github.com/apexcharts/apexcharts.js/issues/1466

2nd method : My own method

You can target the class name of the apexchart component via Inspector, then at the code level add the following property to this class :

cursor: pointer

Example :

// Change cursor on hover
.apexcharts-pie {
  cursor: pointer;
}

Upvotes: 4

Related Questions