V1.4.28 - RealChart

✨ 기능 개선

axis.tick (opens in a new tab)과 label 위치 분리

기존에는 label.location이 'inside'이면 tick 길이가 0으로 적용되어 tick이 표시되지 않았습니다.
이제 tick.location이 label.location과 독립적으로 동작합니다. tick을 축선 안쪽에 표시하려면 tick.location: 'inside'를 명시적으로 지정해야 합니다.
label만 inside로 두고 tick을 숨기려던 기존 설정은 tick이 바깥쪽에 그려질 수 있으니, 필요 시 tick.visible: false 또는 tick.length: 0을 함께 지정해 주세요.

➕ 기능 추가

axis.tick.location (opens in a new tab) tick 표시 위치 지정

축 tick line을 축선 바깥쪽('default') 또는 안쪽·플롯 방향('inside')에 그릴 수 있습니다.
label.location (opens in a new tab)과 별도로 동작하며, category 축을 포함한 모든 축 타입에서 사용할 수 있습니다.

xAxis: {
    label: { location: 'inside' },
    tick: { visible: true, location: 'inside', length: 10 }
}

categoryTree (opens in a new tab) 다중 계층 카테고리 축 지원

categoryField (opens in a new tab)에 2개 이상의 필드를 지정하고 categoryTree를 활성화하면, 계층별 그룹 헤더가 축 라벨 영역에 표시됩니다.
같은 값이 연속되면 하나의 라벨로 병합되며, 필드 순서대로 축에 가까운 행부터 바깥쪽으로 쌓입니다.
categoryTree.divider (opens in a new tab)로 계층 구분선(edge, between, below)을, categoryTree.band (opens in a new tab)로 그룹별 교차 배경색을 지정할 수 있습니다.
categoryTree.levels (opens in a new tab)로 계층별 구분선·라벨 스타일을 개별 설정할 수 있습니다.
categoryTree.levels.label.rotation (opens in a new tab)에 'auto'를 지정하면 라벨이 그룹 영역을 벗어날 때만 세로(-90°)로 회전합니다.

xAxis: {
    type: 'category',
    categoryField: ['month', 'quarter', 'year'],
    categoryTree: {
        divider: { between: true, below: true },
        band: { colors: ['#f8fafc', '#f1f5f9'] }
    }
},
series: [{ type: 'bar', data }]

lineSeries.arrow (opens in a new tab) 라인 끝 화살표 마커

line 시리즈 양 끝(또는 한쪽 끝)에 화살표 마커를 표시할 수 있습니다.
position (opens in a new tab)('start' / 'end' / 'both')으로 위치를, rotation (opens in a new tab)('auto' / 'auto-reverse' / 각도)으로 방향을 지정할 수 있습니다.
step, spline 등 lineType에 맞춰 마지막 구간 방향으로 자동 회전합니다.

series: [{
    type: 'line',
    marker: false,
    arrow: {
        visible: true,
        position: 'end',
        rotation: 'auto',
        radius: 6
    },
    data: [2, 4, 3, 6, 5, 8, 7]
}]

NPM Chart Test v1.4.27