Minichart - SVG Chart Generator

Create SVG mini charts with Ruby

$ gem install minichart

Or with bundler:

gem 'minichart'

Require and optionally include the library:

require 'minichart'
include Minichart

Initialize a chart with data, and optional options:

data = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5, 9]
chart = AreaChart.new data, color: 'blue'

Get the full SVG output by calling #render:

puts chart.render
#=> <?xml version="1.0" standalone="no"?>
#   <svg> ... </svg>

Save it to file, by calling #save:

chart.save "my-chart.svg"

Get its inner SVG string by calling #to_s:

puts chart.to_s
#=> <polyline fill="blue" stroke="blue" stroke-width="2" points="..."/>

The objects returned from all the mini chart classes are Victor::SVG objects, so they support all methods supported by it as well.

LineChart.new [10, 30, 20, 40, 30], background: '#eee',
  height: 50, width: 250, color: 'green'

BarChart.new [10, 30, 20, 40, 30], background: '#eee',
  height: 50, width: 250, color: 'green'

AreaChart.new [10, 30, 20, 40, 30], background: '#eee',
  height: 50, width: 250, color: 'green'

positive = HorizontalBarMeter.new 70,
  height: 20, width: 250, background: '#9f9',
  color: 'green'

negative = HorizontalBarMeter.new -80,
  height: 20, width: 250, background: '#f99',
  color: 'red'

dual = HorizontalBarMeter.new 80,
  height: 20, width: 250, background: '#99f',
  color: 'blue', mode: :dual, notches: [0]

Meter charts support additional options.

positive = VerticalBarMeter.new 70,
  width: 20, height: 250, background: '#9f9', color: 'green'

negative = VerticalBarMeter.new -80,
  width: 20, height: 250, background: '#f99', color: 'red'

dual = VerticalBarMeter.new 80,
  width: 20, height: 250, background: '#99f', color: 'blue',
  mode: :dual, notches: [0]

Meter charts support additional options.

HorizontalStatusLeds.new [1,1,-1,0,1,1,1,1,1,-1,-1,1],
  background: '#ccc'

Led charts support additional options.

VerticalStatusLeds.new [1,1,1,1,-1,1,-1,1,0,1],
  background: '#ccc'

Led charts support additional options.

Chart options can be set in one of three ways.

See or set default options for any chart class by calling its ::options method:

# See all options
p AreaChart.options
#=> {:background=>"white", :height=>100, :width=>300, :stroke=>2,
     :style=>{}, :color=>"#66f"}

# Set a single default option
AreaChart.options[:color] = '#333'

# Set multiple options at once
AreaChart.options background: 'black', color: 'green'

Set options by providing a hash as the second argument on initialization:

chart = AreaChart.new data, height: 120, width: 500

After initialization, you can still update individual options:

chart = AreaChart.new data
chart.options[:background] = 'yellow'

• background: Chart background color.
• color: Chart color.
• height: Chart height in pixels.
• width: Chart width in pixels.
• stroke: Line stroke width. This has a different effect in different chart types.
• style: CSS Style hash to apply to the entire SVG.
• padding: Chart padding in pixels.

Meter charts support these options in addition to the basic options:

• mode: Display mode. Can be :positive, :negative, :dual or :auto (default). The :auto mode will switch between :positive and :negative based on the value.
• max: The absolute maximum value. This number should be positive even for negative charts.
• notches: An array of one or more levels to place a notch marker. Use positive values only.
• notch_thickness: Thickness of the notch markers.
• notch_color: Color of the notch markers.
• clipping_indicator: If true, show a marker when the value exceeds the range.
• clipping_indicator_thickness: Thickness of the clipping indicator.
• clipping_indicator_color: Color of the clipping indicator.

Led charts support these options in addition to the basic options (excluding the color option):

• positive_color: Color to use when the value is greater than 0.
• negative_color: Color to use when the value is less than 0.
• neutral_color: Color to use when the value is 0 or nil.
• min_opacity: A value between 0 and 1 representing the minimum opacity that will be applied to values when they are lower than the maximum range.

See more examples (code and SVG output) in the examples folder.

If you experience any issue, have a question or a suggestion, or if you wish to contribute, feel free to open an issue.