This guide presents how to build a line chart and how to tune it to your needs.

This guide will help you to:

1. Create your first line chart
2. Discover all the parameters of a line chart
3. Style your line chart

What do you need?

• A working environment of your choice (Android, Kotlin/JS, JavaFX)
• Intellij Community or Ultimate (tested with IntelliJ 2021.1.*)

To provide runnable examples, all the code in this guide runs on Kotlin/JS. However, Charts.kt code is 100% multiplatform, just paste this code in your own project to obtain the same result.

Your first line chart

Let's say that you just want to display a line chart of several records of temperatures other the day, in the simplest form possible: a List<Double>.

//run height=150 from=16 to=31
import io.data2viz.charts.core.*
import io.data2viz.charts.chart.*
import io.data2viz.charts.chart.mark.*
import io.data2viz.charts.viz.*
import io.data2viz.geom.*

val width = 600.0
val height = 150.0

fun main() {
    
    val vc = newVizContainer().apply { size = Size(width, height) }
    
    with(vc) {
        
        val temperatures = listOf(
            5.2, 5.1, 6.1, 6.0, 5.9, 6.2, 
            6.4, 6.7, 7.8, 9.8, 12.3, 12.6, 
            12.6, 13.2, 14.6, 14.5, 14.7, 14.3, 
            13.8, 11.2, 9.4, 8.0, 6.9, 6.3 
        )

        chart(temperatures) {
            val tempDimension = quantitative( { domain } ) {
            	name = "Temperature in °C"
            }
            val hourDimension = discrete( { indexInData } ) {
            	name = "Time of the day"
            }
            line(hourDimension, tempDimension)
        }
    }
}

Let's detail this code:

The data

Your dataset temperatures is a List<Double>, hard to make it simpler!

This means that when you call the chart(temperatures) function, it instantiates a Chart<Double>.

Your chart domain object is a simple Double.

The "temperature" dimension

You create a quantitative dimension of your domain object. The name provided gives a good explanation of the nature of this dimension.

A quantitative dimension accepts only Double values, so you can feed it directly with your domain object.