Radar Chart

A radar chart: several measures of one thing set out on spokes about a middle, and joined into a web, so that its shape is read at a glance and two things are told apart by theirs. The skills of two people, a product against its rival, this year against the last.

import com.pantrixui.components.chart.radar.PantrixRadarChart

• Web. Each series is a web: its line, its fill with a share of its colour (filled; the share is fillAlpha, a fifth where left out) and a mark at each of its values (marker). The line can be dashed or dotted (dash): to tell a target from what was measured. Every fill lies under every line.
• Rings. grid says whether the rings of the values are drawn straight from spoke to spoke (as a web) or round.
• Axes. xAxis is the spokes: whether their names are written (labels), how they are written (label), whether the spokes are drawn (line). yAxis is the axis of values: its ends, how many values it marks, how they are written, whether the values are written (labels) and whether the rings are drawn (grid). The axis of values starts at nought unless it is told otherwise.
• The spoke pointed at. The spoke nearest the pointer, or the one that is tapped, is pointed at: the spoke stands out, the values on it grow, and the tooltip writes the values the series have there. With ChartTooltip(shared = false) the tooltip writes only the value of the series nearest the pointer.
• Direction. The chart turns the same way in a language read from right to left too.
• Export. export puts a button over the chart: the chart is made, as it is on the screen and without the part that is pointed at or its tooltip, into a PNG, an SVG or a PDF file and handed to the app.
• Automation. RadarChart_<tagKey>; the plot is .Plot, the spokes .Point_<number>, the legend's entries .Legend_<series>, the tooltip .Tooltip.

Examples

Two webs

Two people's scores in six skills, out of ten. The shapes of the two webs show who is strong where.

Move the pointer near a spoke or tap it: the tooltip writes the two people's scores in that skill. A press on an entry of the legend takes that person out of the chart.

val skills = teamSkills()
PantrixRadarChart(
    series = listOf(
        RadarSeries("ada", "Ada", skills, x = { it.name }, y = { it.ada }),
        RadarSeries("lin", "Lin", skills, x = { it.name }, y = { it.lin })
    ),
    yAxis = ChartAxis(max = 10.0),
    description = "The skills of Ada and Lin",
    tagKey = "plain"
)

internal fun teamSkills(): List<TeamSkill> = listOf(
    TeamSkill("Design", ada = 8, lin = 5, target = 7),
    TeamSkill("Code", ada = 6, lin = 9, target = 8),
    TeamSkill("Testing", ada = 5, lin = 7, target = 7),
    TeamSkill("Writing", ada = 9, lin = 4, target = 6),
    TeamSkill("Presenting", ada = 7, lin = 6, target = 8),
    TeamSkill("Planning", ada = 4, lin = 8, target = 7)
)

internal class TeamSkill(
    val name: String,
    val ada: Int,
    val lin: Int,
    val target: Int
)

Against a target

What was measured and the target: the measured is a filled web, the target a dashed line (filled = false, dash) with no marks. The rings are round here (RadarGrid.Circle).

val skills = teamSkills()
PantrixRadarChart(
    series = listOf(
        RadarSeries("now", "Now", skills, x = { it.name }, y = { it.ada }),
        RadarSeries(
            key = "target",
            name = "Target",
            data = skills,
            x = { it.name },
            y = { it.target },
            filled = false,
            marker = ChartMarker.None,
            dash = ChartDash.Dashed
        )
    ),
    yAxis = ChartAxis(max = 10.0),
    grid = RadarGrid.Circle,
    description = "Ada's skills, with the target",
    tagKey = "target"
)

internal fun teamSkills(): List<TeamSkill> = listOf(
    TeamSkill("Design", ada = 8, lin = 5, target = 7),
    TeamSkill("Code", ada = 6, lin = 9, target = 8),
    TeamSkill("Testing", ada = 5, lin = 7, target = 7),
    TeamSkill("Writing", ada = 9, lin = 4, target = 6),
    TeamSkill("Presenting", ada = 7, lin = 6, target = 8),
    TeamSkill("Planning", ada = 4, lin = 8, target = 7)
)

internal class TeamSkill(
    val name: String,
    val ada: Int,
    val lin: Int,
    val target: Int
)

Telling the series apart

With ChartTooltip(shared = false) the tooltip writes not all the series of the spoke but the one nearest the pointer. On the keyboard the up and down arrows go from one series to the next on the same spoke.

val skills = teamSkills()
PantrixRadarChart(
    series = listOf(
        RadarSeries("ada", "Ada", skills, x = { it.name }, y = { it.ada }),
        RadarSeries("lin", "Lin", skills, x = { it.name }, y = { it.lin }, marker = ChartMarker.Square)
    ),
    yAxis = ChartAxis(max = 10.0),
    tooltip = ChartTooltip(shared = false),
    description = "The skills of Ada and Lin",
    tagKey = "apart"
)

