KVision
Primary version
Primary version
  • KVision Guide
  • Introduction
  • Migration
    • Migration from 8.x to 9.x
    • Migration from 7.x to 8.x
    • Migration from 6.x to 7.x
    • Migration from 5.x to 6.x
    • Migration from 4.x to 5.x
  • 1. Getting Started
    • Setting Up
    • Modules
    • Creating a New Application
    • Development Workflow
    • Hot Module Replacement
    • Debugging
    • Building For Production
  • 2. Frontend Development Guide
    • UI Structure
    • Root Container
    • Theming
    • Dark mode
    • Type safe CSS Properties
    • Basic Components
    • Icons and Images
    • Buttons and Toolbars
    • Layout Containers
    • Events
    • Working with State
    • DOM Bindings & Lifecycle Hooks
    • W3C, Snabdom, and KVision Elements
    • Forms
    • Form controls
    • Drag and drop
    • Internationalization
    • Adding custom tags (SVG example)
    • Custom components
  • 3. Optional UI Functionality (via modules)
    • Using Redux
    • Bootstrap
      • Navigation and menus
      • Tooltips and popovers
      • Modals, windows and toasts
    • Charts
    • Toasts
    • Tabulator Tables
    • Handlebars.js Templates
    • JS Routing with Navigo
    • jQuery Bindings
    • Using REST Services
  • 4. Integrating With Javascript Libraries
    • Integrating With React Components
  • 5. Fullstack Development Guide
    • Select Remote
    • Tom Select Remote
    • Tom Typeahead Remote
    • Tabulator Remote
  • FAQ
  • Useful References
Powered by GitBook
On this page
  1. 3. Optional UI Functionality (via modules)

Charts

PreviousModals, windows and toastsNextToasts

Last updated 27 days ago

KVision Chart component is based on awesome 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 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 app in the repository on GitHub.

Chart.js
Chart.js documentation
Showcase
kvision-examples