구글시트 SPARKLINE 함수로 미니 차트 그리기

구글시트 스파크라인(Spark Line)은 셀 안에 넣는 작은 차트입니다.

엑셀에서는 메뉴에서 선택해서 셀 안에 스파크라인을 그리지만 구글시트에서는 SPARKLINE 라는 함수로 스파크라인을 그릴 수 있습니다.

구문(Syntax)

 

Spark line 만들기

Line 차트(선 차트)

Line 차트는 값의 추이를 꺽은선으로 표시해 줍니다.

다음과 같이 따라해 보세요.

[all] 시트의 [H3] 셀에 다음과 같이 1월부터 6월까지 숫자가 입력된 범위를 참조하도록 수식을 입력합니다.

=SPARKLINE(B3:G3)

 

[H3] 셀에 다음과 같이 line 차트 스파크라인이 그려졌습니다.
SPARKLINE 함수에 데이터 범위만 입력하고 옵션을 입력하지 않으면 기본적으로 line 차트가 그려집니다.

 

Column 차트(열 차트)

Column 차트는 값의 추이를 열(세로 막대) 모양으로 표시해 줍니다.

[all] 시트의 [H7] 셀에 다음과 같이 1월부터 6월까지 숫자가 입력된 범위를 참조하도록 하고, charttype을 column으로 설정합니다.

=SPARKLINE(B7:G7,{"charttype","column"}) → [B7:G7] 범위의 값을 column(열) 차트로 표시

 

Bar 차트(누적막대 차트)

Bar 차트는 값의 추이를 누적 막대 차트 모양으로 표시해 줍니다.

[all] 시트의 [H11] 셀에 다음과 같이 1월부터 6월까지 숫자가 입력된 범위를 참조하도록 하고, charttype을 bar로 설정합니다.

=SPARKLINE(B11:G11,{"charttype","bar"}) → [B11:G11] 범위의 값을 bar(누적막대) 차트로 표시

Bar 차트는 각각의 값의 비율을 표시해 줍니다. 값이 크면 폭이 상대적으로 작은값보다 넓어집니다.

 

Winloss 차트(승패 차트)

Winloss 차트는 값의 추이를 막대 그래프 모양으로 양수 값(승)은 x축 위에, 음수 값(패)은 x축 아래에 표시해 줍니다.

[all] 시트의 [H15] 셀에 다음과 같이 1월부터 6월까지 숫자가 입력된 범위를 참조하도록 하고, charttype을 winloss로 설정합니다.

=SPARKLINE(B15:G15,{"charttype","winloss"}) → [B15:G15] 범위의 값을 winloss(승패) 차트로 표시

 

 

Line 차트 모양 바꾸기

SPARKLINE 함수의 두 번째 인수 '옵션'을 지정하면 차트의 모양을 다양하게 바꿀 수 있습니다.

차트 색상 지정

color 옵션을 사용하면 차트의 색상을 바꿀 수 있습니다.

=SPARKLINE(B5:G5,{"color","red"})

옵션명은 color, 값은 red로 지정했으므로 빨간색 차트를 그려줍니다.

 

차트 굵기 지정

linewidth 옵션을 사용하면 차트의 굵기를 바꿀 수 있습니다.

=SPARKLINE(B5:G5,{"color","lime";"linewidth",3})

옵션명은 linewidth, 값은 3을 지정했으므로 3만큼 굵게 표시해줍니다.

수식 풀이:

{"color","lime";"linewidth",3}

• "color","lime": 차트 색상을 라임색으로 표시
• "linewidth",3: 선 굵기를 3으로 설정

 

차트 색상 지정 - 웹 색상코드 사용

색상 이름 대신에 웹 색상코드로도 설정 가능합니다.

※ 웹 색상코드는 다음 링크 참고
https://ko.wikipedia.org/wiki/%EC%9B%B9_%EC%83%89%EC%83%81

=SPARKLINE(B5:G5,{"color","#FF00FF";"linewidth",3})

수식 풀이:

{"color","#FF00FF";"linewidth",3}

• "color","#FF00FF": 차트 색상을 핑크색으로 표시
• "linewidth",3: 선 굵기를 3으로 설정

 

오른쪽부터 차트 그리기(rtl: right to left)

rtl 옵션을 사용하면 차트를 오른쪽부터 왼쪽으로 그릴 수 있습니다.

=SPARKLINE(B5:G5,{"rtl",true})

수식 풀이:

{"rtl",true}

• "rtl",true: rtl(right to left)은 true(true는 '참'이므로 오른쪽에서 왼쪽으로 그린다)

 

Y축 최소 표시값 지정

Line 차트는 좌표 평면에 X, Y축을 기준으로 그려지며 Y축 최소 표시값(ymin)을 지정하면 지정된 값의 아래 값은 잘려서 표시되지 않습니다.

