by cibotech

cibotech / evilplot

A Scala combinator-based plotting library.

217 Stars 19 Forks Last release: almost 2 years ago (v0.6.3) BSD 3-Clause "New" or "Revised" License 926 Commits 15 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:


Build Status Scala.js Download

EvilPlot is about combinators for graphics.

Documentation for EvilPlot is available here.

Getting Started

Add EvilPlot to your build with:

resolvers += Resolver.bintrayRepo("cibotech", "public")
libraryDependencies += "com.cibo" %% "evilplot" % "0.6.3" // Use %%% instead of %% if you're using ScalaJS
Take a look at the full getting started guide. EvilPlot is published for Scala 2.11 and Scala 2.12.

Table of Contents

Low-Level Drawing API

The low-level drawing API exists in the

package. Drawing primitives extend the
trait. Once constructed, these can then be rendered using a
(such as
, used for rendering to a JavaScript canvas or
, used for rendering to

Drawing primitives can be divided into three categories: drawing, positioning, and style. The following primitives for drawing are available:

  • EmptyDrawable
  • Line
  • Path
  • Rect
  • BorderRect
  • Disc
  • Wedge
  • Text
  • Polygon

The following primitives for positioning are available:

  • Translate
  • Affine
  • Scale
  • Rotate
  • Group
  • Resize

The following primitives for style are available:

  • Style
  • StrokeStyle
  • StrokeWeight
  • GradientFill


package object provides several convenience functions for creating and composing these primitives.

For Interaction events

Plot API

The plot API is in the

package. Using this API, one creates a plot using a plot constructor. Once a plot is constructed, it is possible to change properties and add components to the plot. The following plot constructors are available (though additional constructors can be added):
  • BarChart
  • Heatmap
  • Histogram
  • LinePlot
  • PieChart
  • ScatterPlot
  • SurfacePlot

Multiple plots can be combined using the following plot constructors: * Facets - Creates a 2-dimensional grid of plots with aligned axes. * Overlay - Stacks multiple plots on top of each other with aligned axes.

Plot components are available in the

package, though the
package object provides implicits on the
object itself to make them easier to use.


Annotations are text (or other

s) placed on top of the plot area. The X and Y coordinate parameters provide the relative position of the annotation (in the range 0 to 1).
  • annotate - Add an annotation


The following methods (from the package object) are available for adjusting axes. These take arguments to alter the type of axis.

  • xAxis - Add an x-axis
  • yAxis - Add a y-axis


By default, the bounds of the plot area are determined by the data and plot constructor. However, it's possible to alter the bounds explicitly:

  • xbounds - Set the min/max x bounds
  • ybounds - Set the min/max y bounds


  • xGrid - Add vertical grid lines
  • yGrid - Add horizontal grid lines


Labels for a single plot:

  • title - Add a title to the top of the plot area
  • topLabel - Add a label above the plot area
  • bottomLabel - Add a label below the plot area
  • leftLabel - Add a label to the left of the plot area
  • rightLabel - Add a label to the right of the plot area

Labels for faceted plots:

  • topLabels - Add a label for each facet above the plot area
  • bottomLabels - Add a label for each facet below the plot area
  • leftLabels - Add a label for each facet to the left of the plot area
  • rightLabels - Add a label for each facet to the right of the plot area


  • topLegend - Add a legend above the plot area
  • bottomLegend - Add a legend below the plot area
  • leftLegend - Add a legend to the left of the plot area
  • rightLegend - Add a legend to the right of the plot area
  • overlayLegend - Overlay a legend on the plot area
  • renderLegend - Return a drawable to represent the legend


  • hline - Draw a horizontal line on the plot area
  • vline - Draw a vertical line on the plot area
  • trend - Draw a trend line on the plot area
  • function - Draw a function on the plot area


Add padding around a plot area. This is mostly used for lining up plot areas of multiple plots in facets.

  • padTop
  • padBottom
  • padLeft
  • padRight

Custom Plots and Plot Components

Custom plots can be constructed by creating new plot components, plot renderers, and/or plot element renderers.

Plot Components

A plot component is an object that goes around a plot area (such as a label or axis), in front of it (such as a trend line), or behind it (such as a background). Custom plot components can be implemented by extending

for components that need to render differently for each facet).

To add a custom component to a plot (or any component), use either the

method on
, which will return an updated plot with the component.
plot :+ component
will insert the component furthest away from the plot area and
component +: plot
will insert the component closest to the plot area.

Plot Renderers

Custom plot renderers are created by extending

. Instances of these can then be used as an argument to
to create custom plots.

Plot Element Renderers

A plot element is an instance of

. These are used by
instances to render elements of a plot. For example, the
used for
uses a
to render points. It is not necessary that a
s, but doing so allows them to share common code.

The following

s are provided:
  • BarRenderer
  • BoxRenderer
  • PathRenderer
  • PointRenderer
  • SurfaceRenderer

Working on this Project

One-time setup: Install PhantomJS: On macOS, this is available from Homebrew:

brew install phantomjs

To run the demo:

  1. open sbt console
  2. compile, then run fastOptJS listening for changes
    $ sbt
    > compile
    > ~ fastOptJS
  3. go to
    in your browser

Running the unit tests requires PhantomJS. Unit tests must be run from

, not from within IntelliJ.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.