how to add legend to lets plot kotlin when not based on data map

Question

I am trying to add a legend to the following plot. The plot creates two series (representing probability mass functions). Anyway, I would like to have a legend that has "observed" for the red series and "theoretical" for the black series. The code below should run with the appropriate imports from kotlin lets-plot. All the examples that I can find have legends based on the data series. I haven't found any examples that would give me insights into how to do this.

    val dataMap = mapOf(
        "estimated" to listOf(0.2, 0.3, 0.4, 0.1),
        "observed" to listOf(1, 2, 3, 4),
        "probability" to listOf(0.19, 0.31, 0.42, 0.08),
        "values" to listOf(1, 2, 3, 4),
    )
    val pd = positionNudge(.1)
    var p = ggplot(dataMap) + theme().legendPositionRight() +
            geomPoint(color = "red", position = pd) {
                x = "observed"
                y = "estimated"
            } +
            geomPoint(color = "black") {
                x = "values"
                y = "probability"
            }
    for (i in 1..4) {
        p = p + geomSegment(yend = 0, color = "red", position = pd) {
            x = "observed"
            y = "estimated"
            xend = "observed"
        }
    }
    for (i in 1..4) {
        p = p + geomSegment(yend = 0, color = "black") {
            x = "values"
            y = "probability"
            xend = "values"
        }
    }
    p = p + labs(title = "some title", x = "xLabel", y = "yLabel") +
            ggsize(500, 350)

    val spec = p.toSpec()
    // Export: use PlotHtmlExport utility to generate dynamic HTML (optionally in iframe).
    val html = PlotHtmlExport.buildHtmlFromRawSpecs(
        spec, iFrame = true,
        scriptUrl = PlotHtmlHelper.scriptUrl(VersionChecker.letsPlotJsVersion)
    )
    val tmpDir = File("someDirectory")
    if (!tmpDir.exists()) {
        tmpDir.mkdir()
    }
    val file = File.createTempFile("someFileName", ".html", tmpDir)
    FileWriter(file).use {
        it.write(html)
    }
    val desktop = Desktop.getDesktop()
    desktop.browse(file.toURI())

Answer 1

You need to restructure your data to have just two series (red and black) and add a grouping variable:

val estimated = listOf(0.2, 0.3, 0.4, 0.1)
val observed = listOf(1, 2, 3, 4) 
val probability = listOf(0.19, 0.31, 0.42, 0.08)
val values = listOf(1, 2, 3, 4)

val data = mapOf(
    "xs" to observed + values,
    "ys" to estimated + probability,
    "group" to List(4) {"A"} + List(4) {"B"}
)

Then map "color" aesthetic to the grouping variable:

var p = ggplot(data) + theme().legendPositionRight() +
    geomLollipop(position = positionDodge(0.3)) {
        x = "xs"
        y = "ys"
        color = "group"
    } + scaleColorManual(values=listOf("red", "black"))
    
p = p + labs(title = "some title", x = "xLabel", y = "yLabel") +
            ggsize(500, 350)

Answer 2

if you want lengends in high charts yuo can write like this

val legend = HILegend()
        legend.enabled = true
        options.legend = legend