=SPARKLINE(B5:G5,{"ymin",500000})

ymin을 500000으로 지정하면 Y축의 값 50만 기준으로 아래 값은 잘려서 표시되지 않습니다.

 

 

Y축 최대, 최소 표시값 지정

Y축 최대 표시값(ymax), Y축 최소 표시값(ymin)을 지정하면 지정된 값의 위, 아래 값은 잘려서 표시되지 않습니다.

=SPARKLINE(B5:G5,{"ymax",700000;"ymin",500000})

ymax를 700000, ymin을 500000으로 지정하면 Y축의 값 70만 기준으로 위쪽, 50만 기준으로 아래 값은 잘려서 표시되지 않습니다.

 

X축, Y축이 있는 경우

위에서 살펴본 수식은 Y축의 값만 지정해서 사용했습니다. 이번에는 X축, Y축의 값을 모두 지정해서 차트를 그리고 X축, Y축 기준으로 최소, 최대 값을 지정해 보겠습니다.

다음과 같이 월, 판매금액을 한 번에 차트 범위로 지정하면 X, Y축 기준으로 차트가 그려집니다.

=SPARKLINE(B17:C22)

 

 

X축 기준으로 최소 표시값 지정

X축 최소 표시값(xmin)을 지정하면 지정된 값보다 작은 왼쪽 값은 잘려서 표시되지 않습니다.

=SPARKLINE(B17:C22,{"xmin",3})

xmin을 3으로 지정하면 X축의 값 3 기준으로 3월 보다 작은 1월, 2월 값은 잘려서 표시되지 않습니다.

 

X축 기준으로 최소, 최대 표시값 지정

X축 최소 표시값(xmin), X축 최대 표시값(xmax)을 지정하면 지정된 값보다 작은 왼쪽 값, 지정된 값보다 큰 오른쪽 값은 잘려서 표시되지 않습니다.

=SPARKLINE(B17:C22,{"xmin",3;"xmax",5})

xmin을 3, xmax를 5로 지정하면

• X축의 값 3 기준으로 3월 보다 작은 1월, 2월 값은 잘려서 표시되지 않고
• X축의 값 5 기준으로 5월 보다 큰 6월 값은 잘려서 표시되지 않습니다.

 

X축 기준으로 최소, 최대, Y축 기준으로 최대 표시값 지정

X축 최소 표시값(xmin), X축 최대 표시값(xmax), Y축 최대 표시 값(ymax)과 같이 동시에 여러 옵션을 지정해서 차트를 그릴 수도 있습니다.

=SPARKLINE(B17:C22,{"xmin",3;"xmax",5;"ymax",700000})

xmin을 3, xmax를 5, ymax를 70만으로 지정하면

• X축의 값 3 기준으로 3월 보다 작은 1월, 2월 값은 잘려서 표시되지 않고
• X축의 값 5 기준으로 5월 보다 큰 6월 값은 잘려서 표시되지 않고
• Y축의 값 70만보다 큰 4월의 값은 잘려서 표시되지 않습니다.

 

텍스트가 포함된 경우 처리

SPARKLINE 함수는 참조 범위에 텍스트가 포함되어 있으면 무시하고 차트를 그리지 않습니다.

=SPARKLINE(B9:G9)

4월에 텍스트 '집계누락'이 입력되어 있으므로 차트에 표시되지 않고 1, 2, 3, 5, 6월만 표시됩니다.

 

텍스트가 포함된 경우  0으로 처리

텍스트가 포함되어 있으면 0으로 처리하려면 다음과 같이 nan 옵션, 값은 convert로 지정하면 0으로 처리해 줍니다.

=SPARKLINE(B9:G9,{"nan","convert"})

4월이 0으로 처리되어 1, 2, 3, 4, 5, 6월 모두 표시됩니다.

 

빈 셀이 포함된 경우 처리

SPARKLINE 함수는 참조 범위에 빈셀이 포함되으면 무시하고 차트를 그리지 않습니다.

=SPARKLINE(B13:G13)

4월은 비어 있으므로 차트에 표시되지 않고 1, 2, 3, 5, 6월만 표시됩니다.

 

빈셀이 포함되어 있으면 0으로 처리

빈셀이 포함되어 있을 경우 0으로 처리하려면 다음과 같이 empty옵션, 값은 zero로 지정하면 0으로 처리해 줍니다.

=SPARKLINE(B13:G13,{"empty","zero"})

4월이 0으로 처리되어 1, 2, 3, 4, 5, 6월 모두 표시됩니다.

 

 

Bar 차트 모양 바꾸기

지역별 판매금액 비교

Bar 차트는 2개의 값을 비교하기에 좋습니다.

다음과 같이 종로/강남 지역의 상품별 판매금액 비중을 비교하려면 다음과 같이 따라해 보세요.

