React - HighChart

HighChart in React

리액트에서 하이차트를 사용하려면 npm이나 yarn을 이용하여 해당 라이브러리를 사용하면 되지만, 하이차트 중에서 라이브러리를 가져다 쓰는 것 중에 조금 까다로운 것들이 있다. 내가 사용했던 차트는 solid gauge였다.

npm install --save highcharts

일반적으로는 위의 highcharts 모듈만 설치해주면 사용할 수 있는데, 나처럼 가끔 모듈을 더 설치해야 하는 경우도 있다. solid gauge는 아래의 모듈을 더 설치해야 했다.

npm install highcharts-more --save

import React, { Component } from 'react';
import Highchart from 'highcharts/highcharts';
import HighchartMore from 'highcharts-more'; // add
import * as HighchartsSolidGauge from 'highcharts/modules/solid-gauge';

HighchartMore(Highchart); // add
HighchartsSolidGauge(Highchart);

class SolidGauge extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.renderChart();
  }

  renderChart() {
    const { percent } = this.props;
    const  gaugeOptions  = {
    chart: {
      type:  'solidgauge',
      height:  '70%',
    },
    title:  null,
    pane: {
    center: ['50%', '95%'], // 뒤의 숫자가 vertical-align 정렬이 됨
    size:  '170%',
    startAngle:  -90,
    endAngle:  90,
    background: {
      backgroundColor:  '#eee',
      innerRadius:  '60%',
      outerRadius:  '100%',
      shape:  'arc',
      borderColor:  'transparent'
    }
  },
  tooltip: {
    enabled:  false
  },
  yAxis: {
    maxColor:  '#dc8afe',
    lineWidth:  0,
    minorTickInterval:  null,
    tickAmount:  2,
    tickWidth:  0, // 차트 바닥에 조그마한 라인
    title: {
      y:  -70
    },
    labels: {
      y:  16,
      enabled:  false  // 하단에 0, 100 숫자 제거
    }
  },

  plotOptions: {
    solidgauge: {
      dataLabels: {
        y:  5,
        borderWidth:  0,
        useHTML:  true
      }
    }
  }
}

this.chart  =  Highchart.chart(Highchart.merge(gaugeOptions, {
  chart: {
    renderTo:  this.chartContainer,
    height:  '60%',
    type:  'solidgauge',
    backgroundColor:  '#FFF',
  },
  yAxis: {
    min:  0,
    max:  100,
    labels: {
      distance:  -12
    }
  },
  credits: {
    enabled:  false
  },
  series: [{
    data: [percent],
    dataLabels: {
      borderWidth:  0,
      format: '<div style="text-align:center">'  +
      '<span style="font-size:21px; color:#777; position:relative; top:0px; letter-spacing:-1px; font-weight:500;">{y}&nbsp;</span>'  +
      '<span style="font-size:13px; color:#c7c7c7; position:relative; top:0px; left:-3px;">%</span>'  +
   '</div>'
    }
  }]
}));
}

render() {
  return <div ref={node => (this.chartContainer = node)} />;
  }
}

export  default  SolidGauge;

정리

highcharts는 까다롭게 생겼는데, 속성이 엄청 많다. 색깔, 폰트는 물론이고 html도 사용 가능하고 사소한 속성까지 많다. highcharts를 잘 쓰면 UI가 좀 있어보이고 좋을 것 같다.

참고

highcharts-more