Breeze.Charts

Chart components for Breeze. Includes sparklines, Braille line charts, and grouped or stacked bar charts in either orientation.

Usage

Add breeze_charts to your dependencies in mix.exs:

{:breeze_charts, "~> 0.1.0"}

Import the components in your view:

defmodule Dashboard do
  use Breeze.View
  import Breeze.Charts

  def render(assigns) do
    ~H"""
    <.sparkline values={[2, 4, 3, 8, 6]} class="text-success" />
    <.sparkline values={[10, 35, 70, 55]} min={0} max={100} />
    """
  end
end

Empty data renders no bars. Constant values render ▁. Values outside fixed bounds are clamped. Width defaults to the number of values; a narrower class clips the chart without resampling it. Existing class and style overrides are supported.

Line and bar charts share keyed data and series definitions:

data = [
  %{x: "Run A", values: %{input: 420, output: 180}},
  %{x: "Run B", values: %{input: 610, output: 240}}
]

series = [%{key: :input, name: "Input"}, %{key: :output, name: "Output"}]

Assign these to your view, then render:

<.line_chart data={@data} series={@series} width={50} height={12} min={0} />
<.bar_chart data={@data} series={@series} width={50} height={12} />
<.bar_chart data={@data} series={@series} width={50} mode="stacked" orientation="horizontal" />

Series colors cycle through the active theme’s primary, secondary, success, accent, warning, and error colors. Override them with :color using a theme color name, terminal color index, RGB tuple, or hex string:

series = [
  %{key: :input, name: "Input", color: "#4DA3FF"},
  %{key: :output, name: "Output", color: "#f8a"}
]

Labels and legend text use the theme’s text color; axes use its border color. Legend markers retain their series colors. See the component API docs for bounds, sizing, and clipping behavior.

Run the interactive example from this checkout:

mix deps.get
mix run examples/sparkline.exs

For live line and bar charts using the same changing data:

mix run examples/charts.exs

Storybook

Browse the sparkline, line chart, and bar chart examples:

mix breeze.storybook

Documentation

Build the API reference and rendered chart previews with:

mix docs

Credits

The sparkline component, its original tests, and the example content were created by George Guimarães in Breeze PR #57, commit 9f16c3e.

The line and bar charts, their original tests, and story examples were also created by George Guimarães in Breeze PR #58.

Licensed under the MIT license. See LICENCE.md.