[bar] 시트의 [E5] 셀에 다음과 같이 종로, 강남의 판매금액이 입력된 범위를 참조하도록 하고, charttype을 bar로 설정합니다.

=SPARKLINE(C5:D5,{"charttype","bar"})

 

[E5] 셀에 다음과 같이 bar 차트 스파크라인이 그려졌습니다.

 

나머지 상품도 판매금액 비중을 표시해 보겠습니다.

① [E5] 셀을 복사한 후 ② [E6:E12] 범위에 붙여넣습니다.

 

최대 판매금액을 기준으로 판매금액 크기 표시

아래 그림과 같이 상품별 판매금액이 있을 때 판매금액이 가장 큰 것을 기준으로 상품별로 상대적인 비중을 표시해 보겠습니다.

[bar] 시트의 [F16] 셀에 판매금액 범위 [E16]를 참조하도록 하고, charttype을 bar로, max를 판매금액 범위의 최대값(max($E$16:$E$23))으로 설정합니다.

=SPARKLINE(E16,{"charttype","bar";"max",max($E$16:$E$23)})

 

[F16] 셀에 다음과 같이 bar 차트 스파크라인이 그려졌습니다.

 

나머지 상품도 판매금액 크기를 표시해 보겠습니다.

① [F16] 셀을 복사한 후 ② [F17:F23] 범위에 붙여넣습니다.

 

 

Column 차트 모양 바꾸기

SPARKLINE 함수의 두 번째 인수 '옵션'을 지정하여 column 차트의 모양을 다양하게 바꾸어 보겠습니다.

Column 차트 색상 지정

charttype옵션만 주면 다음과 같이 검정색으로 차트가 표시됩니다.

 

color 옵션을 사용하면 차트의 색상을 바꿀 수 있습니다.

=SPARKLINE(B5:G5,{"charttype","column";"color","red"})

옵션명은 color, 값은 red로 지정했으므로 빨간색 차트를 그려줍니다.

 

Column 차트 작은 값, 큰 값 색상 표시

lowcolor, highcolor 옵션을 사용하면 가장 큰 값과 가장 작은 값의 차트 색상을 지정할 수 있습니다.

=SPARKLINE(B5:G5,{"charttype","column";"lowcolor","red";"highcolor","lime"})

수식 풀이:

{"charttype","column";"lowcolor","red";"highcolor","lime"}

• "charttype","column":  차트모양은 column(누적 막대 차트)
• "lowcolor","red": 가장 작은 값의 색상은 빨간색
• "highcolor","lime": 가장 큰 값의 색상은 라임색

 

텍스트가 포함된 경우 Column 차트 표시

SPARKLINE 함수는 참조 범위에 텍스트가 포함되어 있으면 무시하고 차트를 그리지 않습니다.

=SPARKLINE(B9:G9,{"charttype","column"})

4월에 텍스트 '집계누락'이 입력되어 있으므로 차트에 표시되지 않고 1, 2, 3, 5, 6월만 표시됩니다.

 

텍스트가 포함된 경우 값 0으로 처리

텍스트가 포함되어 있을 경우 0으로 처리하려면 nan 옵션을 사용하고, 값은 convert로 지정하면 0으로 처리해 줍니다.

=SPARKLINE(B9:G9,{"charttype","column";"nan","convert"})

4월이 0으로 처리되어 1, 2, 3, 4, 5, 6월 모두 표시됩니다.

 

빈 셀이 포함된 경우 Column 차트 표시

SPARKLINE 함수는 참조 범위에 빈셀이 포함되으면 무시하고 차트를 그리지 않습니다.

=SPARKLINE(B13:G13,{"charttype","column"})

 

빈셀이 포함되어 있으면 값을 0으로 처리

빈셀이 포함되어 있을 경우 0으로 처리하려면 다음과 같이 empty옵션, 값은 zero로 지정하면 0으로 처리해 줍니다.

=SPARKLINE(B13:G13,{"charttype","column";"empty","zero"})

 

 

Winloss 차트 모양 바꾸기

Winloss 차트는 charttype옵션만 주면 다음과 같이 검정색으로 차트가 표시됩니다. 함수의 두 번째 인수 '옵션'을 추가하여 차트의 모양을 다양하게 바꿀 수 있습니다.

=SPARKLINE($E$5:$E$14,{"charttype","winloss"})

 

양수, 음수 차트 색상 지정

다음과 같이 양수는 파란색, 음수는 빨간색으로 지정할 수 있습니다.

=SPARKLINE($E$5:$E$14,{"charttype","winloss";"color","blue";"negcolor","red"})

수식 풀이:

{"charttype","winloss";"color","blue";"negcolor","red"}

