Highcharts 사용기

최근 차트를 그려야 하는 경우가 많이 생겨 피그마 차트 플러그인을 포함해서 리서치를 진행했는데 맘에 드는 차트 관련 프로덕트가 없었다. 그러던 중 Highcharts라는 차트 라이브러리를 발견하였고 가격에 놀랐지만 AI와 병행해서 사용하면 꽤 괜찮은 결과물을 무료로 얻을 수 있었다

 

Highcharts: 웹 시각화의 강력한 도구

Highcharts는 JavaScript 기반의 인터랙티브 차트 라이브러리로, 웹 개발에서 가장 널리 사용되는 시각화 도구 중 하나다. 다양한 차트 유형과 높은 커스터마이징 가능성을 제공하며 다음과 같은 특징이 있다

• 다양한 차트 타입 - 라인, 바, 파이, 스캐터 플롯 등 40개 이상의 차트 타입 지원
• 브라우저 호환성 - 모든 주요 브라우저에서 일관된 렌더링 제공
• 반응형 디자인 - 다양한 화면 크기에 자동으로 적응하는 차트 생성

하지만 HighCharts도 몇 가지 고려해야 할 점이 있는데, 특히 상업적 사용에는 라이센스 비용이 발생한다는 점이다. 개인 프로젝트나 비영리 목적으로는 무료로 사용할 수 있지만, 상업적 용도로는 라이센스 구매가 필요하다

 

AI와 연계하여 차트 구현

Highcharts 홈페이지에서 Demos로 들어가면 다양한 차트 타입의 인터랙티브한 데모를 경험할 수 있는데, 가장 중요한 건 Code를 활성화하면 아래와 같이 사용자가 직접 스타일 및 데이터 수정이 가능하다. 물론 수정하기 전에는 Highcharts 라이브러리 관련한 정보를 배워야겠지만 간단히 Claude에게 코드를 붙여 넣고 내가 원하는 스타일의 차트 및 데이터를 입력하고 코드 생성을 요청하였다

Highcharts에 내장된 코드 에디터

 

결과는 꽤 괜찮았다. 데이터의 경우 csv 형태로 입력하는게 결과가 좋았고, 단순한 데이터라면 프롬프트에 포함시켜도 괜찮았다. 다만 차트에 표시되는 데이터 외적인 스타일이나 문구의 경우 사용자가 수정해야 할 필요가 있었다

 

마무리

차트 우측 상단 햄버거 버튼을 누르면 전체 화면, 차트 이미지 다운로드, 데이터 테이블 표시 등이 가능하며 사용자의 필요에 따라 손쉽게 사용이 가능하다. 마땅한 피그마 차트 플러그인을 찾지 못했거나 차트를 그려야 하는 경우가 많은 사용자라면 한 번은 꼭 사용해 보기를 권한다

 

https://www.highcharts.com/