# Charts

KVision Chart component is based on awesome [Chart.js](https://www.chartjs.org/) library. It allows you to create many different types of charts with a lot of options and additional functionalities. This component is contained in kvision-chart module. KVision adds Kotlin type-safe bindings for most of Chart.js API but you should get familiar with [Chart.js documentation](https://www.chartjs.org/docs/latest/) to achieve best results.

To create a chart use `io.kvision.chart.Chart` class. Its constructor takes one required parameter of `io.kvision.chart.Configuration` class. The configuration object specifies both the data and the options for the chart.

```kotlin
chart(
    Configuration(
        ChartType.BAR,
        listOf(DataSets(data = listOf(6, 12, 19, 13, 7))), 
        listOf("Africa", "Asia", "Europe", "Latin America", "North America")
    )
)
```

By default the chart component is responsive - its size is calculated based on the size of the outer container. You can set `responsive` option to `false` and use additional constructor parameters, `chartWidth` and `chartHeight` , to create the chart with a fixed size.

```kotlin
chart(
    Configuration(
        ChartType.BAR,
        listOf(DataSets(data = listOf(6, 12, 19, 13, 7))),
        listOf("Africa", "Asia", "Europe", "Latin America", "North America"),
        ChartOptions(responsive = false)
    ), 200, 200
)
```

When specifying colors (for lines, points, backgrounds, legend, title, hovers etc.) use KVision's `Color` class.

```kotlin
chart(
    Configuration(
        ChartType.POLARAREA,
        listOf(
            DataSets(
                data = listOf(6, 12, 19, 13, 7),
                backgroundColor = listOf(
                    Color.hex(0x3e95cd),
                    Color.hex(0x8e5ea2),
                    Color.hex(0x3cba9f),
                    Color.hex(0xe8c3b9),
                    Color.hex(0xc45850)
                )
            )
        ), listOf("Africa", "Asia", "Europe", "Latin America", "North America")
    )
)
```

Internationalization of chart textual data is also fully supported (including dynamic language change).

```kotlin
chart(
    Configuration(
        ChartType.BAR,
        listOf(
            DataSets(
                data = listOf(6, 12, 19, 13, 7)
            )
        ), listOf(
            tr("Africa"),
            tr("Asia"),
            tr("Europe"),
            tr("Latin America"),
            tr("North America")
        )
    )
)
```

You can find more examples of charts usage in the [Showcase](https://rjaros.github.io/kvision-examples/showcase/#!/charts) app in the [kvision-examples](https://github.com/rjaros/kvision-examples) repository on GitHub.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kvision.gitbook.io/kvision-guide/3.-optional-ui-functionality-via-modules/charts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.