Chart

The Chart component renders interactive charts using Chart.js.

Usage

Chart(
    type = "bar",
    data = """{
        "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        "datasets": [{
            "label": "# of Votes",
            "data": [12, 19, 3, 5, 2, 3],
            "backgroundColor": [
                "rgba(255, 99, 132, 0.2)",
                "rgba(54, 162, 235, 0.2)",
                "rgba(255, 206, 86, 0.2)",
                "rgba(75, 192, 192, 0.2)",
                "rgba(153, 102, 255, 0.2)",
                "rgba(255, 159, 64, 0.2)"
            ],
            "borderColor": [
                "rgba(255, 99, 132, 1)",
                "rgba(54, 162, 235, 1)",
                "rgba(255, 206, 86, 1)",
                "rgba(75, 192, 192, 1)",
                "rgba(153, 102, 255, 1)",
                "rgba(255, 159, 64, 1)"
            ],
            "borderWidth": 1
        }]
    }""",
    options = """{
        "scales": {
            "y": {
                "beginAtZero": true
            }
        }
    }""",
    modifier = Modifier().width(400.px).height(300.px)
)

Parameters

| Name | Type | Description | | :--- | :--- | :--- | | type | String | The type of chart to render (e.g., "bar", "line", "pie", "doughnut", "radar", "polarArea", "bubble", "scatter"). | | data | String | A JSON string representing the data for the chart. | | options | String? | An optional JSON string representing the configuration options for the chart. | | modifier | Modifier | The modifier to apply to the chart container. |

Platform Support

| Platform | Support | Notes | | :--- | :--- | :--- | | JVM (SSR) | Partial | Renders a canvas element with data attributes. Client-side hydration is required for interactivity. | | JS (Client) | Full | Renders an interactive Chart.js chart. | | Wasm (Client) | Full | Renders an interactive Chart.js chart. |