Android(JetpackCompose)でグラフを表示させる方法

```
 vico ver 1.13.1
```
## 準備
まずVicoの公式ページのGetting startedを見ながら依存関係にvicoを追加する。
[Getting started](https://patrykandpatrick.com/vico/wiki/getting-started)
```gradle
dependencies {
    // For Jetpack Compose.
    implementation("com.patrykandpatrick.vico:compose:1.13.1")

    // For `compose`. Creates a `ChartStyle` based on an M2 Material Theme.
    implementation("com.patrykandpatrick.vico:compose-m2:1.13.1")

    // For `compose`. Creates a `ChartStyle` based on an M3 Material Theme.
    implementation("com.patrykandpatrick.vico:compose-m3:1.13.1")

    // Houses the core logic for charts and other elements. Included in all other modules.
    implementation("com.patrykandpatrick.vico:core:1.13.1")

    // For the view system.
    implementation("com.patrykandpatrick.vico:views:1.13.1")
}
```

## 作成
まずは、最低限のグラフ
```kotlin
@Composable
fun GraphScreen() {
    val chartEntryModel = entryModelOf(5f, 3f, 4f, 2f, 1f)
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center
    ) {
        Chart(
            chart = lineChart(),
            model = chartEntryModel,
        )
    }
}
```
これを表示させるとこのようになります↓
<img style="height: 300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986357/aa07533c-9d38-a8c3-9865-85c486cbd037.png"/>

次はX軸とY軸を追加してみます。
```kotlin
@Composable
fun GraphScreen() {
    val chartEntryModel = entryModelOf(5f, 3f, 4f, 2f, 1f)
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center
    ) {
        Chart(
            chart = lineChart(),
            model = chartEntryModel,
            startAxis = rememberStartAxis(),
            bottomAxis = rememberBottomAxis(),
        )
    }
}
```
<img style="height: 300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986357/f3f52f1d-2147-0a2b-d408-8440911e9420.png"/>

次はX軸をカスタマイズしてみます。
```kotlin
@Composable
fun GraphScreen() {
    val chartEntryModel = entryModelOf(5f, 3f, 4f, 2f, 1f)
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center
    ) {
        Chart(
            chart = lineChart(),
            model = chartEntryModel,
            startAxis = rememberStartAxis(),
            bottomAxis = rememberBottomAxis(
                title = "日付",
                titleComponent = TextComponent.Builder().build(),
                valueFormatter = { value, _ ->
                    val date = LocalDate.now().plusDays(value.toLong())
                    DateTimeFormatter.ofPattern("MM月dd日").format(date)
                }
            ),
        )
    }
}
```
<img style="height: 300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986357/1e735726-a4ca-b399-149f-d9f72179785d.png"/>

変わったのはbootomAxisの指定です。
まず、titleとtitleComponentを指定する事で軸のタイトルを表示しています。
ここで注意なのが、titleだけしてしても軸のタイトルは表示されないという事です。しっかりtitleとtitleComponentの両方を指定しましょう。

```kotlin
title = "日付",
titleComponent = TextComponent.Builder().build(),
```
次にvalueFormatterを指定して軸の値の表示をカスタムしています。
ここでは、日付に変換していますが、返す値を変更する事で様々な表示ができます。
```kotlin
valueFormatter = { value, _ ->
                    val date = LocalDate.now().plusDays(value.toLong())
                    DateTimeFormatter.ofPattern("MM月dd日").format(date)
                }
```