charts.md

Charts

KVision Chart component is based on awesome Chart.js 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 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.

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.

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.

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).

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 app in the kvision-examples repository on GitHub.