Legend 위치 변경을 위한 option이 있는지요? about tui.chart

[junghwan-park]

안녕하세요 ~
TUI Chart에 관심을 가져 주셔서 감사합니다.

네, legend의 정렬 위치를 수정할 수 있는 옵션이 있습니다.

//...
var options = {
    legend: {
        align: 'top'  //  or 'left', 'bottom', 'right'(default)
    }
};
tui.chart.barChart(container, data, options);

위와 같이 사용 하시면 됩니다.

자세한 사항은 Wiki의 tutorial문서 https://github.com/nhnent/tui.chart/wiki/features-legend#changing-legend-align를 참고 하시면 됩니다. :)

[junghwan-park]

@paulsoh 네 확인 해보았는데요,

1. 세로 정렬이 어긋난다는것이 legend 라벨이 차트 영역을 벗어나는 이슈인가요? 세로 정렬이 어떤것을 뜻하는지 말씀해주시면 다시 확인해보겠습니다.
   custom-event-area는 series영역 크기와 맞추어서 줄어들고 커지므로 legned 영역이 그려지는 위치와는 상관이 없습니다.
2. 네, 현재는 legend영역이 차트 렌더링 영역을 넘어감에대한 처리가 없습니다.
   내부에서 legned를 그리는 방식이 svg라서 아마 css는 동작하지 않을 것이구요, legend 표현 개선을 추후 개발 목록에 추가하겠습니다.

[paulsoh]

답변 감사합니다!
align을 정렬로 생각하고 읽다가 무심코 지나친 것 같습니다.

@junghwan-park님 추가 질문 몇가지만 드릴게요...

1. 아래와 같이 Legend를 옮기고 나서, entity의 갯수에 따라 Legend의 위치가 옮겨지는 것을 볼 수 있습니다. (테스트 해보니 entity의 갯수가 많을 때에만 이렇게 세로 정렬이 어긋나게 됩니다.
   이 부분을 개선할 수 있는 방법이 있을까요?

이 부분 <div class="tui-chart-series-custom-event-area" /> 의 높이가 유동적으로 변하는 것 같은데 Entity의 갯수에 따라서 다르게 계산되는 이유가 무엇인지 궁금합니다.

2. Entity의 갯수가 많아지면 일렬로 길게 늘어지면서 모든 Entity에 대한 Legend가 hidden이 되게 됩니다. 생각 같아서는 Legend가 나오는 부분에 flex-wrap: wrap와 같은 방법으로 아래로 line break이 되게 하고 싶은데.. 이 부분에 대한 개선 방법이 혹시 있을까요? (확인해보니 Legend가 svg내에서 그려지고 있네요)

감사합니다.

[paulsoh]

@junghwan-park님 혹시 확인 가능하신지요?

[paulsoh]

답변 감사합니다!