본문으로 건너뛰기

LineChart

시간의 흐름에 따라 데이터를 선형으로 표현해주는 차트입니다.

export function LineChartBasic() {
  return <Frame>
    <LineChart
    height={400}
    data={[
      {time:2011, a:100, b:23, c:12, d:58},
      {time:2012, a:40, b:45, c:32, d:43},
      {time:2013, a:30, b:73, c:52, d:78},
      {time:2014, a:70, b:21, c:62, d:12},
      {time:2015, a:90, b:12, c:69, d:99},
    ]}
    seriesConfig={{
      keyX:'time',
    }}
    series={[
      {type:'Fill', keyY:'d', lineStyle: { stroke: 'lightgreen', opacity:0.4, strokeWidth: 3 }},
      {type:'Point', keyY:'a', pointStyle: { fill: 'orange', pointSize: 5 },},
      {type:'PointAndLine', keyY:'b', pointStyle: { fill: 'red', pointSize: 3 }, lineStyle: { stroke: '#D97D4A', strokeWidth: 3 }},
      {type:'PointAndLine', keyY:'c', pointStyle: { fill: 'black', pointSize: 4 }, lineStyle: { stroke: 'blue', strokeWidth: 3 }},
    ]}
    />
  </Frame>
}

기본 속성​

data​

data: T[]

차트에 표현할 데이터로, 특정 타입 T 에 대한 배열입니다.

T 타입을 베이스로 X축, Y축 속성을 지정할 수 있습니다.

data={[
  {time:2011, a:100, b:23, c:12, d:58},
  {time:2012, a:40, b:45, c:32, d:43},
  {time:2013, a:30, b:73, c:52, d:78},
  {time:2014, a:70, b:21, c:62, d:12},
  {time:2015, a:90, b:12, c:69, d:99},
]}

시계열 설정​

seriesConfig = interface SeriesConfig<T> {
  keyX: keyof T;
  minMaxMarginPercent?: number;
  valueUnit?: number;
  minValue?: number;
  maxValue?: number;
  labelX?: LabelConfig;
  labelY?: Omit<LabelConfig, 'displayUnit'>;
}

seriesConfig 를 통해 차트의 기본 시간 축 (X 축)을 비롯하여 여러 차트 표현에 관련된 설정을 할 수 있습니다.

keyX​

차트의 기본 시간 축을 나타내는 속성을 지정합니다. 여기에 지정되는 속성은 반드시 number 타입이어야 합니다.

seriesConfig={{
  keyX:'time',
}}

(optional) minMaxMarginPercent​

Y축의 최대/최소 값을 정할때 기본적으로는 data 에 있는 값들의 범위를 체크하여 자동적으로 결정됩니다. 자동으로 결정될 때 Y축의 최대/최소 값이 실제 data 상의 최대/최소 값보다 얼마나 마진을 줘서 보여줄지 결정할 수 있습니다.

예를들어 data 의 최대값이 100, 최소값이 0일때 minMaxMarginPercent 이 20이면 전체 Y축의 길이 100 의 20% 를 마진으로 각각 더하여 Y축의 최대값은 120, 최소값은 -20 으로 처리됩니다.

minMaxMarginPercent 의 기본값은 10으로, 기본 10%의 최대/최소 마진값을 가집니다.

(optional) valueUnit​

Y축에 표시되는 값이 총 몇개 나타낼지 설정합니다. 만약 이 값이 5이면, Y축에는 총 5개의 label 이 표시됩니다.

이 값의 기본값은 10입니다. (기본 10개의 label 표시)

(optional) minValue​

Y축의 최소값을 지정합니다.

자동계산되는 최소값을 사용하지 않고 싶을때 사용합니다. 만약 0으로 하면 최소값을 0으로 표기되고, 이 값을 기준으로 차트가 표시됩니다.

(optional) maxValue​

Y축의 최대값을 지정합니다.

Y축의 최소값과 같은 특성을 지닙니다.

(optional) labelX​

X 축의 label 스타일을 정합니다. LabelConfig 타입으로 정의하며 속성은 모두 optional 입니다.

상세 내용은 아래의 표와 같습니다.

속성타입설명
sizenumber폰트의 크기를 설정합니다.
familystring폰트의 서체를 설정합니다.
weightnumber폰트의 굵기를 설정합니다.
displayUnitnumber얼마 단위로 값을 표시할지 설정합니다. 만약 이 값이 5면, 5 단위로 label 이 표시됩니다. (5, 10, 15, 20...)
renderer(value:number)=>stringvalue 를 받아서 label 의 표시를 직접 렌더링할 수 있습니다.
rotationnumberlabel 의 회전 각도를 설정합니다. 90으로 설정하는 경우 label 이 90도 회전합니다.
extraMarginLeftnumber자동계산된 label의 left 위치에서 지정된 값 만큼 추가 보정합니다.
extraMarginTopnumber자동계산된 label의 top 위치에서 지정된 값 만큼 추가 보정합니다.

(optional) labelY​

Y 축의 label 스타일을 정합니다. labelX 와 동일하게 LabelConfig 타입으로 정의합니다.
단, Y 축에는 아직 displayUnit 옵션을 지원하지 않습니다.

시계열 데이터​

interface Series<T> {
  type: SeriesType;
  keyY: keyof T;
  lineStyle?: LineStyle;
  pointStyle?: PointStyle;
}

라인 형태로 표시할 데이터를 지정하고 스타일을 정의합니다.

keyY​

제공한 data 에서 표시할 데이터 속성명을 지정합니다.

series={[
  {type: 'Line', keyY: 'd'},
]}

type​

SeriesType = 'Line' | 'Fill' | 'Point' | 'PointAndLine' | 'PointAndFill'

지원하는 타입은 총 5가지입니다.

Point 타입​

Line 타입​

PointAndLine 타입​

Fill 타입​

PointAndFill 타입​

(optional) pointStyle​

포인트의 스타일을 지정합니다.

pointSize​

포인트의 크기를 지정합니다. 포인트의 반지름을 나타내는 픽셀값입니다.

SVG 속성들​

pointSize 값 외에는 포인트를 처리할때 사용되는 SVG <circle> Element 의 속성입니다. SVG 스펙내에서 자유롭게 설정이 가능합니다.

(optional) lineStyle​

라인의 스타일을 지정합니다.

lineStyle: {
  animationLength:1, fill:type==='Fill'||type==='PointAndFill'?'orange':'none', stroke: 'orange', strokeWidth: 2, fillOpacity: 0.4
}

animationLength​

라인이 늘어나는 애니메이션 효과의 재생시간을 지정합니다. 단위는 초입니다. 이 값이 없으면 애니메이션 효과도 제거됩니다.

SVG 속성들​

animationLength 값 외에는 라인을 처리할때 사용되는 SVG <path> Element 의 속성입니다. SVG 스펙내에서 자유롭게 설정이 가능합니다.

레이아웃 속성​

(optional) width​

차트의 폭을 설정합니다. 이 값이 없으면 부모의 크기에 맞춥니다.

(optional) height​

차트의 높이를 설정합니다. 이 값이 없으면 부모의 크기에 맞춥니다.

(optional) paddingLeft​

차트의 왼쪽 여백의 크기를 설정합니다. (픽셀)

(optional) paddingRight​

차트의 오른쪽 여백의 크기를 설정합니다. (픽셀)

(optional) paddingTop​

차트의 상단 여백의 크기를 설정합니다. (픽셀)

(optional) paddingBottom​

차트의 하단 여백의 크기를 설정합니다. (픽셀)

padding 옵션을 통해 label 등이 잘리지 않게 조정할 수 있습니다.