Hi! More Chart.js hurdles... io.kvision.chart.Data...

# kvision

[Christer Palm]

Hi!
More Chart.js hurdles...
io.kvision.chart.DataSets has a member minBarLegth. I think that should be minBar_Length_? Either way it doesn't seem to work. Can I work around this and pass DataSets options in a non-typed way?

[Robert Jaros]

In K/JS you can always use dynamic typing.

[Robert Jaros]

val something = SomeObject()
something.asDynamic()["some_property"] = "some value"

[Robert Jaros]

you can use KVision's obj {} helper function to create plain JS objects

[Christer Palm]

asDynamic() sounds like a nice trick 🙂
I'll try that.

[Robert Jaros]

But ... looking at chart module code I'm not sure it will help you ...

[Christer Palm]

😞

[Robert Jaros]

I think you could try accessing native ChartJs instance and modify the data.

[Robert Jaros]

chart.jsChart?.data = ...
chart.jsChart?.update()

[Robert Jaros]

You can use full dynamic typing here

[Robert Jaros]

And please open an issue about the typo in minBarLength.

[Christer Palm]

Will do.
OK, I'll try that strategy.

[Christer Palm]

Probably a stupid question, but I'm struggling with the Kotlin to JS mapping.

myChart.jsChart?.data?.datasets[0]?["minBarLength"] = x

Is what I'm naively trying, but that doesn't compile.
What's the trick of accessing a JS Array element?

[Robert Jaros]

?.get(0) if the object is of nullable type

[Christer Palm]

So datasets?.get(0)["minBarLength"] ?
Throws some weird StringBuilder compilation error :-(

[Robert Jaros]

let me check the code ...

[Robert Jaros]

That's because this is not an array of dynamics. It's declared as an array of DeepPartial which is typealiased to Any. That's where asDynamic() will help - just use jsChart?.data?.datasets?.get(0).asDynamic()["minBarLength"]

[Christer Palm]

Aha, I see.
That compiles but throws a not-so-helpful "null has no properties" error at runtime. Hmmm... This Kotlin to JS stuff surely is black magic to me 😄
So I'm sorry for my lack of skill here 🙂

[Robert Jaros]

I've tested this code with the bar chart from the showcase example app and it seems to work for me.

[Robert Jaros]

This is my code:

val myChart = chart(
    Configuration(
        ChartType.BAR,
        listOf(
            DataSets(
                data = listOf(6, 12, 19, 13, 7),
                backgroundColor = listOf(
                    Color.hex(0x3e95cd),
                    Color.hex(0x8e5ea2),
                    Color.hex(0x3cba9f),
                    Color.hex(0xe8c3b9),
                    Color.hex(0xc45850)
                )
            )
        ),
        listOf(
            tr("Africa"),
            tr("Asia"),
            tr("Europe"),
            tr("Latin America"),
            tr("North America")
        ),
        ChartOptions(
            plugins = PluginsOptions(
                legend = LegendOptions(display = false),
                title = TitleOptions(display = false)
            ),
            scales = mapOf("y" to ChartScales(suggestedMin = 0, suggestedMax = 20))
        )
    )
)

button("Test") {
    onClick {
        myChart.jsChart?.data?.datasets?.get(0).asDynamic()["minBarLength"] = 100
        myChart.jsChart?.update()
    }
}

[Christer Palm]

Aha, I think the problem is maybe that I'm trying to set the minBarLength property during "initialization", i.e. right after I've created the chart object? While you're setting it in an event handler.
Maybe the jsChart hasn't been properly constructed at the time I'm trying to modify it?

[Christer Palm]

Otherwise my code is essentially identical.

[Robert Jaros]

For this use after insert hook:

chart(
    Configuration(
        ChartType.BAR,
        listOf(
            DataSets(
                data = listOf(6, 12, 19, 13, 7),
                backgroundColor = listOf(
                    Color.hex(0x3e95cd),
                    Color.hex(0x8e5ea2),
                    Color.hex(0x3cba9f),
                    Color.hex(0xe8c3b9),
                    Color.hex(0xc45850)
                )
            )
        ),
        listOf(
            tr("Africa"),
            tr("Asia"),
            tr("Europe"),
            tr("Latin America"),
            tr("North America")
        ),
        ChartOptions(
            plugins = PluginsOptions(
                legend = LegendOptions(display = false),
                title = TitleOptions(display = false)
            ),
            scales = mapOf("y" to ChartScales(suggestedMin = 0, suggestedMax = 20))
        )
    )
) {
    addAfterInsertHook {
        jsChart?.data?.datasets?.get(0).asDynamic()["minBarLength"] = 200
        jsChart?.update()
    }
}

[Christer Palm]

👍
Great! That did the trick...!

[Christer Palm]

TNX