rMateChart 데이터의 값의 차이가 클때 클

지금 상황은 데이터 값이 너무 작아서 실제 차트에 그려지는 bar(또는 column)가 눈에 안 보이거나 클릭하기 어려운 수준이라 이벤트를 못 잡는 문제군요.
rMateChartH5에서는 몇 가지 접근법이 가능합니다.

🔹 해결 방법 1: minFieldWidth / minFieldHeight 사용

Column/Bar 계열 차트의 경우 Column2DSeries, Bar2DSeries 같은 시리즈에
minFieldWidth 또는 minFieldHeight 속성을 주면, 값이 작더라도 최소한의 두께가 보장됩니다.

👉 이렇게 하면 QTY가 100이든 1이든 최소 5px 높이로 그려져서 클릭이 가능해집니다.

🔹 해결 방법 2: ItemRenderer 확장해서 투명 클릭 영역 만들기

값이 너무 작으면 클릭하기 힘드니까, hitTest를 확장해서 투명하게 클릭 가능한 공간을 넓혀주는 방식을 씁니다.

var ExtColumn2DItemRenderer = rMateChartH5.Column2DItemRenderer.extend({
    // hitTest 확장
    hitTest: function(x, y){
        var bounds = this.getBounds();
        // 세로 기준 최소 20px은 클릭 가능하게 확대
        if(bounds.height < 20){
            var centerY = bounds.y + bounds.height/2;
            bounds.y = centerY - 10;
            bounds.height = 20;
        }
        return bounds.contains(x, y);
    }
});

그리고 차트에서 시리즈에 itemRenderer를 지정:

<Column2DSeries
    yField="QTY"
    displayName="수량"
    itemRenderer="ExtColumn2DItemRenderer"/>

👉 실제 바가 작게 그려져도 hitTest가 넓게 잡히니까 클릭 이벤트가 발생합니다.

🔹 해결 방법 3: 라벨 클릭으로 이벤트 트리거

만약 작은 bar는 보이지 않더라도, 카테고리 이름(CATEGORY) 라벨은 항상 보이죠.
X축 라벨을 클릭했을 때 chartClick을 실행하게 하면 됩니다.

chart.addEventListener("labelClick", function(event){
    var category = event.labelText;
    var rowData = chartData.find(d => d.CATEGORY === category);
    chartClick("series1", category, event.index, rowData, [rowData["QTY"], category]);
});

👉 이렇게 하면 라벨 클릭만으로도 해당 데이터 이벤트 실행이 가능합니다.

✅ 정리

가장 간단한 방법: minFieldHeight 속성 추가 → 작은 값도 최소 클릭 가능.

좀 더 확실하게: ItemRenderer hitTest 확장 → 투명 클릭 영역 확보.

차선책: X축 라벨 클릭 이벤트 연결 → bar가 안 보이더라도 데이터 이벤트 처리 가능.