New module with support for drawing charts based on chart.js library.

14 files changed, 2154 insertions, 1 deletions

diff --git a/Module.md b/Module.md
index 1835c8f8..efb79929 100644
--- a/Module.md
+++ b/Module.md
@@ -7,6 +7,14 @@ KVision - object oriented Web UI framework for Kotlin/JS.
 KVision core classes. This includes base interfaces for all components, CSS enums (for colors, borders, 
 backgrounds, fonts, text and position) and the main Widget class.
 
+# Package pl.treksoft.kvision.chart
+
+Full-featured chart component based on chart.js library.
+
+# Package pl.treksoft.kvision.chart.js
+
+Kotlin bindings for chart.js API.
+
 # Package pl.treksoft.kvision.data
 
 Base component and container class with data binding support for observable data model.
diff --git a/build.gradle b/build.gradle
index c2610971..ce6e62e1 100644
--- a/build.gradle
+++ b/build.gradle
@@ -167,6 +167,7 @@ dokka {
             'kvision-modules/kvision-upload/src/main/kotlin',
             'kvision-modules/kvision-handlebars/src/main/kotlin',
             'kvision-modules/kvision-i18n/src/main/kotlin',
+            'kvision-modules/kvision-chart/src/main/kotlin',
             'kvision-modules/kvision-remote/src/main/kotlin',
             'kvision-modules/kvision-select-remote/src/main/kotlin',
             'kvision-modules/kvision-common/src/main/kotlin',
diff --git a/kvision-modules/kvision-chart/build.gradle b/kvision-modules/kvision-chart/build.gradle
new file mode 100644
index 00000000..4d4ba4df
--- /dev/null
+++ b/kvision-modules/kvision-chart/build.gradle
@@ -0,0 +1,12 @@
+apply from: "../shared.gradle"
+
+kotlinFrontend {
+
+    npm {
+        dependency("chart.js", "2.7.3")
+        devDependency("karma", "3.1.4")
+        devDependency("karma-chrome-launcher", "2.2.0")
+        devDependency("qunit", "2.8.0")
+    }
+
+}
diff --git a/kvision-modules/kvision-chart/package.json.d/project.info b/kvision-modules/kvision-chart/package.json.d/project.info
new file mode 100644
index 00000000..4b4a6303
--- /dev/null
+++ b/kvision-modules/kvision-chart/package.json.d/project.info
@@ -0,0 +1,3 @@
+{
+    "description": "KVision Chart module"
+}
diff --git a/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/KVManagerChart.kt b/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/KVManagerChart.kt
new file mode 100644
index 00000000..73a0f2b9
--- /dev/null
+++ b/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/KVManagerChart.kt
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package pl.treksoft.kvision
+
+internal val kVManagerChartInit = KVManagerChart.init()
+
+/**
+ * Internal singleton object which initializes and configures KVision Chart module.
+ */
+@Suppress("EmptyCatchBlock", "TooGenericExceptionCaught")
+internal object KVManagerChart {
+    fun init() {}
+
+    private val chart = try {
+        require("chart.js/dist/Chart.bundle.min.js")
+    } catch (e: Throwable) {
+    }
+
+}
diff --git a/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/chart/Chart.kt b/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/chart/Chart.kt
new file mode 100644
index 00000000..4681d9c4
--- /dev/null
+++ b/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/chart/Chart.kt
@@ -0,0 +1,129 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package pl.treksoft.kvision.chart
+
+import com.github.snabbdom.VNode
+import pl.treksoft.kvision.chart.js.Chart.ChartConfiguration
+import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.core.Widget
+
+/**
+ * Chart component.
+ *
+ * @constructor
+ * @param configuration chart configuration
+ * @param chartWidth chart width in pixels
+ * @param chartHeight chart height in pixels
+ * @param classes a set of CSS class names
+ */
+open class Chart(
+    configuration: Configuration,
+    chartWidth: Int? = null,
+    chartHeight: Int? = null,
+    classes: Set<String> = setOf()
+) : Widget(classes) {
+
+    /**
+     * Chart configuration.
+     */
+    var configuration
+        get() = chartCanvas.configuration
+        set(value) {
+            chartCanvas.configuration = value
+        }
+
+    internal val chartCanvas: ChartCanvas = ChartCanvas(chartWidth, chartHeight, configuration)
+
+    override fun render(): VNode {
+        return render("div", arrayOf(chartCanvas.renderVNode()))
+    }
+
+    /**
+     * Returns chart configuration in the form of native JS object.
+     */
+    open fun getNativeConfig(): ChartConfiguration? {
+        return chartCanvas.getNativeConfig()
+    }
+
+    /**
+     * Resets the chart.
+     */
+    open fun reset() {
+        chartCanvas.reset()
+    }
+
+    /**
+     * Renders the chart.
+     * @param duration animation duration
+     * @param lazy if true, the animation can be interrupted by other animations
+     */
+    open fun render(duration: Int? = null, lazy: Boolean = false) {
+        chartCanvas.render(duration, lazy)
+    }
+
+    /**
+     * Stops the animation.
+     */
+    open fun stop() {
+        chartCanvas.stop()
+    }
+
+    /**
+     * Resizes the chart to the size of the container.
+     */
+    open fun resizeChart() {
+        chartCanvas.resizeChart()
+    }
+
+    /**
+     * Clears the chart.
+     */
+    open fun clearChart() {
+        chartCanvas.clearChart()
+    }
+
+    /**
+     * Returns a base64 encoded string of the chart in its current state.
+     */
+    open fun toBase64Image(): String? {
+        return chartCanvas.toBase64Image()
+    }
+
+    companion object {
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.chart(
+            configuration: Configuration,
+            chartWidth: Int? = null,
+            chartHeight: Int? = null,
+            classes: Set<String> = setOf(),
+            init: (Chart.() -> Unit)? = null
+        ): Chart {
+            val chart = Chart(configuration, chartWidth, chartHeight, classes).apply { init?.invoke(this) }
+            this.add(chart)
+            return chart
+        }
+    }
+}
diff --git a/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/chart/ChartCanvas.kt b/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/chart/ChartCanvas.kt
new file mode 100644
index 00000000..09b68633
--- /dev/null
+++ b/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/chart/ChartCanvas.kt
@@ -0,0 +1,94 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package pl.treksoft.kvision.chart
+
+import com.github.snabbdom.VNode
+import pl.treksoft.kvision.chart.js.Chart.ChartConfiguration
+import pl.treksoft.kvision.html.Canvas
+import pl.treksoft.kvision.i18n.I18n
+import pl.treksoft.kvision.chart.js.Chart as JsChart
+
+internal class ChartCanvas(
+    canvasWidth: Int? = null,
+    canvasHeight: Int? = null,
+    configuration: Configuration,
+    classes: Set<String> = setOf()
+) :
+    Canvas(canvasWidth, canvasHeight, classes) {
+
+    var configuration: Configuration = configuration
+        set(value) {
+            field = value
+            jsChart?.config = value.toJs(this::translate)
+            jsChart?.update()
+        }
+
+    private var jsChart: JsChart? = null
+
+    override fun render(): VNode {
+        if (lastLanguage != null && lastLanguage != I18n.language) {
+            jsChart?.config = configuration.toJs(this::translate)
+            jsChart?.update()
+        }
+        return render("canvas")
+    }
+
+    override fun afterInsert(node: VNode) {
+        super.afterInsert(node)
+        jsChart =
+            JsChart(this.context2D, configuration.toJs(this::translate))
+    }
+
+    override fun afterDestroy() {
+        jsChart?.destroy()
+        jsChart = null
+    }
+
+    fun getNativeConfig(): ChartConfiguration? {
+        return jsChart?.config
+    }
+
+    fun reset() {
+        jsChart?.reset()
+    }
+
+    fun render(duration: Int? = null, lazy: Boolean = false) {
+        jsChart?.render(duration, lazy)
+    }
+
+    fun stop() {
+        jsChart?.stop()
+    }
+
+    fun resizeChart() {
+        jsChart?.resize()
+    }
+
+    fun clearChart() {
+        jsChart?.clear()
+    }
+
+    fun toBase64Image(): String? {
+        return jsChart?.toBase64Image()
+    }
+
+}
diff --git a/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/chart/Configuration.kt b/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/chart/Configuration.kt
new file mode 100644
index 00000000..7b1cddd6
--- /dev/null
+++ b/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/chart/Configuration.kt
@@ -0,0 +1,919 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+@file:Suppress("TooManyFunctions")
+
+package pl.treksoft.kvision.chart
+
+import org.w3c.dom.events.MouseEvent
+import pl.treksoft.kvision.chart.js.Chart
+import pl.treksoft.kvision.core.Color
+import pl.treksoft.kvision.core.FontStyle
+import pl.treksoft.kvision.utils.obj
+
+
+/**
+ * Chart types.
+ */
+enum class ChartType(internal val type: String) {
+    LINE("line"),
+    BAR("bar"),
+    HORIZONTALBAR("horizontalBar"),
+    RADAR("radar"),
+    DOUGHNUT("doughnut"),
+    PIE("pie"),
+    POLARAREA("polarArea"),
+    BUBBLE("bubble"),
+    SCATTER("scatter")
+}
+
+/**
+ * Chart interaction modes.
+ */
+enum class InteractionMode(internal val mode: String) {
+    POINT("point"),
+    NEAREST("nearest"),
+    INDEX("index"),
+    DATASET("dataset"),
+    X("x"),
+    Y("y")
+}
+
+/**
+ * Chart animation easings.
+ */
+enum class Eeasing(internal val mode: String) {
+    LINEAR("linear"),
+    EASEINQUAD("easeInQuad"),
+    EASEOUTQUAD("easeOutQuad"),
+    EASEINOUTQUAD("easeInOutQuad"),
+    EASEINCUBIC("easeInCubic"),
+    EASEOUTCUBIC("easeOutCubic"),
+    EASEINOUTCUBIC("easeInOutCubic"),
+    EASEINQUART("easeInQuart"),
+    EASEOUTQUART("easeOutQuart"),
+    EASEINOUTQUART("easeInOutQuart"),
+    EASEINQUINT("easeInQuint"),
+    EASEOUTQUINT("easeOutQuint"),
+    EASEINOUTQUINT("easeInOutQuint"),
+    EASEINSINE("easeInSine"),
+    EASEOUTSINE("easeOutSine"),
+    EASEINOUTSINE("easeInOutSine"),
+    EASEINEXPO("easeInExpo"),
+    EASEOUTEXPO("easeOutExpo"),
+    EASEINOUTEXPO("easeInOutExpo"),
+    EASEINCIRC("easeInCirc"),
+    EASEOUTCIRC("easeOutCirc"),
+    EASEINOUTCIRC("easeInOutCirc"),
+    EASEINELASTIC("easeInElastic"),
+    EASEOUTELASTIC("easeOutElastic"),
+    EASEINOUTELASTIC("easeInOutElastic"),
+    EASEINBACK("easeInBack"),
+    EASEOUTBACK("easeOutBack"),
+    EASEINOUTBACK("easeInOutBack"),
+    EASEINBOUNCE("easeInBounce"),
+    EASEOUTBOUNCE("easeOutBounce"),
+    EASEINOUTBOUNCE("easeInOutBounce")
+}
+
+/**
+ * Chart objects positions.
+ */
+enum class Position(internal val position: String) {
+    TOP("top"),
+    LEFT("left"),
+    RIGHT("right"),
+    BOTTOM("bottom")
+}
+
+/**
+ * Chart tooltip positions.
+ */
+enum class TooltipPosition(internal val mode: String) {
+    AVERAGE("average"),
+    NEAREST("nearest")
+}
+
+/**
+ * Chart point styles.
+ */
+enum class PointStyle(internal val style: String) {
+    CIRCLE("circle"),
+    CROSS("cross"),
+    CROSSROT("crossRot"),
+    DASH("dash"),
+    LINE("line"),
+    RECT("rect"),
+    RECTROUNDED("rectRounded"),
+    RECTROT("rectRot"),
+    START("star"),
+    TRIANGLE("triangle")
+}
+
+/**
+ * Chart interpolation modes.
+ */
+enum class InterpolationMode(internal val mode: String) {
+    DEFAULT("default"),
+    MONOTONE("monotone")
+}
+
+/**
+ * Chart scales.
+ */
+enum class ScalesType(internal val type: String) {
+    CATEGORY("category"),
+    LINEAR("linear"),
+    LOGARITHMIC("logarithmic"),
+    TIME("time"),
+    RADIALLINEAR("radialLinear")
+}
+
+/**
+ * Canvas line end point styles.
+ */
+enum class LineCap(internal val mode: String) {
+    BUTT("butt"),
+    ROUND("round"),
+    SQUARE("square")
+}
+
+/**
+ * Canvas line join styles.
+ */
+enum class LineJoin(internal val mode: String) {
+    BEVEL("bevel"),
+    ROUND("round"),
+    MITER("miter")
+}
+
+/**
+ * Chart hover options.
+ */
+data class HoverOptions(
+    val mode: InteractionMode = InteractionMode.NEAREST,
+    val animationDuration: Int = 400,
+    val intersect: Boolean = true,
+    val axis: String = "x"
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+fun HoverOptions.toJs(): dynamic {
+    return obj {
+        this.mode = mode.mode
+        this.animationDuration = animationDuration
+        this.intersect = intersect
+        this.axis = axis
+    }
+}
+
+/**
+ * Chart animation options.
+ */
+data class AnimationOptions(
+    val duration: Int = 1000,
+    var easing: Eeasing = Eeasing.EASEOUTQUART,
+    val onProgress: ((obj: Chart.ChartAnimationObject) -> Unit)? = null,
+    val onComplete: ((obj: Chart.ChartAnimationObject) -> Unit)? = null
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+fun AnimationOptions.toJs(): dynamic {
+    return obj {
+        this.duration = duration
+        this.easing = easing.mode
+        if (onProgress != null) this.onProgress = onProgress
+        if (onComplete != null) this.onComplete = onComplete
+    }
+}
+
+/**
+ * Chart layout padding options.
+ */
+data class LayoutPaddingObject(
+    val top: Int? = null,
+    val right: Int? = null,
+    val bottom: Int? = null,
+    val left: Int? = null
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+fun LayoutPaddingObject.toJs(): dynamic {
+    return obj {
+        if (top != null) this.top = top
+        if (right != null) this.right = right
+        if (bottom != null) this.bottom = bottom
+        if (left != null) this.left = left
+    }
+}
+
+/**
+ * Chart layout options.
+ */
+data class LayoutOptions(val padding: LayoutPaddingObject)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+fun LayoutOptions.toJs(): dynamic {
+    return obj {
+        this.padding = padding.toJs()
+    }
+}
+
+/**
+ * Chart legend label options.
+ */
+data class LegendLabelOptions(
+    val boxWidth: Int = 40,
+    val fontSize: Int = 12,
+    val fontStyle: FontStyle? = null,
+    val fontColor: Color? = null,
+    val fontFamily: String? = null,
+    val padding: Int = 10,
+    val generateLabels: ((chart: Any) -> Any)? = null,
+    val filter: ((legendItem: Chart.ChartLegendLabelItem, data: Chart.ChartData) -> Any)? = null,
+    val usePointStyle: Boolean = false
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+fun LegendLabelOptions.toJs(): dynamic {
+    return obj {
+        this.boxWidth = boxWidth
+        this.fontSize = fontSize
+        if (fontStyle != null) this.fontStyle = fontStyle.name
+        if (fontColor != null) this.fontColor = fontColor.asString()
+        if (fontFamily != null) this.fontFamily = fontFamily
+        this.padding = padding
+        if (generateLabels != null) this.generateLabels = generateLabels
+        if (filter != null) this.filter = filter
+        this.usePointStyle = usePointStyle
+    }
+}
+
+/**
+ * Chart legend options.
+ */
+data class LegendOptions(
+    val display: Boolean = true,
+    val position: Position = Position.TOP,
+    val fullWidth: Boolean = true,
+    val reverse: Boolean = false,
+    val onClick: ((event: MouseEvent, legendItem: Chart.ChartLegendLabelItem) -> Unit)? = null,
+    val onHover: ((event: MouseEvent, legendItem: Chart.ChartLegendLabelItem) -> Unit)? = null,
+    val labels: LegendLabelOptions? = null
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+fun LegendOptions.toJs(): dynamic {
+    return obj {
+        this.display = display
+        this.position = position.position
+        this.fullWidth = fullWidth
+        this.reverse = reverse
+        if (onClick != null) this.onClick = onClick
+        if (onHover != null) this.onHover = onHover
+        if (labels != null) this.labels = labels.toJs()
+    }
+}
+
+/**
+ * Chart title options.
+ */
+data class TitleOptions(
+    val display: Boolean = false,
+    val position: Position = Position.TOP,
+    val fontSize: Int = 12,
+    val fontStyle: FontStyle? = null,
+    val fontColor: Color? = null,
+    val fontFamily: String? = null,
+    val padding: Int = 10,
+    val lineHeight: String? = null,
+    val text: List<String>? = null
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+fun TitleOptions.toJs(i18nTranslator: (String) -> (String)): dynamic {
+    return obj {
+        this.display = display
+        this.position = position.position
+        this.fontSize = fontSize
+        if (fontStyle != null) this.fontStyle = fontStyle.name
+        if (fontColor != null) this.fontColor = fontColor.asString()
+        if (fontFamily != null) this.fontFamily = fontFamily
+        this.padding = padding
+        if (lineHeight != null) this.lineHeight = lineHeight
+        if (text != null) this.text = text.map(i18nTranslator).toTypedArray()
+    }
+}
+
+/**
+ * Chart tooltips callbacks.
+ */
+data class TooltipCallback(
+    val beforeTitle: ((item: Array<Chart.ChartTooltipItem>, data: Chart.ChartData) -> dynamic)? = null,
+    val title: ((item: Array<Chart.ChartTooltipItem>, data: Chart.ChartData) -> dynamic)? = null,
+    val afterTitle: ((item: Array<Chart.ChartTooltipItem>, data: Chart.ChartData) -> dynamic)? = null,
+    val beforeBody: ((item: Array<Chart.ChartTooltipItem>, data: Chart.ChartData) -> dynamic)? = null,
+    val beforeLabel: ((tooltipItem: Chart.ChartTooltipItem, data: Chart.ChartData) -> dynamic)? = null,
+    val label: ((tooltipItem: Chart.ChartTooltipItem, data: Chart.ChartData) -> dynamic)? = null,
+    val labelColor: ((tooltipItem: Chart.ChartTooltipItem, chart: Chart) -> Chart.ChartTooltipLabelColor)? = null,
+    val labelTextColor: ((tooltipItem: Chart.ChartTooltipItem, chart: Chart) -> String)? = null,
+    val afterLabel: ((tooltipItem: Chart.ChartTooltipItem, data: Chart.ChartData) -> dynamic)? = null,
+    val afterBody: ((item: Array<Chart.ChartTooltipItem>, data: Chart.ChartData) -> dynamic)? = null,
+    val beforeFooter: ((item: Array<Chart.ChartTooltipItem>, data: Chart.ChartData) -> dynamic)? = null,
+    val footer: ((item: Array<Chart.ChartTooltipItem>, data: Chart.ChartData) -> dynamic)? = null,
+    val afterFooter: ((item: Array<Chart.ChartTooltipItem>, data: Chart.ChartData) -> dynamic)? = null
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+@Suppress("ComplexMethod")
+fun TooltipCallback.toJs(): dynamic {
+    return obj {
+        if (beforeTitle != null) this.beforeTitle = beforeTitle
+        if (title != null) this.title = title
+        if (afterTitle != null) this.afterTitle = afterTitle
+        if (beforeBody != null) this.beforeBody = beforeBody
+        if (beforeLabel != null) this.beforeLabel = beforeLabel
+        if (label != null) this.label = label
+        if (labelColor != null) this.labelColor = labelColor
+        if (labelTextColor != null) this.labelTextColor = labelTextColor
+        if (afterLabel != null) this.afterLabel = afterLabel
+        if (afterBody != null) this.afterBody = afterBody
+        if (beforeFooter != null) this.beforeFooter = beforeFooter
+        if (footer != null) this.footer = footer
+        if (afterFooter != null) this.afterFooter = afterFooter
+    }
+}
+
+/**
+ * Chart tooltip options.
+ */
+data class TooltipOptions(
+    val enabled: Boolean = true,
+    val custom: ((a: Any) -> Unit)? = null,
+    val mode: InteractionMode = InteractionMode.NEAREST,
+    val intersect: Boolean = true,
+    val position: TooltipPosition = TooltipPosition.AVERAGE,
+    val callbacks: TooltipCallback? = null,
+    val filter: ((item: Chart.ChartTooltipItem, data: Chart.ChartData) -> Boolean)? = null,
+    val itemSort: ((itemA: Chart.ChartTooltipItem, itemB: Chart.ChartTooltipItem) -> Number)? = null,
+    val backgroundColor: Color? = null,
+    val titleFontSize: Int = 12,
+    val titleFontStyle: FontStyle? = null,
+    val titleFontColor: Color? = null,
+    val titleFontFamily: String? = null,
+    val titleSpacing: Int = 2,
+    val titleMarginBottom: Int = 6,
+    val bodyFontSize: Int = 12,
+    val bodyFontStyle: FontStyle? = null,
+    val bodyFontColor: Color? = null,
+    val bodyFontFamily: String? = null,
+    val bodySpacing: Int = 2,
+    val footerFontSize: Int = 12,
+    val footerFontStyle: FontStyle? = null,
+    val footerFontColor: Color? = null,
+    val footerFontFamily: String? = null,
+    val footerSpacing: Int = 2,
+    val footerMarginTop: Int = 6,
+    val xPadding: Int = 6,
+    val yPadding: Int = 6,
+    val caretPadding: Int = 2,
+    val caretSize: Int = 5,
+    val cornerRadius: Int = 6,
+    val multiKeyBackground: Color? = null,
+    val displayColors: Boolean = true,
+    val borderColor: Color? = null,
+    val borderWidth: Int = 0
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+@Suppress("ComplexMethod")
+fun TooltipOptions.toJs(): dynamic {
+    return obj {
+        this.enabled = enabled
+        if (custom != null) this.custom = custom
+        this.mode = mode.mode
+        this.intersect = intersect
+        this.position = position.mode
+        if (callbacks != null) this.callbacks = callbacks.toJs()
+        if (filter != null) this.filter = filter
+        if (itemSort != null) this.itemSort = itemSort
+        if (backgroundColor != null) this.backgroundColor = backgroundColor.asString()
+        this.titleFontSize = titleFontSize
+        if (titleFontStyle != null) this.titleFontStyle = titleFontStyle.name
+        if (titleFontColor != null) this.titleFontColor = titleFontColor.asString()
+        if (titleFontFamily != null) this.titleFontFamily = titleFontFamily
+        this.titleSpacing = titleSpacing
+        this.titleMarginBottom = titleMarginBottom
+        this.bodyFontSize = bodyFontSize
+        if (bodyFontStyle != null) this.bodyFontStyle = bodyFontStyle.name
+        if (bodyFontColor != null) this.bodyFontColor = bodyFontColor.asString()
+        if (bodyFontFamily != null) this.bodyFontFamily = bodyFontFamily
+        this.bodySpacing = bodySpacing
+        this.footerFontSize = footerFontSize
+        if (footerFontStyle != null) this.footerFontStyle = footerFontStyle.name
+        if (footerFontColor != null) this.footerFontColor = footerFontColor.asString()
+        if (footerFontFamily != null) this.footerFontFamily = footerFontFamily
+        this.footerSpacing = footerSpacing
+        this.footerMarginTop = footerMarginTop
+        this.xPadding = xPadding
+        this.yPadding = yPadding
+        this.caretPadding = caretPadding
+        this.caretSize = caretSize
+        this.cornerRadius = cornerRadius
+        if (multiKeyBackground != null) this.multiKeyBackground = multiKeyBackground.asString()
+        this.displayColors = displayColors
+        if (borderColor != null) this.borderColor = borderColor.asString()
+        this.borderWidth = borderWidth
+    }
+}
+
+/**
+ * Chart point options.
+ */
+data class PointOptions(
+    val radius: Int = 3,
+    val pointStyle: PointStyle = PointStyle.CIRCLE,
+    val backgroundColor: Color? = null,
+    val borderWidth: Int = 1,
+    val borderColor: Color? = null,
+    val hitRadius: Int = 1,
+    val hoverRadius: Int = 4,
+    val hoverBorderWidth: Int = 1
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+fun PointOptions.toJs(): dynamic {
+    return obj {
+        this.radius = radius
+        this.pointStyle = pointStyle.style
+        if (backgroundColor != null) this.backgroundColor = backgroundColor.asString()
+        this.borderWidth = borderWidth
+        if (borderColor != null) this.borderColor = borderColor.asString()
+        this.hitRadius = hitRadius
+        this.hoverRadius = hoverRadius
+        this.hoverBorderWidth = hoverBorderWidth
+    }
+}
+
+/**
+ * Chart line options.
+ */
+data class LineOptions(
+    val cubicInterpolationMode: InterpolationMode = InterpolationMode.DEFAULT,
+    val tension: Double = 0.2,
+    val backgroundColor: Color? = null,
+    val borderWidth: Int = 1,
+    val borderColor: Color? = null,
+    val borderCapStyle: LineCap? = null,
+    val borderDash: List<Any>? = null,
+    val borderDashOffset: Int = 0,
+    val borderJoinStyle: LineJoin? = null,
+    val capBezierPoints: Boolean = true,
+    val fill: Boolean = true,
+    val stepped: Boolean = false
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+fun LineOptions.toJs(): dynamic {
+    return obj {
+        this.cubicInterpolationMode = cubicInterpolationMode.mode
+        this.tension = tension
+        if (backgroundColor != null) this.backgroundColor = backgroundColor.asString()
+        this.borderWidth = borderWidth
+        if (borderColor != null) this.borderColor = borderColor.asString()
+        if (borderCapStyle != null) this.borderCapStyle = borderCapStyle.mode
+        if (borderDash != null) this.borderDash = borderDash.toTypedArray()
+        this.borderDashOffset = borderDashOffset
+        if (borderJoinStyle != null) this.borderJoinStyle = borderJoinStyle.mode
+        this.capBezierPoints = capBezierPoints
+        this.fill = fill
+        this.stepped = stepped
+    }
+}
+
+/**
+ * Chart arc options.
+ */
+data class ArcOptions(
+    val backgroundColor: Color? = null,
+    val borderColor: Color? = null,
+    val borderWidth: Int = 2
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+fun ArcOptions.toJs(): dynamic {
+    return obj {
+        if (backgroundColor != null) this.backgroundColor = backgroundColor.asString()
+        if (borderColor != null) this.borderColor = borderColor.asString()
+        this.borderWidth = borderWidth
+    }
+}
+
+/**
+ * Chart rectangle options.
+ */
+data class RectangleOptions(
+    val backgroundColor: Color? = null,
+    val borderColor: Color? = null,
+    val borderWidth: Int = 0,
+    val borderSkipped: Position = Position.BOTTOM
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+fun RectangleOptions.toJs(): dynamic {
+    return obj {
+        if (backgroundColor != null) this.backgroundColor = backgroundColor.asString()
+        if (borderColor != null) this.borderColor = borderColor.asString()
+        this.borderWidth = borderWidth
+        this.borderSkipped = borderSkipped.position
+    }
+}
+
+/**
+ * Chart elements options.
+ */
+data class ElementsOptions(
+    val point: PointOptions? = null,
+    val line: LineOptions? = null,
+    val arc: ArcOptions? = null,
+    val rectangle: RectangleOptions? = null
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+fun ElementsOptions.toJs(): dynamic {
+    return obj {
+        if (point != null) this.point = point.toJs()
+        if (line != null) this.line = line.toJs()
+        if (arc != null) this.arc = arc.toJs()
+        if (rectangle != null) this.rectangle = rectangle.toJs()
+    }
+}
+
+/**
+ * Chart grid line options.
+ */
+data class GridLineOptions(
+    val display: Boolean = true,
+    val color: Color? = null,
+    val borderDash: List<Int>? = null,
+    val borderDashOffset: Int = 0,
+    val lineWidth: Int = 1,
+    val drawBorder: Boolean = true,
+    val drawOnChartArea: Boolean = true,
+    val drawTicks: Boolean = true,
+    val tickMarkLength: Int = 10,
+    val zeroLineWidth: Int = 1,
+    val zeroLineColor: Color? = null,
+    val zeroLineBorderDash: List<Int>? = null,
+    val zeroLineBorderDashOffset: Int = 0,
+    val offsetGridLines: Boolean = false
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+fun GridLineOptions.toJs(): dynamic {
+    return obj {
+        this.display = display
+        if (color != null) this.color = color.asString()
+        if (borderDash != null) this.borderDash = borderDash.toTypedArray()
+        this.borderDashOffset = borderDashOffset
+        this.lineWidth = lineWidth
+        this.drawBorder = drawBorder
+        this.drawOnChartArea = drawOnChartArea
+        this.drawTicks = drawTicks
+        this.tickMarkLength = tickMarkLength
+        this.zeroLineWidth = zeroLineWidth
+        if (zeroLineColor != null) this.zeroLineColor = zeroLineColor.asString()
+        if (zeroLineBorderDash != null) this.zeroLineBorderDash = zeroLineBorderDash.toTypedArray()
+        this.zeroLineBorderDashOffset = zeroLineBorderDashOffset
+        this.offsetGridLines = offsetGridLines
+    }
+}
+
+/**
+ * Chart scale title options.
+ */
+data class ScaleTitleOptions(
+    val display: Boolean = false,
+    val labelString: String? = null,
+    val fontSize: Int = 12,
+    val fontStyle: FontStyle? = null,
+    val fontColor: Color? = null,
+    val fontFamily: String? = null
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+fun ScaleTitleOptions.toJs(i18nTranslator: (String) -> (String)): dynamic {
+    return obj {
+        this.display = display
+        if (labelString != null) this.labelString = i18nTranslator(labelString)
+        this.fontSize = fontSize
+        if (fontStyle != null) this.fontStyle = fontStyle.name
+        if (fontColor != null) this.fontColor = fontColor.asString()
+        if (fontFamily != null) this.fontFamily = fontFamily
+    }
+}
+
+/**
+ * Chart tick options.
+ */
+data class TickOptions(
+    val callback: ((value: Any, index: Any, values: Any) -> dynamic)? = null,
+    val display: Boolean = true,
+    val fontSize: Int = 12,
+    val fontStyle: FontStyle? = null,
+    val fontColor: Color? = null,
+    val fontFamily: String? = null,
+    val reverse: Boolean = false,
+    val minor: dynamic = null,
+    val major: dynamic = null
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+fun TickOptions.toJs(): dynamic {
+    return obj {
+        if (callback != null) this.callback = callback
+        this.display = display
+        this.fontSize = fontSize
+        if (fontStyle != null) this.fontStyle = fontStyle.name
+        if (fontColor != null) this.fontColor = fontColor.asString()
+        if (fontFamily != null) this.fontFamily = fontFamily
+        this.reverse = reverse
+        if (minor != null) this.minor = minor
+        if (major != null) this.major = major
+    }
+}
+
+/**
+ * Chart scales.
+ */
+data class ChartScales(
+    val type: ScalesType? = null,
+    val display: Boolean = true,
+    val position: Position? = null,
+    val gridLines: GridLineOptions? = null,
+    val scaleLabel: ScaleTitleOptions? = null,
+    val ticks: TickOptions? = null,
+    val xAxes: List<dynamic>? = null,
+    val yAxes: List<dynamic>? = null
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+fun ChartScales.toJs(i18nTranslator: (String) -> (String)): dynamic {
+    return obj {
+        if (type != null) this.type = type.type
+        this.display = display
+        if (position != null) this.position = position.position
+        if (gridLines != null) this.gridLines = gridLines.toJs()
+        if (scaleLabel != null) this.scaleLabel = scaleLabel.toJs(i18nTranslator)
+        if (ticks != null) this.ticks = ticks.toJs()
+        if (xAxes != null) this.xAxes = xAxes.toTypedArray()
+        if (yAxes != null) this.yAxes = yAxes.toTypedArray()
+    }
+}
+
+/**
+ * Chart options.
+ */
+data class Options(
+    val responsive: Boolean = true,
+    val responsiveAnimationDuration: Int = 0,
+    val aspectRatio: Int = 2,
+    val maintainAspectRatio: Boolean = true,
+    val onResize: ((chart: Chart, newSize: Chart.ChartSize) -> Unit)? = null,
+    val devicePixelRatio: Int? = null,
+    val hover: HoverOptions? = null,
+    val events: List<String>? = null,
+    val onHover: ((chart: Chart, event: MouseEvent, activeElements: Array<Any>) -> Any)? = null,
+    val onClick: ((chart: Chart, event: MouseEvent, activeElements: Array<Any>) -> Any)? = null,
+    val animation: AnimationOptions? = null,
+    val layout: LayoutOptions? = null,
+    val legend: LegendOptions? = null,
+    val legendCallback: ((chart: Chart) -> String)? = null,
+    val title: TitleOptions? = null,
+    val tooltips: TooltipOptions? = null,
+    val elements: ElementsOptions? = null,
+    val scales: ChartScales? = null,
+    val showLines: Boolean? = null,
+    val spanGaps: Boolean? = null,
+    val cutoutPercentage: Int? = null,
+    val circumference: Double? = null,
+    val rotation: Double? = null
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+@Suppress("ComplexMethod")
+fun Options.toJs(i18nTranslator: (String) -> (String)): dynamic {
+    return obj {
+        this.responsive = responsive
+        this.responsiveAnimationDuration = responsiveAnimationDuration
+        this.aspectRatio = aspectRatio
+        this.maintainAspectRatio = maintainAspectRatio
+        if (onResize != null) this.onResize = onResize
+        if (devicePixelRatio != null) this.devicePixelRatio = devicePixelRatio
+        if (hover != null) this.hover = hover.toJs()
+        if (events != null) this.events = events.toTypedArray()
+        if (onHover != null) this.onHover = onHover
+        if (onClick != null) this.onClick = onClick
+        if (animation != null) this.animation = animation.toJs()
+        if (layout != null) this.layout = layout.toJs()
+        if (legend != null) this.legend = legend.toJs()
+        if (legendCallback != null) this.legendCallback = legendCallback
+        if (title != null) this.title = title.toJs(i18nTranslator)
+        if (tooltips != null) this.tooltips = tooltips.toJs()
+        if (elements != null) this.elements = elements.toJs()
+        if (scales != null) this.scales = scales.toJs(i18nTranslator)
+        if (showLines != null) this.showLines = showLines
+        if (spanGaps != null) this.spanGaps = spanGaps
+        if (cutoutPercentage != null) this.cutoutPercentage = cutoutPercentage
+        if (circumference != null) this.circumference = circumference
+        if (rotation != null) this.rotation = rotation
+    }
+}
+
+/**
+ * Chart data sets.
+ */
+data class DataSets(
+    val cubicInterpolationMode: InterpolationMode? = null,
+    val backgroundColor: List<Color>? = null,
+    val borderWidth: List<Int>? = null,
+    val borderColor: List<Color>? = null,
+    val borderCapStyle: List<LineCap>? = null,
+    val borderDash: List<Int>? = null,
+    val borderDashOffset: Int? = null,
+    val borderJoinStyle: List<LineJoin>? = null,
+    val borderSkipped: List<Position>? = null,
+    val data: List<dynamic>? = null,
+    val fill: Boolean? = null,
+    val hoverBackgroundColor: List<Color>? = null,
+    val hoverBorderColor: List<Color>? = null,
+    val hoverBorderWidth: List<Int>? = null,
+    val label: String? = null,
+    val lineTension: Number? = null,
+    val steppedLine: Boolean? = null,
+    val pointBorderColor: List<Color>? = null,
+    val pointBackgroundColor: List<Color>? = null,
+    val pointBorderWidth: List<Int>? = null,
+    val pointRadius: List<Int>? = null,
+    val pointHoverRadius: List<Int>? = null,
+    val pointHitRadius: List<Int>? = null,
+    val pointHoverBackgroundColor: List<Color>? = null,
+    val pointHoverBorderColor: List<Color>? = null,
+    val pointHoverBorderWidth: List<Int>? = null,
+    val pointStyle: List<PointStyle>? = null,
+    val xAxisID: String? = null,
+    val yAxisID: String? = null,
+    val type: ChartType? = null,
+    val hidden: Boolean? = null,
+    val hideInLegendAndTooltip: Boolean? = null,
+    val showLine: Boolean? = null,
+    val stack: String? = null,
+    val spanGaps: Boolean? = null
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+@Suppress("ComplexMethod")
+fun DataSets.toJs(i18nTranslator: (String) -> (String)): dynamic {
+    return obj {
+        if (cubicInterpolationMode != null) this.cubicInterpolationMode = cubicInterpolationMode.mode
+        if (backgroundColor != null) this.backgroundColor =
+            backgroundColor.map { it.asString() }.toTypedArray().checkSingleValue()
+        if (borderWidth != null) this.borderWidth = borderWidth.toTypedArray().checkSingleValue()
+        if (borderColor != null) this.borderColor = borderColor.map { it.asString() }.toTypedArray().checkSingleValue()
+        if (borderCapStyle != null) this.borderCapStyle =
+            borderCapStyle.map { it.mode }.toTypedArray().checkSingleValue()
+        if (borderDash != null) this.borderDash = borderDash.toTypedArray()
+        if (borderDashOffset != null) this.borderDashOffset = borderDashOffset
+        if (borderJoinStyle != null) this.borderJoinStyle =
+            borderJoinStyle.map { it.mode }.toTypedArray().checkSingleValue()
+        if (borderSkipped != null) this.borderSkipped =
+            borderSkipped.map { it.position }.toTypedArray().checkSingleValue()
+        if (data != null) this.data = data.toTypedArray()
+        if (fill != null) this.fill = fill
+        if (hoverBackgroundColor != null) this.hoverBackgroundColor =
+            hoverBackgroundColor.map { it.asString() }.toTypedArray().checkSingleValue()
+        if (hoverBorderColor != null) this.hoverBorderColor =
+            hoverBorderColor.map { it.asString() }.toTypedArray().checkSingleValue()
+        if (hoverBorderWidth != null) this.hoverBorderWidth = hoverBorderWidth.toTypedArray().checkSingleValue()
+        if (label != null) this.label = i18nTranslator(label)
+        if (lineTension != null) this.lineTension = lineTension
+        if (steppedLine != null) this.steppedLine = steppedLine
+        if (pointBorderColor != null) this.pointBorderColor =
+            pointBorderColor.map { it.asString() }.toTypedArray().checkSingleValue()
+        if (pointBackgroundColor != null) this.pointBackgroundColor =
+            pointBackgroundColor.map { it.asString() }.toTypedArray().checkSingleValue()
+        if (pointBorderWidth != null) this.pointBorderWidth = pointBorderWidth.toTypedArray().checkSingleValue()
+        if (pointRadius != null) this.pointRadius = pointRadius.toTypedArray().checkSingleValue()
+        if (pointHoverRadius != null) this.pointHoverRadius = pointHoverRadius.toTypedArray().checkSingleValue()
+        if (pointHitRadius != null) this.pointHitRadius = pointHitRadius.toTypedArray().checkSingleValue()
+        if (pointHoverBackgroundColor != null) this.pointHoverBackgroundColor =
+            pointHoverBackgroundColor.map { it.asString() }.toTypedArray().checkSingleValue()
+        if (pointHoverBorderColor != null) this.pointHoverBorderColor =
+            pointHoverBorderColor.map { it.asString() }.toTypedArray().checkSingleValue()
+        if (pointHoverBorderWidth != null) this.pointHoverBorderWidth =
+            pointHoverBorderWidth.toTypedArray().checkSingleValue()
+        if (pointStyle != null) this.pointStyle = pointStyle.map { it.style }.toTypedArray().checkSingleValue()
+        if (xAxisID != null) this.xAxisID = xAxisID
+        if (yAxisID != null) this.yAxisID = yAxisID
+        if (type != null) this.type = type.type
+        if (hidden != null) this.hidden = hidden
+        if (hideInLegendAndTooltip != null) this.hideInLegendAndTooltip = hideInLegendAndTooltip
+        if (showLine != null) this.showLine = showLine
+        if (stack != null) this.stack = stack
+        if (spanGaps != null) this.spanGaps = spanGaps
+    }
+}
+
+/**
+ * Chart configuration.
+ */
+data class Configuration(
+    val type: ChartType,
+    val dataSets: List<DataSets>,
+    val labels: List<String>? = null,
+    val options: Options? = null
+)
+
+/**
+ * An extension function to convert configuration class to JS object.
+ */
+@Suppress("UNCHECKED_CAST_TO_EXTERNAL_INTERFACE")
+fun Configuration.toJs(i18nTranslator: (String) -> (String)): Chart.ChartConfiguration {
+    return obj {
+        this.type = type.type
+        this.data = obj {
+            if (labels != null) this.labels = labels.map(i18nTranslator).toTypedArray()
+            this.datasets = dataSets.map {
+                @Suppress("UnsafeCastFromDynamic")
+                it.toJs(i18nTranslator)
+            }.toTypedArray()
+        }
+        if (options != null) this.options = options.toJs(i18nTranslator)
+    } as Chart.ChartConfiguration
+}
+
+private fun Array<dynamic>.checkSingleValue(): dynamic {
+    if (this.size == 1) {
+        return this[0]
+    } else {
+        return this
+    }
+}
diff --git a/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/chart/js/Chart.kt b/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/chart/js/Chart.kt
new file mode 100644
index 00000000..7fb47bb0
--- /dev/null
+++ b/kvision-modules/kvision-chart/src/main/kotlin/pl/treksoft/kvision/chart/js/Chart.kt
@@ -0,0 +1,691 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+@file:Suppress(
+    "INTERFACE_WITH_SUPERCLASS",
+    "OVERRIDING_FINAL_MEMBER",
+    "RETURN_TYPE_MISMATCH_ON_OVERRIDE",
+    "CONFLICTING_OVERLOADS",
+    "EXTERNAL_DELEGATION",
+    "NESTED_CLASS_IN_EXTERNAL_INTERFACE",
+    "unused", "PropertyName", "TooManyFunctions", "VariableNaming", "MaxLineLength"
+)
+
+package pl.treksoft.kvision.chart.js
+
+import org.w3c.dom.CanvasRenderingContext2D
+import org.w3c.dom.HTMLCanvasElement
+import org.w3c.dom.events.Event
+import org.w3c.dom.events.MouseEvent
+import kotlin.js.Json
+
+external interface Defaults {
+    var global: Chart.ChartOptions /* Chart.ChartOptions & Chart.ChartFontOptions */
+}
+
+@Suppress("NOTHING_TO_INLINE", "UnsafeCastFromDynamic")
+inline operator fun Defaults.get(key: String): Any? = asDynamic()[key]
+
+@Suppress("NOTHING_TO_INLINE")
+inline operator fun Defaults.set(key: String, value: Any) {
+    asDynamic()[key] = value
+}
+
+@Suppress("UNREACHABLE_CODE")
+open external class Chart {
+    constructor(context: String, options: ChartConfiguration)
+    constructor(context: CanvasRenderingContext2D, options: ChartConfiguration)
+    constructor(context: HTMLCanvasElement, options: ChartConfiguration)
+    constructor(
+        context: Array<dynamic /* CanvasRenderingContext2D | HTMLCanvasElement */>,
+        options: ChartConfiguration
+    )
+
+    open var config: ChartConfiguration = definedExternally
+    open var data: ChartData = definedExternally
+    open fun destroy(): Any = definedExternally
+    open fun update(duration: Any? = definedExternally, lazy: Any? = definedExternally): Any = definedExternally
+    open fun render(duration: Any? = definedExternally, lazy: Any? = definedExternally): Any = definedExternally
+    open fun stop(): Any = definedExternally
+    open fun resize(): Any = definedExternally
+    open fun clear(): Any = definedExternally
+    open fun reset(): Any = definedExternally
+    open fun toBase64Image(): String = definedExternally
+    open fun generateLegend(): Any = definedExternally
+    open fun getElementAtEvent(e: Any): Any = definedExternally
+    open fun getElementsAtEvent(e: Any): Array<Any> = definedExternally
+    open fun getDatasetAtEvent(e: Any): Array<Any> = definedExternally
+    open fun getDatasetMeta(index: Number): Meta = definedExternally
+    open var ctx: CanvasRenderingContext2D? = definedExternally
+    open var canvas: HTMLCanvasElement? = definedExternally
+    open var chartArea: ChartArea = definedExternally
+
+    companion object {
+        var Chart: Any? = definedExternally
+        var pluginService: PluginServiceStatic = definedExternally
+        var plugins: PluginServiceStatic = definedExternally
+        var defaults: Defaults = definedExternally
+        var controllers: Json = definedExternally
+        var helpers: Json = definedExternally
+        var Tooltip: ChartTooltipsStaticConfiguration = definedExternally
+    }
+
+    interface ChartArea {
+        var top: Number
+        var right: Number
+        var bottom: Number
+        var left: Number
+    }
+
+    interface ChartLegendItem {
+        var text: String? get() = definedExternally; set(value) = definedExternally
+        var fillStyle: String? get() = definedExternally; set(value) = definedExternally
+        var hidden: Boolean? get() = definedExternally; set(value) = definedExternally
+        var lineCap: dynamic /* String /* "butt" */ | String /* "round" */ | String /* "square" */ */ get() = definedExternally; set(value) = definedExternally
+        var lineDash: Array<Number>? get() = definedExternally; set(value) = definedExternally
+        var lineDashOffset: Number? get() = definedExternally; set(value) = definedExternally
+        var lineJoin: dynamic /* String /* "round" */ | String /* "bevel" */ | String /* "miter" */ */ get() = definedExternally; set(value) = definedExternally
+        var lineWidth: Number? get() = definedExternally; set(value) = definedExternally
+        var strokeStyle: String? get() = definedExternally; set(value) = definedExternally
+        var pointStyle: dynamic /* String /* "line" */ | String /* "circle" */ | String /* "cross" */ | String /* "crossRot" */ | String /* "dash" */ | String /* "rect" */ | String /* "rectRounded" */ | String /* "rectRot" */ | String /* "star" */ | String /* "triangle" */ */ get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartLegendLabelItem : ChartLegendItem {
+        var datasetIndex: Number
+    }
+
+    interface ChartTooltipItem {
+        var xLabel: String? get() = definedExternally; set(value) = definedExternally
+        var yLabel: String? get() = definedExternally; set(value) = definedExternally
+        var datasetIndex: Number? get() = definedExternally; set(value) = definedExternally
+        var index: Number? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartTooltipLabelColor {
+        var borderColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */
+        var backgroundColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */
+    }
+
+    interface ChartTooltipCallback {
+        val beforeTitle: ((item: Array<ChartTooltipItem>, data: ChartData) -> dynamic /* String | Array<String> */)? get() = definedExternally
+        val title: ((item: Array<ChartTooltipItem>, data: ChartData) -> dynamic /* String | Array<String> */)? get() = definedExternally
+        val afterTitle: ((item: Array<ChartTooltipItem>, data: ChartData) -> dynamic /* String | Array<String> */)? get() = definedExternally
+        val beforeBody: ((item: Array<ChartTooltipItem>, data: ChartData) -> dynamic /* String | Array<String> */)? get() = definedExternally
+        val beforeLabel: ((tooltipItem: ChartTooltipItem, data: ChartData) -> dynamic /* String | Array<String> */)? get() = definedExternally
+        val label: ((tooltipItem: ChartTooltipItem, data: ChartData) -> dynamic /* String | Array<String> */)? get() = definedExternally
+        val labelColor: ((tooltipItem: ChartTooltipItem, chart: Chart) -> ChartTooltipLabelColor)? get() = definedExternally
+        val labelTextColor: ((tooltipItem: ChartTooltipItem, chart: Chart) -> String)? get() = definedExternally
+        val afterLabel: ((tooltipItem: ChartTooltipItem, data: ChartData) -> dynamic /* String | Array<String> */)? get() = definedExternally
+        val afterBody: ((item: Array<ChartTooltipItem>, data: ChartData) -> dynamic /* String | Array<String> */)? get() = definedExternally
+        val beforeFooter: ((item: Array<ChartTooltipItem>, data: ChartData) -> dynamic /* String | Array<String> */)? get() = definedExternally
+        val footer: ((item: Array<ChartTooltipItem>, data: ChartData) -> dynamic /* String | Array<String> */)? get() = definedExternally
+        val afterFooter: ((item: Array<ChartTooltipItem>, data: ChartData) -> dynamic /* String | Array<String> */)? get() = definedExternally
+    }
+
+    interface ChartAnimationParameter {
+        var chartInstance: Any? get() = definedExternally; set(value) = definedExternally
+        var animationObject: Any? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartPoint {
+        var x: dynamic /* String | Number | Date */ get() = definedExternally; set(value) = definedExternally
+        var y: dynamic /* String | Number | Date */ get() = definedExternally; set(value) = definedExternally
+        var r: Number? get() = definedExternally; set(value) = definedExternally
+        var t: dynamic /* String | Number | Date */ get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartConfiguration {
+        var type: dynamic /* String /* "line" */ | String /* "bar" */ | String /* "horizontalBar" */ | String /* "radar" */ | String /* "doughnut" */ | String /* "polarArea" */ | String /* "bubble" */ | String /* "pie" */ | String /* "scatter" */ | String */ get() = definedExternally; set(value) = definedExternally
+        var data: ChartData? get() = definedExternally; set(value) = definedExternally
+        var options: ChartOptions? get() = definedExternally; set(value) = definedExternally
+        var plugins: Array<PluginServiceRegistrationOptions>? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartData {
+        var labels: Array<dynamic /* String | Array<String> */>? get() = definedExternally; set(value) = definedExternally
+        var datasets: Array<ChartDataSets>? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface RadialChartOptions : ChartOptions {
+        var scale: RadialLinearScale? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartSize {
+        var height: Number
+        var width: Number
+    }
+
+    interface ChartOptions {
+        var responsive: Boolean? get() = definedExternally; set(value) = definedExternally
+        var responsiveAnimationDuration: Number? get() = definedExternally; set(value) = definedExternally
+        var aspectRatio: Number? get() = definedExternally; set(value) = definedExternally
+        var maintainAspectRatio: Boolean? get() = definedExternally; set(value) = definedExternally
+        var events: Array<String>? get() = definedExternally; set(value) = definedExternally
+        val legendCallback: ((chart: Chart) -> String)? get() = definedExternally
+        val onHover: ((`this`: Chart, event: MouseEvent, activeElements: Array<Any>) -> Any)? get() = definedExternally
+        val onClick: ((event: MouseEvent? /*= null*/, activeElements: Array<Any>? /*= null*/) -> Any)? get() = definedExternally
+        val onResize: ((`this`: Chart, newSize: ChartSize) -> Unit)? get() = definedExternally
+        var title: ChartTitleOptions? get() = definedExternally; set(value) = definedExternally
+        var legend: ChartLegendOptions? get() = definedExternally; set(value) = definedExternally
+        var tooltips: ChartTooltipOptions? get() = definedExternally; set(value) = definedExternally
+        var hover: ChartHoverOptions? get() = definedExternally; set(value) = definedExternally
+        var animation: ChartAnimationOptions? get() = definedExternally; set(value) = definedExternally
+        var elements: ChartElementsOptions? get() = definedExternally; set(value) = definedExternally
+        var layout: ChartLayoutOptions? get() = definedExternally; set(value) = definedExternally
+        var scales: ChartScales? get() = definedExternally; set(value) = definedExternally
+        var showLines: Boolean? get() = definedExternally; set(value) = definedExternally
+        var spanGaps: Boolean? get() = definedExternally; set(value) = definedExternally
+        var cutoutPercentage: Number? get() = definedExternally; set(value) = definedExternally
+        var circumference: Number? get() = definedExternally; set(value) = definedExternally
+        var rotation: Number? get() = definedExternally; set(value) = definedExternally
+        var devicePixelRatio: Number? get() = definedExternally; set(value) = definedExternally
+        var plugins: ChartPluginsOptions? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartFontOptions {
+        var defaultFontColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var defaultFontFamily: String? get() = definedExternally; set(value) = definedExternally
+        var defaultFontSize: Number? get() = definedExternally; set(value) = definedExternally
+        var defaultFontStyle: String? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartTitleOptions {
+        var display: Boolean? get() = definedExternally; set(value) = definedExternally
+        var position: dynamic /* String /* "left" */ | String /* "right" */ | String /* "top" */ | String /* "bottom" */ */ get() = definedExternally; set(value) = definedExternally
+        var fullWidth: Boolean? get() = definedExternally; set(value) = definedExternally
+        var fontSize: Number? get() = definedExternally; set(value) = definedExternally
+        var fontFamily: String? get() = definedExternally; set(value) = definedExternally
+        var fontColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var fontStyle: String? get() = definedExternally; set(value) = definedExternally
+        var padding: Number? get() = definedExternally; set(value) = definedExternally
+        var text: dynamic /* String | Array<String> */ get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartLegendOptions {
+        var display: Boolean? get() = definedExternally; set(value) = definedExternally
+        var position: dynamic /* String /* "left" */ | String /* "right" */ | String /* "top" */ | String /* "bottom" */ */ get() = definedExternally; set(value) = definedExternally
+        var fullWidth: Boolean? get() = definedExternally; set(value) = definedExternally
+        val onClick: ((event: MouseEvent, legendItem: ChartLegendLabelItem) -> Unit)? get() = definedExternally
+        val onHover: ((event: MouseEvent, legendItem: ChartLegendLabelItem) -> Unit)? get() = definedExternally
+        var labels: ChartLegendLabelOptions? get() = definedExternally; set(value) = definedExternally
+        var reverse: Boolean? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartLegendLabelOptions {
+        var boxWidth: Number? get() = definedExternally; set(value) = definedExternally
+        var fontSize: Number? get() = definedExternally; set(value) = definedExternally
+        var fontStyle: String? get() = definedExternally; set(value) = definedExternally
+        var fontColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var fontFamily: String? get() = definedExternally; set(value) = definedExternally
+        var padding: Number? get() = definedExternally; set(value) = definedExternally
+        val generateLabels: ((chart: Any) -> Any)? get() = definedExternally
+        val filter: ((legendItem: ChartLegendLabelItem, data: ChartData) -> Any)? get() = definedExternally
+        var usePointStyle: Boolean? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartTooltipOptions {
+        var enabled: Boolean? get() = definedExternally; set(value) = definedExternally
+        val custom: ((a: Any) -> Unit)? get() = definedExternally
+        var mode: dynamic /* String /* "point" */ | String /* "nearest" */ | String /* "single" */ | String /* "label" */ | String /* "index" */ | String /* "x-axis" */ | String /* "dataset" */ | String /* "x" */ | String /* "y" */ */ get() = definedExternally; set(value) = definedExternally
+        var intersect: Boolean? get() = definedExternally; set(value) = definedExternally
+        var backgroundColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var titleFontFamily: String? get() = definedExternally; set(value) = definedExternally
+        var titleFontSize: Number? get() = definedExternally; set(value) = definedExternally
+        var titleFontStyle: String? get() = definedExternally; set(value) = definedExternally
+        var titleFontColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var titleSpacing: Number? get() = definedExternally; set(value) = definedExternally
+        var titleMarginBottom: Number? get() = definedExternally; set(value) = definedExternally
+        var bodyFontFamily: String? get() = definedExternally; set(value) = definedExternally
+        var bodyFontSize: Number? get() = definedExternally; set(value) = definedExternally
+        var bodyFontStyle: String? get() = definedExternally; set(value) = definedExternally
+        var bodyFontColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var bodySpacing: Number? get() = definedExternally; set(value) = definedExternally
+        var footerFontFamily: String? get() = definedExternally; set(value) = definedExternally
+        var footerFontSize: Number? get() = definedExternally; set(value) = definedExternally
+        var footerFontStyle: String? get() = definedExternally; set(value) = definedExternally
+        var footerFontColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var footerSpacing: Number? get() = definedExternally; set(value) = definedExternally
+        var footerMarginTop: Number? get() = definedExternally; set(value) = definedExternally
+        var xPadding: Number? get() = definedExternally; set(value) = definedExternally
+        var yPadding: Number? get() = definedExternally; set(value) = definedExternally
+        var caretSize: Number? get() = definedExternally; set(value) = definedExternally
+        var cornerRadius: Number? get() = definedExternally; set(value) = definedExternally
+        var multiKeyBackground: String? get() = definedExternally; set(value) = definedExternally
+        var callbacks: ChartTooltipCallback? get() = definedExternally; set(value) = definedExternally
+        val filter: ((item: ChartTooltipItem, data: ChartData) -> Boolean)? get() = definedExternally
+        val itemSort: ((itemA: ChartTooltipItem, itemB: ChartTooltipItem) -> Number)? get() = definedExternally
+        var position: String? get() = definedExternally; set(value) = definedExternally
+        var caretPadding: Number? get() = definedExternally; set(value) = definedExternally
+        var displayColors: Boolean? get() = definedExternally; set(value) = definedExternally
+        var borderColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var borderWidth: Number? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartPluginsOptions
+
+    interface Positioners
+
+    interface ChartTooltipsStaticConfiguration {
+        var positioners: Positioners
+    }
+
+    interface ChartHoverOptions {
+        var mode: dynamic /* String /* "point" */ | String /* "nearest" */ | String /* "single" */ | String /* "label" */ | String /* "index" */ | String /* "x-axis" */ | String /* "dataset" */ | String /* "x" */ | String /* "y" */ */ get() = definedExternally; set(value) = definedExternally
+        var animationDuration: Number? get() = definedExternally; set(value) = definedExternally
+        var intersect: Boolean? get() = definedExternally; set(value) = definedExternally
+        val onHover: ((`this`: Chart, event: MouseEvent, activeElements: Array<Any>) -> Any)? get() = definedExternally
+    }
+
+    interface ChartAnimationObject {
+        var currentStep: Number? get() = definedExternally; set(value) = definedExternally
+        var numSteps: Number? get() = definedExternally; set(value) = definedExternally
+        var easing: String? get() = definedExternally; set(value) = definedExternally
+        val render: ((arg: Any) -> Unit)? get() = definedExternally
+        val onAnimationProgress: ((arg: Any) -> Unit)? get() = definedExternally
+        val onAnimationComplete: ((arg: Any) -> Unit)? get() = definedExternally
+    }
+
+    interface ChartAnimationOptions {
+        var duration: Number? get() = definedExternally; set(value) = definedExternally
+        var easing: String? get() = definedExternally; set(value) = definedExternally
+        val onProgress: ((chart: Any) -> Unit)? get() = definedExternally
+        val onComplete: ((chart: Any) -> Unit)? get() = definedExternally
+        var animateRotate: Boolean? get() = definedExternally; set(value) = definedExternally
+        var animateScale: Boolean? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartElementsOptions {
+        var point: ChartPointOptions? get() = definedExternally; set(value) = definedExternally
+        var line: ChartLineOptions? get() = definedExternally; set(value) = definedExternally
+        var arc: ChartArcOptions? get() = definedExternally; set(value) = definedExternally
+        var rectangle: ChartRectangleOptions? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartArcOptions {
+        var backgroundColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var borderColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var borderWidth: Number? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartLineOptions {
+        var cubicInterpolationMode: dynamic /* String /* "default" */ | String /* "monotone" */ */ get() = definedExternally; set(value) = definedExternally
+        var tension: Number? get() = definedExternally; set(value) = definedExternally
+        var backgroundColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var borderWidth: Number? get() = definedExternally; set(value) = definedExternally
+        var borderColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var borderCapStyle: String? get() = definedExternally; set(value) = definedExternally
+        var borderDash: Array<Any>? get() = definedExternally; set(value) = definedExternally
+        var borderDashOffset: Number? get() = definedExternally; set(value) = definedExternally
+        var borderJoinStyle: String? get() = definedExternally; set(value) = definedExternally
+        var capBezierPoints: Boolean? get() = definedExternally; set(value) = definedExternally
+        var fill: dynamic /* Boolean | String /* "top" */ | String /* "bottom" */ | String /* "zero" */ */ get() = definedExternally; set(value) = definedExternally
+        var stepped: Boolean? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartPointOptions {
+        var radius: Number? get() = definedExternally; set(value) = definedExternally
+        var pointStyle: dynamic /* String /* "line" */ | String /* "circle" */ | String /* "cross" */ | String /* "crossRot" */ | String /* "dash" */ | String /* "rect" */ | String /* "rectRounded" */ | String /* "rectRot" */ | String /* "star" */ | String /* "triangle" */ */ get() = definedExternally; set(value) = definedExternally
+        var backgroundColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var borderWidth: Number? get() = definedExternally; set(value) = definedExternally
+        var borderColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var hitRadius: Number? get() = definedExternally; set(value) = definedExternally
+        var hoverRadius: Number? get() = definedExternally; set(value) = definedExternally
+        var hoverBorderWidth: Number? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartRectangleOptions {
+        var backgroundColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var borderWidth: Number? get() = definedExternally; set(value) = definedExternally
+        var borderColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var borderSkipped: String? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartLayoutOptions {
+        var padding: dynamic /* Number | ChartLayoutPaddingObject */ get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartLayoutPaddingObject {
+        var top: Number? get() = definedExternally; set(value) = definedExternally
+        var right: Number? get() = definedExternally; set(value) = definedExternally
+        var bottom: Number? get() = definedExternally; set(value) = definedExternally
+        var left: Number? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface GridLineOptions {
+        var display: Boolean? get() = definedExternally; set(value) = definedExternally
+        var color: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var borderDash: Array<Number>? get() = definedExternally; set(value) = definedExternally
+        var borderDashOffset: Number? get() = definedExternally; set(value) = definedExternally
+        var lineWidth: Number? get() = definedExternally; set(value) = definedExternally
+        var drawBorder: Boolean? get() = definedExternally; set(value) = definedExternally
+        var drawOnChartArea: Boolean? get() = definedExternally; set(value) = definedExternally
+        var drawTicks: Boolean? get() = definedExternally; set(value) = definedExternally
+        var tickMarkLength: Number? get() = definedExternally; set(value) = definedExternally
+        var zeroLineWidth: Number? get() = definedExternally; set(value) = definedExternally
+        var zeroLineColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var zeroLineBorderDash: Array<Number>? get() = definedExternally; set(value) = definedExternally
+        var zeroLineBorderDashOffset: Number? get() = definedExternally; set(value) = definedExternally
+        var offsetGridLines: Boolean? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ScaleTitleOptions {
+        var display: Boolean? get() = definedExternally; set(value) = definedExternally
+        var labelString: String? get() = definedExternally; set(value) = definedExternally
+        var fontColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var fontFamily: String? get() = definedExternally; set(value) = definedExternally
+        var fontSize: Number? get() = definedExternally; set(value) = definedExternally
+        var fontStyle: String? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface TickOptions : NestedTickOptions {
+        var minor: dynamic /* Boolean | NestedTickOptions */ get() = definedExternally; set(value) = definedExternally
+        var major: dynamic /* Boolean | NestedTickOptions */ get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface NestedTickOptions {
+        var autoSkip: Boolean? get() = definedExternally; set(value) = definedExternally
+        var autoSkipPadding: Number? get() = definedExternally; set(value) = definedExternally
+        var backdropColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var backdropPaddingX: Number? get() = definedExternally; set(value) = definedExternally
+        var backdropPaddingY: Number? get() = definedExternally; set(value) = definedExternally
+        var beginAtZero: Boolean? get() = definedExternally; set(value) = definedExternally
+        val callback: ((value: Any, index: Any, values: Any) -> dynamic /* String | Number */)? get() = definedExternally
+        var display: Boolean? get() = definedExternally; set(value) = definedExternally
+        var fontColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var fontFamily: String? get() = definedExternally; set(value) = definedExternally
+        var fontSize: Number? get() = definedExternally; set(value) = definedExternally
+        var fontStyle: String? get() = definedExternally; set(value) = definedExternally
+        var labelOffset: Number? get() = definedExternally; set(value) = definedExternally
+        var lineHeight: Number? get() = definedExternally; set(value) = definedExternally
+        var max: Any? get() = definedExternally; set(value) = definedExternally
+        var maxRotation: Number? get() = definedExternally; set(value) = definedExternally
+        var maxTicksLimit: Number? get() = definedExternally; set(value) = definedExternally
+        var min: Any? get() = definedExternally; set(value) = definedExternally
+        var minRotation: Number? get() = definedExternally; set(value) = definedExternally
+        var mirror: Boolean? get() = definedExternally; set(value) = definedExternally
+        var padding: Number? get() = definedExternally; set(value) = definedExternally
+        var reverse: Boolean? get() = definedExternally; set(value) = definedExternally
+        var showLabelBackdrop: Boolean? get() = definedExternally; set(value) = definedExternally
+        var source: dynamic /* String /* "auto" */ | String /* "data" */ | String /* "labels" */ */ get() = definedExternally; set(value) = definedExternally
+        var stepSize: Number? get() = definedExternally; set(value) = definedExternally
+        var suggestedMax: Number? get() = definedExternally; set(value) = definedExternally
+        var suggestedMin: Number? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface AngleLineOptions {
+        var display: Boolean? get() = definedExternally; set(value) = definedExternally
+        var color: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var lineWidth: Number? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface PointLabelOptions {
+        val callback: ((arg: Any) -> Any)? get() = definedExternally
+        var fontColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */ get() = definedExternally; set(value) = definedExternally
+        var fontFamily: String? get() = definedExternally; set(value) = definedExternally
+        var fontSize: Number? get() = definedExternally; set(value) = definedExternally
+        var fontStyle: String? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface LinearTickOptions : TickOptions {
+        override var maxTicksLimit: Number? get() = definedExternally; set(value) = definedExternally
+        override var stepSize: Number? get() = definedExternally; set(value) = definedExternally
+        var precision: Number? get() = definedExternally; set(value) = definedExternally
+        override var suggestedMin: Number? get() = definedExternally; set(value) = definedExternally
+        override var suggestedMax: Number? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface LogarithmicTickOptions : TickOptions
+    interface ChartDataSets {
+        var cubicInterpolationMode: dynamic /* String /* "default" */ | String /* "monotone" */ */ get() = definedExternally; set(value) = definedExternally
+        var backgroundColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> | Array<dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */> */ get() = definedExternally; set(value) = definedExternally
+        var borderWidth: dynamic /* Number | Array<Number> */ get() = definedExternally; set(value) = definedExternally
+        var borderColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> | Array<dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */> */ get() = definedExternally; set(value) = definedExternally
+        var borderCapStyle: dynamic /* String /* "butt" */ | String /* "round" */ | String /* "square" */ */ get() = definedExternally; set(value) = definedExternally
+        var borderDash: Array<Number>? get() = definedExternally; set(value) = definedExternally
+        var borderDashOffset: Number? get() = definedExternally; set(value) = definedExternally
+        var borderJoinStyle: dynamic /* String /* "round" */ | String /* "bevel" */ | String /* "miter" */ */ get() = definedExternally; set(value) = definedExternally
+        var borderSkipped: dynamic /* String /* "left" */ | String /* "right" */ | String /* "top" */ | String /* "bottom" */ */ get() = definedExternally; set(value) = definedExternally
+        var data: dynamic /* Array<Number> | Array<ChartPoint> */ get() = definedExternally; set(value) = definedExternally
+        var fill: dynamic /* String | Number | Boolean */ get() = definedExternally; set(value) = definedExternally
+        var hoverBackgroundColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> | Array<dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */> */ get() = definedExternally; set(value) = definedExternally
+        var hoverBorderColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> | Array<dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */> */ get() = definedExternally; set(value) = definedExternally
+        var hoverBorderWidth: dynamic /* Number | Array<Number> */ get() = definedExternally; set(value) = definedExternally
+        var label: String? get() = definedExternally; set(value) = definedExternally
+        var lineTension: Number? get() = definedExternally; set(value) = definedExternally
+        var steppedLine: dynamic /* Boolean | String /* "before" */ | String /* "after" */ */ get() = definedExternally; set(value) = definedExternally
+        var pointBorderColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> | Array<dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */> */ get() = definedExternally; set(value) = definedExternally
+        var pointBackgroundColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> | Array<dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */> */ get() = definedExternally; set(value) = definedExternally
+        var pointBorderWidth: dynamic /* Number | Array<Number> */ get() = definedExternally; set(value) = definedExternally
+        var pointRadius: dynamic /* Number | Array<Number> */ get() = definedExternally; set(value) = definedExternally
+        var pointHoverRadius: dynamic /* Number | Array<Number> */ get() = definedExternally; set(value) = definedExternally
+        var pointHitRadius: dynamic /* Number | Array<Number> */ get() = definedExternally; set(value) = definedExternally
+        var pointHoverBackgroundColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> | Array<dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */> */ get() = definedExternally; set(value) = definedExternally
+        var pointHoverBorderColor: dynamic /* String | CanvasGradient | CanvasPattern | Array<String> | Array<dynamic /* String | CanvasGradient | CanvasPattern | Array<String> */> */ get() = definedExternally; set(value) = definedExternally
+        var pointHoverBorderWidth: dynamic /* Number | Array<Number> */ get() = definedExternally; set(value) = definedExternally
+        var pointStyle: dynamic /* HTMLCanvasElement | String /* "line" */ | String /* "circle" */ | String /* "cross" */ | String /* "crossRot" */ | String /* "dash" */ | String /* "rect" */ | String /* "rectRounded" */ | String /* "rectRot" */ | String /* "star" */ | String /* "triangle" */ | HTMLImageElement | Array<dynamic /* HTMLCanvasElement | String /* "line" */ | String /* "circle" */ | String /* "cross" */ | String /* "crossRot" */ | String /* "dash" */ | String /* "rect" */ | String /* "rectRounded" */ | String /* "rectRot" */ | String /* "star" */ | String /* "triangle" */ | HTMLImageElement */> */ get() = definedExternally; set(value) = definedExternally
+        var xAxisID: String? get() = definedExternally; set(value) = definedExternally
+        var yAxisID: String? get() = definedExternally; set(value) = definedExternally
+        var type: dynamic /* String /* "line" */ | String /* "bar" */ | String /* "horizontalBar" */ | String /* "radar" */ | String /* "doughnut" */ | String /* "polarArea" */ | String /* "bubble" */ | String /* "pie" */ | String /* "scatter" */ | String */ get() = definedExternally; set(value) = definedExternally
+        var hidden: Boolean? get() = definedExternally; set(value) = definedExternally
+        var hideInLegendAndTooltip: Boolean? get() = definedExternally; set(value) = definedExternally
+        var showLine: Boolean? get() = definedExternally; set(value) = definedExternally
+        var stack: String? get() = definedExternally; set(value) = definedExternally
+        var spanGaps: Boolean? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartScales {
+        var type: dynamic /* String /* "category" */ | String /* "linear" */ | String /* "logarithmic" */ | String /* "time" */ | String /* "radialLinear" */ | String */ get() = definedExternally; set(value) = definedExternally
+        var display: Boolean? get() = definedExternally; set(value) = definedExternally
+        var position: dynamic /* String /* "left" */ | String /* "right" */ | String /* "top" */ | String /* "bottom" */ | String */ get() = definedExternally; set(value) = definedExternally
+        var gridLines: GridLineOptions? get() = definedExternally; set(value) = definedExternally
+        var scaleLabel: ScaleTitleOptions? get() = definedExternally; set(value) = definedExternally
+        var ticks: TickOptions? get() = definedExternally; set(value) = definedExternally
+        var xAxes: Array<ChartXAxe>? get() = definedExternally; set(value) = definedExternally
+        var yAxes: Array<ChartYAxe>? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface CommonAxe {
+        var bounds: String? get() = definedExternally; set(value) = definedExternally
+        var type: dynamic /* String /* "category" */ | String /* "linear" */ | String /* "logarithmic" */ | String /* "time" */ | String /* "radialLinear" */ | String */ get() = definedExternally; set(value) = definedExternally
+        var display: Boolean? get() = definedExternally; set(value) = definedExternally
+        var id: String? get() = definedExternally; set(value) = definedExternally
+        var stacked: Boolean? get() = definedExternally; set(value) = definedExternally
+        var position: String? get() = definedExternally; set(value) = definedExternally
+        var ticks: TickOptions? get() = definedExternally; set(value) = definedExternally
+        var gridLines: GridLineOptions? get() = definedExternally; set(value) = definedExternally
+        var barThickness: dynamic /* Number | String /* "flex" */ */ get() = definedExternally; set(value) = definedExternally
+        var maxBarThickness: Number? get() = definedExternally; set(value) = definedExternally
+        var scaleLabel: ScaleTitleOptions? get() = definedExternally; set(value) = definedExternally
+        var time: TimeScale? get() = definedExternally; set(value) = definedExternally
+        var offset: Boolean? get() = definedExternally; set(value) = definedExternally
+        val beforeUpdate: ((scale: Any? /*= null*/) -> Unit)? get() = definedExternally
+        val beforeSetDimension: ((scale: Any? /*= null*/) -> Unit)? get() = definedExternally
+        val beforeDataLimits: ((scale: Any? /*= null*/) -> Unit)? get() = definedExternally
+        val beforeBuildTicks: ((scale: Any? /*= null*/) -> Unit)? get() = definedExternally
+        val beforeTickToLabelConversion: ((scale: Any? /*= null*/) -> Unit)? get() = definedExternally
+        val beforeCalculateTickRotation: ((scale: Any? /*= null*/) -> Unit)? get() = definedExternally
+        val beforeFit: ((scale: Any? /*= null*/) -> Unit)? get() = definedExternally
+        val afterUpdate: ((scale: Any? /*= null*/) -> Unit)? get() = definedExternally
+        val afterSetDimension: ((scale: Any? /*= null*/) -> Unit)? get() = definedExternally
+        val afterDataLimits: ((scale: Any? /*= null*/) -> Unit)? get() = definedExternally
+        val afterBuildTicks: ((scale: Any? /*= null*/) -> Unit)? get() = definedExternally
+        val afterTickToLabelConversion: ((scale: Any? /*= null*/) -> Unit)? get() = definedExternally
+        val afterCalculateTickRotation: ((scale: Any? /*= null*/) -> Unit)? get() = definedExternally
+        val afterFit: ((scale: Any? /*= null*/) -> Unit)? get() = definedExternally
+    }
+
+    interface ChartXAxe : CommonAxe {
+        var categoryPercentage: Number? get() = definedExternally; set(value) = definedExternally
+        var barPercentage: Number? get() = definedExternally; set(value) = definedExternally
+        var distribution: dynamic /* String /* "linear" */ | String /* "series" */ */ get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface ChartYAxe : CommonAxe
+    interface LinearScale : ChartScales {
+        override var ticks: TickOptions? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface LogarithmicScale : ChartScales {
+        override var ticks: TickOptions? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface TimeDisplayFormat {
+        var millisecond: String? get() = definedExternally; set(value) = definedExternally
+        var second: String? get() = definedExternally; set(value) = definedExternally
+        var minute: String? get() = definedExternally; set(value) = definedExternally
+        var hour: String? get() = definedExternally; set(value) = definedExternally
+        var day: String? get() = definedExternally; set(value) = definedExternally
+        var week: String? get() = definedExternally; set(value) = definedExternally
+        var month: String? get() = definedExternally; set(value) = definedExternally
+        var quarter: String? get() = definedExternally; set(value) = definedExternally
+        var year: String? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface TimeScale : ChartScales {
+        var displayFormats: TimeDisplayFormat? get() = definedExternally; set(value) = definedExternally
+        var isoWeekday: Boolean? get() = definedExternally; set(value) = definedExternally
+        var max: String? get() = definedExternally; set(value) = definedExternally
+        var min: String? get() = definedExternally; set(value) = definedExternally
+        var parser: dynamic /* String | (arg: Any) -> Any */ get() = definedExternally; set(value) = definedExternally
+        var round: dynamic /* String /* "millisecond" */ | String /* "second" */ | String /* "minute" */ | String /* "hour" */ | String /* "day" */ | String /* "week" */ | String /* "month" */ | String /* "quarter" */ | String /* "year" */ */ get() = definedExternally; set(value) = definedExternally
+        var tooltipFormat: String? get() = definedExternally; set(value) = definedExternally
+        var unit: dynamic /* String /* "millisecond" */ | String /* "second" */ | String /* "minute" */ | String /* "hour" */ | String /* "day" */ | String /* "week" */ | String /* "month" */ | String /* "quarter" */ | String /* "year" */ */ get() = definedExternally; set(value) = definedExternally
+        var unitStepSize: Number? get() = definedExternally; set(value) = definedExternally
+        var stepSize: Number? get() = definedExternally; set(value) = definedExternally
+        var minUnit: dynamic /* String /* "millisecond" */ | String /* "second" */ | String /* "minute" */ | String /* "hour" */ | String /* "day" */ | String /* "week" */ | String /* "month" */ | String /* "quarter" */ | String /* "year" */ */ get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface RadialLinearScale : LinearScale {
+        var lineArc: Boolean? get() = definedExternally; set(value) = definedExternally
+        var angleLines: AngleLineOptions? get() = definedExternally; set(value) = definedExternally
+        var pointLabels: PointLabelOptions? get() = definedExternally; set(value) = definedExternally
+        override var ticks: TickOptions? get() = definedExternally; set(value) = definedExternally
+    }
+
+    interface Point {
+        var x: Number
+        var y: Number
+    }
+}
+
+@Suppress("NOTHING_TO_INLINE", "UnsafeCastFromDynamic")
+inline operator fun Chart.Positioners.get(mode: String): ((elements: Array<Any>, eventPosition: Chart.Point) -> Chart.Point)? =
+    asDynamic()[mode]
+
+@Suppress("NOTHING_TO_INLINE")
+inline operator fun Chart.Positioners.set(
+    mode: String,
+    noinline value: (elements: Array<Any>, eventPosition: Chart.Point) -> Chart.Point
+) {
+    asDynamic()[mode] = value
+}
+
+@Suppress("NOTHING_TO_INLINE", "UnsafeCastFromDynamic")
+inline operator fun Chart.ChartPluginsOptions.get(pluginId: String): Any? = asDynamic()[pluginId]
+
+@Suppress("NOTHING_TO_INLINE")
+inline operator fun Chart.ChartPluginsOptions.set(pluginId: String, value: Any) {
+    asDynamic()[pluginId] = value
+}
+
+open external class PluginServiceStatic {
+    open fun register(plugin: PluginServiceGlobalRegistration /* PluginServiceGlobalRegistration & PluginServiceRegistrationOptions */): Unit =
+        definedExternally
+
+    open fun unregister(plugin: PluginServiceGlobalRegistration /* PluginServiceGlobalRegistration & PluginServiceRegistrationOptions */): Unit =
+        definedExternally
+}
+
+external interface PluginServiceGlobalRegistration {
+    var id: String? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface PluginServiceRegistrationOptions {
+    val beforeInit: ((chartInstance: Chart, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val afterInit: ((chartInstance: Chart, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val beforeUpdate: ((chartInstance: Chart, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val afterUpdate: ((chartInstance: Chart, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val beforeLayout: ((chartInstance: Chart, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val afterLayout: ((chartInstance: Chart, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val beforeDatasetsUpdate: ((chartInstance: Chart, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val afterDatasetsUpdate: ((chartInstance: Chart, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val beforeDatasetUpdate: ((chartInstance: Chart, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val afterDatasetUpdate: ((chartInstance: Chart, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val beforeRender: ((chartInstance: Chart, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val afterRender: ((chartInstance: Chart, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val beforeDraw: ((chartInstance: Chart, easing: String, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val afterDraw: ((chartInstance: Chart, easing: String, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val beforeDatasetsDraw: ((chartInstance: Chart, easing: String, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val afterDatasetsDraw: ((chartInstance: Chart, easing: String, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val beforeDatasetDraw: ((chartInstance: Chart, easing: String, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val afterDatasetDraw: ((chartInstance: Chart, easing: String, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val beforeTooltipDraw: ((chartInstance: Chart, tooltipData: Any? /*= null*/, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val afterTooltipDraw: ((chartInstance: Chart, tooltipData: Any? /*= null*/, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val beforeEvent: ((chartInstance: Chart, event: Event, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val afterEvent: ((chartInstance: Chart, event: Event, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val resize: ((chartInstance: Chart, newChartSize: Chart.ChartSize, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+    val destroy: ((chartInstance: Chart) -> Unit)? get() = definedExternally
+    val afterScaleUpdate: ((chartInstance: Chart, options: Any? /*= null*/) -> Unit)? get() = definedExternally
+}
+
+external interface Meta {
+    var type: dynamic /* String /* "line" */ | String /* "bar" */ | String /* "horizontalBar" */ | String /* "radar" */ | String /* "doughnut" */ | String /* "polarArea" */ | String /* "bubble" */ | String /* "pie" */ | String /* "scatter" */ */
+    var data: Array<MetaData>
+    var dataset: Chart.ChartDataSets? get() = definedExternally; set(value) = definedExternally
+    var controller: Json
+    var hidden: Boolean? get() = definedExternally; set(value) = definedExternally
+    var total: String? get() = definedExternally; set(value) = definedExternally
+    var xAxisID: String? get() = definedExternally; set(value) = definedExternally
+    var yAxisID: String? get() = definedExternally; set(value) = definedExternally
+    var `$filler`: Json? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface MetaData {
+    var _chart: Chart
+    var _datasetIndex: Number
+    var _index: Number
+    var _model: Model
+    var _start: Any? get() = definedExternally; set(value) = definedExternally
+    var _view: Model
+    var _xScale: Chart.ChartScales
+    var _yScale: Chart.ChartScales
+    var hidden: Boolean? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface Model {
+    var backgroundColor: String
+    var borderColor: String
+    var borderWidth: Number? get() = definedExternally; set(value) = definedExternally
+    var controlPointNextX: Number
+    var controlPointNextY: Number
+    var controlPointPreviousX: Number
+    var controlPointPreviousY: Number
+    var hitRadius: Number
+    var pointStyle: String
+    var radius: String
+    var skip: Boolean? get() = definedExternally; set(value) = definedExternally
+    var steppedLine: Nothing? get() = definedExternally; set(value) = definedExternally
+    var tension: Number
+    var x: Number
+    var y: Number
+    var base: Number
+    var head: Number
+}
diff --git a/kvision-modules/kvision-chart/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt b/kvision-modules/kvision-chart/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt
new file mode 100644
index 00000000..9d86766c
--- /dev/null
+++ b/kvision-modules/kvision-chart/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt
@@ -0,0 +1,99 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package test.pl.treksoft.kvision
+
+import org.w3c.dom.Element
+import pl.treksoft.jquery.jQuery
+import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.panel.Root
+import kotlin.browser.document
+import kotlin.test.assertEquals
+import kotlin.test.assertTrue
+
+interface TestSpec {
+    fun beforeTest()
+
+    fun afterTest()
+
+    fun run(code: () -> Unit) {
+        beforeTest()
+        code()
+        afterTest()
+    }
+}
+
+interface SimpleSpec : TestSpec {
+
+    override fun beforeTest() {
+    }
+
+    override fun afterTest() {
+    }
+
+}
+
+interface DomSpec : TestSpec {
+
+    override fun beforeTest() {
+        val fixture = "<div style=\"display: none\" id=\"pretest\">" +
+                "<div id=\"test\"></div></div>"
+        document.body?.insertAdjacentHTML("afterbegin", fixture)
+    }
+
+    override fun afterTest() {
+        val div = document.getElementById("pretest")
+        div?.let { jQuery(it).remove() }
+        jQuery(".modal-backdrop").remove()
+    }
+
+    fun assertEqualsHtml(expected: String?, actual: String?, message: String?) {
+        if (expected != null && actual != null) {
+            val exp = jQuery(expected)
+            val act = jQuery(actual)
+            val result = exp[0]?.isEqualNode(act[0])
+            if (result == true) {
+                assertTrue(result == true, message)
+            } else {
+                assertEquals(expected, actual, message)
+            }
+        } else {
+            assertEquals(expected, actual, message)
+        }
+    }
+}
+
+interface WSpec : DomSpec {
+
+    fun runW(code: (widget: Widget, element: Element?) -> Unit) {
+        run {
+            val root = Root("test", true)
+            val widget = Widget()
+            widget.id = "test_id"
+            root.add(widget)
+            val element = document.getElementById("test_id")
+            code(widget, element)
+        }
+    }
+
+}
+
+external fun require(name: String): dynamic
diff --git a/kvision-modules/kvision-chart/src/test/kotlin/test/pl/treksoft/kvision/chart/ChartCanvasSpec.kt b/kvision-modules/kvision-chart/src/test/kotlin/test/pl/treksoft/kvision/chart/ChartCanvasSpec.kt
new file mode 100644
index 00000000..9ea2ee6e
--- /dev/null
+++ b/kvision-modules/kvision-chart/src/test/kotlin/test/pl/treksoft/kvision/chart/ChartCanvasSpec.kt
@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package test.pl.treksoft.kvision.chart
+
+import pl.treksoft.kvision.chart.ChartCanvas
+import pl.treksoft.kvision.chart.ChartType
+import pl.treksoft.kvision.chart.Configuration
+import pl.treksoft.kvision.chart.DataSets
+import pl.treksoft.kvision.chart.Options
+import pl.treksoft.kvision.panel.Root
+import test.pl.treksoft.kvision.DomSpec
+import kotlin.browser.document
+import kotlin.test.Test
+
+class ChartCanvasSpec : DomSpec {
+
+    @Test
+    fun renderResponsive() {
+        run {
+            val root = Root("test", true)
+            val chart = ChartCanvas(
+                configuration = Configuration(
+                    ChartType.SCATTER,
+                    listOf(DataSets(label = "Chart", data = listOf(0, 1)))
+                )
+            )
+            root.add(chart)
+            val element = document.getElementById("test")
+            assertEqualsHtml(
+                "<canvas width=\"0\" height=\"0\" class=\"chartjs-render-monitor\" style=\"display: block; width: 0px; height: 0px;\"></canvas>",
+                element?.innerHTML,
+                "Should render correct responsive chart canvas"
+            )
+        }
+    }
+
+    @Test
+    fun renderNotResponsive() {
+        run {
+            val root = Root("test", true)
+            val chart = ChartCanvas(
+                300, 600,
+                configuration = Configuration(
+                    ChartType.SCATTER,
+                    listOf(DataSets(label = "Chart", data = listOf(0, 1))),
+                    options = Options(responsive = false)
+                )
+            )
+            root.add(chart)
+            val element = document.getElementById("test")
+            assertEqualsHtml(
+                "<canvas width=\"300\" height=\"600\" style=\"display: block;\"></canvas>",
+                element?.innerHTML,
+                "Should render correct not responsive chart canvas"
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/kvision-modules/kvision-chart/src/test/kotlin/test/pl/treksoft/kvision/chart/ChartSpec.kt b/kvision-modules/kvision-chart/src/test/kotlin/test/pl/treksoft/kvision/chart/ChartSpec.kt
new file mode 100644
index 00000000..2e508107
--- /dev/null
+++ b/kvision-modules/kvision-chart/src/test/kotlin/test/pl/treksoft/kvision/chart/ChartSpec.kt
@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package test.pl.treksoft.kvision.chart
+
+import pl.treksoft.kvision.chart.Chart
+import pl.treksoft.kvision.chart.ChartType
+import pl.treksoft.kvision.chart.Configuration
+import pl.treksoft.kvision.chart.DataSets
+import pl.treksoft.kvision.chart.Options
+import pl.treksoft.kvision.panel.Root
+import pl.treksoft.kvision.utils.px
+import test.pl.treksoft.kvision.DomSpec
+import kotlin.browser.document
+import kotlin.test.Test
+
+class ChartSpec : DomSpec {
+
+    @Test
+    fun renderResponsive() {
+        run {
+            val root = Root("test", true)
+            val chart = Chart(
+                Configuration(
+                    ChartType.SCATTER,
+                    listOf(DataSets(label = "Chart", data = listOf(0, 1)))
+                )
+            ).apply {
+                width = 300.px
+                height = 600.px
+            }
+            root.add(chart)
+            val element = document.getElementById("test")
+            assertEqualsHtml(
+                "<div style=\"width: 300px; height: 600px;\"><canvas height=\"0\" class=\"chartjs-render-monitor\" width=\"0\" style=\"display: block; width: 0px; height: 0px;\"></canvas></div>",
+                element?.innerHTML,
+                "Should render correct responsive chart"
+            )
+        }
+    }
+
+    @Test
+    fun renderNotResponsive() {
+        run {
+            val root = Root("test", true)
+            val chart = Chart(
+                Configuration(
+                    ChartType.SCATTER,
+                    listOf(DataSets(label = "Chart", data = listOf(0, 1))),
+                    options = Options(responsive = false)
+                ), 300, 600
+            )
+            root.add(chart)
+            val element = document.getElementById("test")
+            assertEqualsHtml(
+                "<div><canvas width=\"300\" height=\"600\" style=\"display: block;\"></canvas></div>",
+                element?.innerHTML,
+                "Should render correct not responsive chart"
+            )
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/settings.gradle b/settings.gradle
index 25548bbc..f87752ef 100644
--- a/settings.gradle
+++ b/settings.gradle
@@ -11,6 +11,7 @@ include 'kvision-modules:kvision-base',
         'kvision-modules:kvision-upload',
         'kvision-modules:kvision-handlebars',
         'kvision-modules:kvision-i18n',
+        'kvision-modules:kvision-chart',
         'kvision-modules:kvision-remote',
         'kvision-modules:kvision-select-remote',
         'kvision-modules:kvision-server-jooby',
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Css.kt b/src/main/kotlin/pl/treksoft/kvision/core/Css.kt
index d36a8d69..9fc50097 100644
--- a/src/main/kotlin/pl/treksoft/kvision/core/Css.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/core/Css.kt
@@ -570,7 +570,7 @@ class Color private constructor(private val color: String? = null) {
      */
     constructor(color: Col) : this(color.color)
 
-    internal fun asString(): String {
+    fun asString(): String {
         return color.orEmpty()
     }
 }