[React] 리액트 apexcharts 커스텀 툴팁 (custom tooltip) 만드는 방법, 툴팁에 시간 데이터와 값 표시하기

Intro

안녕하세요. 이번시간에는 리액트에서 apexcharts 를 이용하여 커스텀 툴팁을 만드는 방법에 대해 알아보도록 하겠습니다. 

 

How to solve the problem

apexcharts 를 사용한다는 가정하에, 아래의 series 데이터와 chart option이 있다고 생각해봅시다.

    const series: any = [
            {
                name: 'EBAY',
                data: [
                    ['2023-03-20T07:00:22.625Z', '123124.82'],
                    ['2023-03-20T06:00:20.103Z', '52353.83'],
                    ['2023-03-20T05:00:16.960Z', '98943.91'],
                    ['2023-03-20T04:00:15.051Z', '796756.65'],
                    ['2023-03-20T03:00:05.754Z', '4831.18'],
                    ['2023-03-20T02:00:08.835Z', '13.75'],
                ],
                stockName: 'EBAY',
            },
            {
                name: 'AAPL',
                data: [
                    ['2023-03-20T07:00:22.625Z', '6756.78'],
                    ['2023-03-20T06:00:20.103Z', '345547.78'],
                    ['2023-03-20T05:00:16.960Z', '1321.95'],
                    ['2023-03-20T04:00:15.051Z', '235890.64'],
                    ['2023-03-20T03:00:05.754Z', '32.20'],
                    ['2023-03-20T02:00:08.835Z', '12314.79'],
                ],
                stockName: 'AAPL',
            },
            {
                name: 'AMZN',
                data: [
                    ['2023-03-20T07:00:22.625Z', '4.89'],
                    ['2023-03-20T06:00:20.103Z', '8.84'],
                    ['2023-03-20T05:00:16.960Z', '11.94'],
                    ['2023-03-20T04:00:15.051Z', '13.66'],
                    ['2023-03-20T03:00:05.754Z', '14.23'],
                    ['2023-03-20T02:00:08.835Z', '12.85'],
                ],
                stockName: 'AMZN',
            },
        ],
        options: any = {
            chart: {
                height: 300,
                type: 'line',
            },
            dataLabels: {
                enabled: false,
            },
            colors: props.data.apxChart.colors,
            fill: {
                colors: props.data.apxChart.colors,
            },
            legend: {
                show: true,
            },
            xaxis: {
                type: 'datetime',
                labels: {
                    show: true,
                    showDuplicates: false,
                    datetimeUTC: false,
                    format: undefined,
                    formatter: undefined,
                    datetimeFormatter: {
                        year: 'yyyy',
                        month: 'yy/MM',
                        day: 'MM-dd',
                        hour: 'HH:mm',
                        minute: 'HH:mm',
                    },
                },
                tooltip: {
                    enabled: false,
                },
            },
            yaxis: {
                axisBorder: {
                    show: false,
                },
                axisTicks: {
                    show: false,
                },
            },
        };

 

Series data

여기서 우선 series 데이터를 자세히 살펴보도록 하겠습니다. 배열 안에 총 3개의 object data가 들어 있습니다. name, data, stockName의 3개의 프로퍼티를 갖고 있고, data의 경우 시간과 숫자값을 가진 배열로 이루어져 있습니다. 

[
    {
        name: 'EBAY',
        data: [
            ['2023-03-20T07:00:22.625Z', '123124.82'],
            ['2023-03-20T06:00:20.103Z', '52353.83'],
            ['2023-03-20T05:00:16.960Z', '98943.91'],
            ['2023-03-20T04:00:15.051Z', '796756.65'],
            ['2023-03-20T03:00:05.754Z', '4831.18'],
            ['2023-03-20T02:00:08.835Z', '13.75'],
        ],
        stockName: 'EBAY',
    },
    {
        name: 'AAPL',
        data: [
            ['2023-03-20T07:00:22.625Z', '6756.78'],
            ['2023-03-20T06:00:20.103Z', '345547.78'],
            ['2023-03-20T05:00:16.960Z', '1321.95'],
            ['2023-03-20T04:00:15.051Z', '235890.64'],
            ['2023-03-20T03:00:05.754Z', '32.20'],
            ['2023-03-20T02:00:08.835Z', '12314.79'],
        ],
        stockName: 'AAPL',
    },
    {
        name: 'AMZN',
        data: [
            ['2023-03-20T07:00:22.625Z', '4.89'],
            ['2023-03-20T06:00:20.103Z', '8.84'],
            ['2023-03-20T05:00:16.960Z', '11.94'],
            ['2023-03-20T04:00:15.051Z', '13.66'],
            ['2023-03-20T03:00:05.754Z', '14.23'],
            ['2023-03-20T02:00:08.835Z', '12.85'],
        ],
        stockName: 'AMZN',
    },
],

 

Options

다음은 options 입니다. series 데이터 (EBAY, AAPL, AMZN) 의 line 차트를 그려주는 옵션을 확인할 수 있습니다. 

options: any = {
    chart: {
        height: 300,
        type: 'line',
    },
    dataLabels: {
        enabled: false,
    },
    colors: props.data.apxChart.colors,
    fill: {
        colors: props.data.apxChart.colors,
    },
    legend: {
        show: true,
    },
    xaxis: {
        type: 'datetime',
        labels: {
            show: true,
            showDuplicates: false,
            datetimeUTC: false,
            format: undefined,
            formatter: undefined,
            datetimeFormatter: {
                year: 'yyyy',
                month: 'yy/MM',
                day: 'MM-dd',
                hour: 'HH:mm',
                minute: 'HH:mm',
            },
        },
        tooltip: {
            enabled: false,
        },
    },
    yaxis: {
        axisBorder: {
            show: false,
        },
        axisTicks: {
            show: false,
        },
    },
};

 

Custom Tooltip

위 series와 options을 바탕으로 커스텀 툴팁을 구현하는 방법은 아래와 같습니다. 커스텀에 사용될 실제 html 코드를 넣어주면 됩니다. 

 

우선 저의 경우, x축에 해당하는 시간과 값을 표현하고 싶었기 때문에 아래와 같이 w.config.series를 사용하여 dateTime 값을 만들어줬습니다. dateTime값 표출시에는 moment.js라는 날짜 라이브러리를 사용했습니다. data 특성상 data[0]이 시간, data[1]이 숫자값을 갖고 있기 때문에, value는 dataPoint[1]와 같이 구현했습니다. 

 

특히 커스텀 툴팁의 CSS는 각각 다를 텐데요,  <div class="tooltip">으로 선언한 뒤, tooltip 관련 css를 css 파일에 정의하면 적용됩니다. 

tooltip: {
    custom: ({series, seriesIndex, dataPointIndex, w}: any) => {
        const dataPoint = w.config.series[seriesIndex].data[dataPointIndex];
        const date = moment(w.config.series[seriesIndex].data[dataPointIndex][0]);
        const dateTime = date.format('YYYYMMDD HH:mm');
        const value = dataPoint[1];
        let html = '<div class="tooltip">';
        html += `<p>${dateTime}</p>`;
        html += '<ul>';
        series.forEach((item: any, index: number) => {
            html += `<li><i style="background-color: ${w.globals.colors[index]};"></i> <strong>${
                w.globals.seriesNames[index]
            }${value}</li>`;
        });
        html += '</div>';
        return html;
    },
},