• "charttype","winloss":  차트 모양은 winloss(승패 차트)
• "color","blue": 기본 색상은 파란색
• "negcolor","red": 음수는 빨간색

 

Winloss 차트 축 표시

Winloss 차트에 축을 표시하면 시각적으로 양수와 음수가 더 잘 구분됩니다.

axis 옵션에 값은 true를 사용하면 축이 표시됩니다.

=SPARKLINE($E$5:$E$14,{"charttype","winloss";"color","blue";"negcolor","red";"axis",true})

수식 풀이:

{"charttype","winloss";"color","blue";"negcolor","red";"axis",true}

• "charttype","winloss":  차트모양은 winloss(승패 차트)
• "color","blue": 기본 색상은 파란색
• "negcolor","red": 음수는 빨간색
• "axis",true: 축은 true(true는 '참'이므로, 축을 그린다, false는 그리지 않음)

 

Winloss 차트 작은 값, 큰 값 색상 표시

lowcolor, highcolor 옵션을 사용하면 가장 큰 값과 가장 작은 값의 차트 색상을 지정할 수 있습니다.

=SPARKLINE($E$5:$E$14,{"charttype","winloss";"color","blue";"negcolor","red";"axis",true;"lowcolor","orange";"highcolor","lime"})

수식 풀이:

{"charttype","winloss";"color","blue";"negcolor","red";"axis",true;"lowcolor","orange";"highcolor","lime"}

• "charttype","winloss":  차트모양은 winloss(승패 차트)
• "color","blue": 기본 색상은 파란색
• "negcolor","red": 음수는 빨간색
• "axis",true: 축은 true(true는 '참'이므로, 축을 그린다, false는 그리지 않음)
• "lowcolor","orange": 가장 작은 값의 색상은오렌지색
• "highcolor","lime": 가장 큰 값의 색상은 라임색

 

SPARKLINE 함수 옵션

charttype - 차트 종류

옵션	값
line	선 차트(꺽은선), 지정하지 않을 때 기본값으로 사용됨
bar	누적 막대 차트
column	열 차트
winloss	승/패 차트

line 차트에서 사용가능한 옵션

옵션	값
xmin	X축(가로축)의 최소값
xmax	X축(가로축)의 최대값
ymin	Y축(세로축)의 최소값
ymax	Y축(세로축)의 최대값
color	선 차트의 색상
empty	빈 셀 처리 방법 - zero: 빈셀을 0으로 처리, ignore: 처리하지 않고 무시됨
nan	숫자가 아닌 데이터가 들어 있는 셀을 처리하는 방법 - convert: 셀을 0으로 처리, ignore: 처리하지 않고 무시됨
rtl	차트를 오른쪽에서 왼쪽으로 그리기 - true: 차트를 오른쪽에서 왼쪽으로 그리기, false: 왼쪽에서 오른쪽으로 그리기
linewidth	선 차트 너비 지정, 숫자가 높을수록 선의 너비가 두꺼워짐

column 및 winloss 차트에서 사용가능한 옵션

옵션	값
color	차트의 색상
lowcolor	차트의 최저값에 사용할 색상
highcolor	차트의 최고값에 사용할 색상
firstcolor	첫 번째 열의 색상
lastcolor	마지막 열의 색상
negcolor	모든 음수 열의 색상
empty	빈 셀 처리 방법 - zero: 빈셀을 0으로 처리, ignore: 처리하지 않고 무시됨
nan	숫자가 아닌 데이터가 들어 있는 셀을 처리하는 방법 - convert: 셀을 0으로 처리, ignore: 처리하지 않고 무시됨
axis	축 표시 여부 - true: 축을 표시, false: 축을 표시하지 않음
axiscolor	축의 색상
ymin	열의 높이를 조정하기 위해 사용해야 하는 맞춤 최소 데이터 값
ymax	열의 높이를 조정하기 위해 사용해야 하는 맞춤 최대 데이터 값
rtl	차트를 오른쪽에서 왼쪽으로 그리기 - true: 차트를 오른쪽에서 왼쪽으로 그리기, false: 왼쪽에서 오른쪽으로 그리

bar 차트에서 사용가능한 옵션

옵션	값
max	가로축의 최대값
color1	차트의 막대에 사용되는 첫 번째 색상
color2	차트의 막대에 사용되는 두 번째 색상
empty	빈 셀 처리 방법 - zero: 빈셀을 0으로 처리, ignore: 처리하지 않고 무시됨
nan	숫자가 아닌 데이터가 들어 있는 셀을 처리하는 방법 - convert: 셀을 0으로 처리, ignore: 처리하지 않고 무시됨
rtl	차트를 오른쪽에서 왼쪽으로 그리기 - true: 차트를 오른쪽에서 왼쪽으로 그리기, false: 왼쪽에서 오른쪽으로 그리기

 

---

관련 글