internal fun teamSkills(): List<TeamSkill> = listOf(
    TeamSkill("Design", ada = 8, lin = 5, target = 7),
    TeamSkill("Code", ada = 6, lin = 9, target = 8),
    TeamSkill("Testing", ada = 5, lin = 7, target = 7),
    TeamSkill("Writing", ada = 9, lin = 4, target = 6),
    TeamSkill("Presenting", ada = 7, lin = 6, target = 8),
    TeamSkill("Planning", ada = 4, lin = 8, target = 7)
)

internal class TeamSkill(
    val name: String,
    val ada: Int,
    val lin: Int,
    val target: Int
)

How dark the fill is

Ada's web is filled darker (fillAlpha = 0.5f), Lin's lighter (0.08f): one stands out, the other stays behind. Lin's line is still over Ada's fill.

val skills = teamSkills()
PantrixRadarChart(
    series = listOf(
        RadarSeries("ada", "Ada", skills, x = { it.name }, y = { it.ada }, fillAlpha = 0.5f),
        RadarSeries("lin", "Lin", skills, x = { it.name }, y = { it.lin }, fillAlpha = 0.08f)
    ),
    yAxis = ChartAxis(max = 10.0),
    description = "The skills of Ada and Lin",
    tagKey = "fills"
)

internal fun teamSkills(): List<TeamSkill> = listOf(
    TeamSkill("Design", ada = 8, lin = 5, target = 7),
    TeamSkill("Code", ada = 6, lin = 9, target = 8),
    TeamSkill("Testing", ada = 5, lin = 7, target = 7),
    TeamSkill("Writing", ada = 9, lin = 4, target = 6),
    TeamSkill("Presenting", ada = 7, lin = 6, target = 8),
    TeamSkill("Planning", ada = 4, lin = 8, target = 7)
)

internal class TeamSkill(
    val name: String,
    val ada: Int,
    val lin: Int,
    val target: Int
)

Pressing a value

onSelect gives the value that is pressed: press a spoke, or go to one with the keyboard and press Enter, and the line under the card writes what was pressed.

val report = LocalExampleEvents.current
val skills = teamSkills()
PantrixRadarChart(
    series = listOf(RadarSeries("ada", "Ada", skills, x = { it.name }, y = { it.ada })),
    yAxis = ChartAxis(max = 10.0),
    onSelect = { point -> report("${point.label}: ${point.text}") },
    description = "Ada's skills",
    tagKey = "pressed"
)

internal fun teamSkills(): List<TeamSkill> = listOf(
    TeamSkill("Design", ada = 8, lin = 5, target = 7),
    TeamSkill("Code", ada = 6, lin = 9, target = 8),
    TeamSkill("Testing", ada = 5, lin = 7, target = 7),
    TeamSkill("Writing", ada = 9, lin = 4, target = 6),
    TeamSkill("Presenting", ada = 7, lin = 6, target = 8),
    TeamSkill("Planning", ada = 4, lin = 8, target = 7)
)

internal class TeamSkill(
    val name: String,
    val ada: Int,
    val lin: Int,
    val target: Int
)

Export

export = ChartExport(...) puts an export button over the chart: press it and choose the kind (PNG, SVG or PDF). The chart makes the file and hands it to onExport; below, its name and size show, and a PNG's picture, and "Save the file" hands it over in the platform's way.

The file has the rings, the names and the two webs; the legend is under them.

var file by remember { mutableStateOf<ChartExportFile?>(null) }
val skills = teamSkills()
PantrixRadarChart(
    series = listOf(
        RadarSeries("ada", "Ada", skills, x = { it.name }, y = { it.ada }),
        RadarSeries("lin", "Lin", skills, x = { it.name }, y = { it.lin })
    ),
    yAxis = ChartAxis(max = 10.0),
    description = "The skills of Ada and Lin",
    tagKey = "exported",
    export = ChartExport(fileName = "skills") { file = it }
)
ExportedFile(file, tagKey = "exported")

internal fun teamSkills(): List<TeamSkill> = listOf(
    TeamSkill("Design", ada = 8, lin = 5, target = 7),
    TeamSkill("Code", ada = 6, lin = 9, target = 8),
    TeamSkill("Testing", ada = 5, lin = 7, target = 7),
    TeamSkill("Writing", ada = 9, lin = 4, target = 6),
    TeamSkill("Presenting", ada = 7, lin = 6, target = 8),
    TeamSkill("Planning", ada = 4, lin = 8, target = 7)
)

internal class TeamSkill(
    val name: String,
    val ada: Int,
    val lin: Int,
    val target: Int
)

API

series

A radar chart: several measures of one thing set out on spokes about a middle, and joined into a web, so that its shape is read at a glance and two things are told apart by theirs. The skills of two people, a product against its rival, this year against the last.

ChartStyle

A chart's geometry: how tall it is where nothing says, how thick its lines and how large its marks are, and the room between its parts; and whether its fills have textures besides their colours.

ChartColors

What a chart is painted with, for a chart that does not take the theme's colours: a colour that is set is used, and one that is left out stays the theme's.

Accessibility

• Keyboard. The chart is one stop for Tab: the arrows go from spoke to spoke round the chart, and after the last back to the first; Home and End go to the first and the last spoke, Escape lets go, Enter and Space press the value that is pointed at.
• Screen reader. The chart says its description, then each spoke with the values the series have there.