Introduction

Install

You can install the development version of muiCharts like so:

remotes::install_github("lgnbhl/muiCharts")

Quick Start

library(muiCharts)
library(dplyr)

BarChart(
  dataset = head(starwars_people, 4),
  xAxis  = list(list(scaleType = "band", dataKey = "name")),
  series = list(list(dataKey = "height", label = "Height (cm)")),
  height = 300
)

Using JavaScript

Use the JS() function to pass JavaScript code, for example to customize tooltip values with valueFormatter:

BarChart(
  dataset = head(starwars_people, 4),
  xAxis  = list(list(scaleType = "band", dataKey = "name")),
  series = list(
    list(dataKey = "height", label = "Height (cm)", valueFormatter = JS("(v) => v + ' cm'")),
    list(dataKey = "mass",   label = "Mass (kg)",   valueFormatter = JS("(v) => v + ' kg'"))
  ),
  height = 300
)

MUI ecosystem

muiCharts integrates seamlessly with muiMaterial to create modern, fully-styled dashboards.

library(muiMaterial)

muiMaterialPage(
  CssBaseline(),
  {
    primaryColor <- "#1976d2"

    ThemeProvider(
      theme = list(palette = list(primary = list(main = primaryColor))),
      Box(sx = list(p = 3, bgcolor = "background.paper"),
        Card(sx = list(boxShadow = 3),
          CardContent(
            Stack(spacing = 1.5,
              Typography("Character Count", variant = "h6", sx = list(fontWeight = 600)),
              Typography("Number of characters by Star Wars episode", variant = "body2", sx = list(color = "text.secondary")),
              BarChart(
                dataset = starwars_films |> mutate(Characters = lengths(characters)) |> arrange(episode_id),
                xAxis = list(list(scaleType = "band", dataKey = "episode_id")),
                series = list(list(dataKey = "Characters", color = primaryColor)),
                height = 280
              ),
              Divider(),
              Typography("Made with muiCharts and muiMaterial", variant = "caption", sx = list(color = "text.secondary"))
            )
          )
        )
      )
    )
  }
)

Chart Types

muiCharts provides the following chart types, each with a dedicated article:

• Bar Charts — vertical and horizontal bar charts with grouping and stacking
• Line Charts — line charts with marks, curves, and null handling
• Area Charts — filled area charts with stacking and baselines
• Pie Charts — pie and donut charts with arc labels
• Scatter Charts — scatter plots with Voronoi interaction
• Radar Charts — radar charts for multi-metric comparisons
• Sparkline Charts — compact inline charts
• Gauge Charts — gauge displays for single metrics

Features

Cross-cutting features that apply to all chart types:

• Axis & Grid — scale types, labels, value formatters, grid lines, margins
• Tooltip — tooltip triggers, formatting, and composition
• Legend — legend position, direction, and color legends
• Highlighting — highlight and fade interactions
• Styling — colors, color maps, and CSS overrides with sx
• Composition — build charts from individual sub-components

Integration

• Shiny — reactive charts, click events, and dashboards
• Quarto — HTML documents, dashboards, and tabsets

Contribute

If you have any issue, question or want to contribute with a pull request, don’t hesitate to write me on https://github.com/lgnbhl/muiCharts

For updates follow Felix Luginbuhl on LinkedIn.