A modern programming language that makes developers happier.

kotlinlang

I would like to display data in a chart in a Kotlin/React project.
Any suggestion?
I found out about this graphs library:
<https://react-charts.js.org/>
Can I easily use it in Kotlin/React?

I was finally able to import the library through npm:
```implementation(npm("react-charts","~2.0.0"))```
I thought I configured things properly, but when I run the app I get this error in the JS console:
```Uncaught ReferenceError: require is not defined
    at eval (webpack-internal:///../../node_modules/react-charts/dist/react-charts.mjs:904)
    at Module.../../node_modules/react-charts/dist/react-charts.mjs (webApp.js:2542)
    at __webpack_require__ (webApp.js:30)
    at eval (webpack-internal:///./kotlin-dce-dev/CovidApp-webApp.js:1463)
    at Object../kotlin-dce-dev/CovidApp-webApp.js (webApp.js:3419)
    at __webpack_require__ (webApp.js:30)
    at Object.0 (webApp.js:3651)
    at __webpack_require__ (webApp.js:30)
    at webApp.js:94
    at webApp.js:97```

I set the import file:

```@file:JsModule("react-charts")
@file:JsNonModule
import components.Axis
import components.DataSet
import react.RClass
import react.RProps
external interface ReactChartProps: RProps {
    var data: List&lt;DataSet&gt;
    var axes: List&lt;Axis&gt;
}
@JsName("default")
external val Chart: RClass&lt;ReactChartProps&gt;```
I defined the classes:

```class DataSet (val label: String, val data: List&lt;DataPoint&gt;)
class DataPoint(val primary: Float, val secondary: Float)

class Axis (val primary: Boolean, val type: String, val position: String)```
and this is how I wrapped it into my component:

```div {
    Chart {
        attrs {
            data = listOf(
                DataSet(
                    "Series 1", data = listOf(
                        DataPoint(1f, 5f),
                        DataPoint(3f, 7f),
                        DataPoint(4f, 3f),
                    )
                ),
                DataSet(
                    "Series 2", data = listOf(
                        DataPoint(3f, 3f),
                        DataPoint(6f, 7f),
                        DataPoint(7f, 1f),
                    )
                ),
                DataSet(
                    "Series 3", data = listOf(
                        DataPoint(8f, 9f),
                        DataPoint(1f, 5f),
                        DataPoint(4f, 7f),
                    )
                )
            )
            axes = listOf(
                Axis(true, "linear", "bottom"),
                Axis(false, "linear", "left"),
            )
        }
    }

}```

You can use plotly.kt. it does not support 1.4 right now though.

<@U5F0TT0UX> is it preferable to react-charts and why?

It depends on what do you want to do. React-charts is rather limited. Plotly is much more powerful, but of course it is heavier. There are a lot of different plotting libraries in JS ecosystem. The only reason I would chose plotly.kt for simple non-interactive charts is that it already have kotlin binding.

I think I would prefer the library which adds the smallest size. So I guess react-charts. But unfortunately I cannot make it work, because of that error.