# 헤더 

## Content

헤더(header)는 데이터 차트의 상단에 나타나는 텍스트 필드입니다. 헤더는 차트의 주제와 표시되는 데이터를 빠르게 이해할 수 있도록 전체적인 정보나 식별 정보를 제공합니다.
`GC.Spread.Sheets.DataCharts` 네임스페이스의 `IHeaderOption` 인터페이스 속성(`title`, `textStyle` 등)을 사용하여 데이터 차트에 헤더를 추가하고 사용자 정의할 수 있습니다.

### 헤더 속성

아래는 `IHeaderOption` 인터페이스의 주요 속성 목록입니다:

| 속성 | 설명 | 샘플 미리보기 |
| --- | --- | ------- |
| title | 데이터 차트의 헤더 영역에 표시될 텍스트 콘텐츠를 설정합니다. | ![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/9c3d6948-546a-4e49-bd0d-d1a9991a1a68/image.41b7b1.png) |
| textStyle | 헤더 텍스트에 대한 스타일을 설정합니다. 예: 글꼴 패밀리, 글꼴 크기, 스타일, 굵기 등 | ![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/9c3d6948-546a-4e49-bd0d-d1a9991a1a68/image.8b7fb5.png) |
| padding | 헤더 영역의 안쪽 여백을 설정합니다. | ![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/9c3d6948-546a-4e49-bd0d-d1a9991a1a68/image.b54d03.png) |
| style | 헤더 영역의 스타일을 설정합니다. 예: 배경색, 테두리 스타일 등 | ![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/9c3d6948-546a-4e49-bd0d-d1a9991a1a68/image.1af0b9.png) |

## 코드 예제

아래 코드 샘플은 데이터 차트에 사용자 정의 헤더를 구성하는 방법을 보여줍니다.
이 코드 샘플은 [데이터 차트 생성하기 ](/spreadjs/docs/v18/features/data-charts/create-data-charts)페이지에서 설명된 `salesTable` 데이터를 사용하므로, 먼저 해당 페이지의 기본 단계를 완료해야 합니다. 설정이 완료되면 아래 코드를 사용하여 헤더 요소를 구성할 수 있으며, 데이터 소스는 필요에 따라 자유롭게 사용자 정의할 수 있습니다.

```javascript
// 차트 헤더
const sheet = spread.getSheet(0);
sheet.name("Chart Header");
const dataChart = sheet.dataCharts.add('data-chart-1', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);

dataChart.setChartConfig({
    tableName: 'Sales',
    config: {
        // Configure the Header
        header: {             // GC.Spread.Sheets.DataCharts.IHeaderOption 인터페이스
            title: "My DataChart",      // 문자열
            textStyle: {          // GC.Spread.Sheets.DataCharts.ITextStyleOption 인터페이스
                alignment: GC.Spread.Sheets.DataCharts.HAlign.center,
                color: "#9f3b47",
                fontFamily: "Century",
                fontSize: 18,
                fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
                fontWeight: "Bold",
                writingMode: GC.Spread.Sheets.DataCharts.Orientation.horizontal,
                textDecoration: { underline: true },
            },
            padding: {       // GC.Spread.Sheets.DataCharts.IPaddingOption
                top: 10,
                bottom: 10
            },
            height: 30,      // 숫자
            style: {         // GC.Spread.Sheets.DataCharts.IStyleOption
                fill: { type: "CssColor", color: "#dfeeea" },
                fillOpacity: 0.7,
                stroke: { type: "CssColor", color: "#aaaaaa" },
                strokeDasharray: "0.5,0.5",
                strokeOpacity: 0.7,
                strokeWidth: 1
            }
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.column,
            encodings: {
                values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                category: { field: 'Product' },
                color: { field: 'Product' },
            }
        }
    ]
});
```