Apexchart 데이터 0일때 차트에 나타내기/감추기(chart show/hide)

apexchart 라이브러리를 사용해서 집계데이터를 나타내려 한다.

 

(출처 : https://codepen.io/rprol/pen/GBxqEg)

 

 

그리고 해당 차트에서 데이터 부분에 마우스를 갖다 대면,

 

 

사진에서 볼 수 있듯이 해당 그래프에 마우스를 갖다 대면, 각 데이터의 상세정보가 나오는 걸 확인할 수 있다.

데이터가 0인 경우에도 hover하면 Social Media: 0 이렇게 노출된다.

하지만 사용자는 데이터 값이 0일 땐 상세정보 부분에서 아예 안 보일 수 있게 처리해달라는 것이다.

 

---

 

우선 코드를 살펴보면

var options = {
  chart: {
    height: 380,
    type: "line"
  },
  series: [
    {
      name: "Website Blog",
      type: "column",
      data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
    },
    {
      name: "Social Media",
      type: "column",
      data: [0, 42, 35, 0, 43, 22, 17, 31, 22, 22, 12, 16]
    }
  ],
  stroke: {
    width: [0, 4],
    curve: 'smooth'
  },
  title: {
    text: "Traffic Sources"
  },
  // labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  labels: [
    "01 Jan 2001",
    "02 Jan 2001",
    "03 Jan 2001",
    "04 Jan 2001",
    "05 Jan 2001",
    "06 Jan 2001",
    "07 Jan 2001",
    "08 Jan 2001",
    "09 Jan 2001",
    "10 Jan 2001",
    "11 Jan 2001",
    "12 Jan 2001"
  ],
  xaxis: {
    type: "datetime"
  },
  yaxis: [
    {
      title: {
        text: "Website Blog"
      }
    },
    {
      opposite: true,
      title: {
        text: "Social Media"
      }
    },
    
  ]
};

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

chart.render();

 

이 상태에서 아래 코드만 추가해 주면, 데이터가 0일 때는 해당 그래프에 hover 시 아예 안 보이게 할 수 있다.

 tooltip: {
    hideEmptySeries: true
 },