Suave Charts

Beautiful, easy to use charts for your app or website. Customize with CSS. Free for personal use.

Download Ask about a commercial license

Overview

HTML5 & SVG

Suave Charts are built using SVG and HTML5 - no Flash! Meaning they work across all modern browsers and devices.

Fully responsive

All charts automatically resize themselves as screen sizes change. You never have to worry about pixel widths or heights.

Easily style with CSS

Suave Charts are super easy to customize using CSS. This makes it easy for designers to customize charts without needing to hack away at a ton of JavaScript.

Get started in less than a minute

Download the latest version from the link above and place the files in your project:

<!-- Put the CSS in your head tag -->
<link rel="stylesheet" href="suave-charts.css" />

<!-- Put the JS just before the closing /body tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js"></script>
<script src="suave-charts.min.js"></script>

Line Charts

Suave charts' Line Charts are super flexible and easy to use. Multiple lines, grids, linear/log scales, tooltips and line smoothing are all supported options. Let's start with how to create & draw a chart:

Basic

Show code

Javascript

Time Series

Show code

Javascript

Stacked Area

Show code

Javascript

Partial Data

Show code

Javascript

Custom Labels

Show code

Javascript

Line Chart APIs

Make the chart

var chart = new Suave.LineChart(selector, {
  option1: value, // chart level options
  option2: value
})

Draw the chart

chart.draw({ 
  labels: [x-axis labels], // ex [1,2,3,4]
  lines: [
    // Each line needs a unique label. 
    { label: "line1", values: [y-axis values] [,line level options]},
    { label: "line2", values: [y-axis values] [,line level options]}
  ] 
}) 

Customize the chart

Line charts have three primary parts you can style with CSS. Lines, areas and dots (points). Charts can be styled globally or on a line-by-line basis.


/* Global chart styles */
.line { ... }
.dot { ... }
.area { ... }

/* Line specific styles. Each line uses its label as a CSS class. 
Ex if we had a line with label: "line1". We could style it
separately like so: */
.line.line1 { ... }
.dot.line1 { ... }
.area.line1 { ... }

Chart level options

name type default
aspectRatio String 16:9

Rather than specifying a chart's width & height you specify a String aspect ratio like "16:9". When the window size changes the chart will automatically resize itself whilst preserving this aspect ratio.

dotSize Number 6

Sets the radius of points (dots) drawn on the chart

grid Boolean true

If enabled draws a grid behind the chart

stack Boolean false

If enabled the chart will act as a "stacked line chart". The lines will be stacked in the order they are passed in, i.e. the first line in the lines: [...] array passed to chart.draw() will be on the bottom.

xScale String ["linear", "log", "time"]

Sets the axis type for the x-axis. Note if "time" is selected your x-axis labels passed via chart.draw() must either be JavaScript Date objects or epoch timestamps (ex from Date.getTime()).

yScale String ["linear", "log"]

Sets the axis type for the y-axis.

xLabelInterval String

If xScale is "time" this sets the "step-size" of the labels along the x-axis. The value must be one of: ["seconds","minutes", "days", "months", "weeks", "years"]

xLabelFormat Function or String null

Formats the x-axis labels. The function takes 1 argument which is the x value and it is called 1 time for each x-axis label to be rendered. If left as the default (null), the chart will use the default formatter which varies by the value of xScale. Here's an example: function(x) { return x + "million"; }

If xScale is "time" you can choose to pass a date format string like "%y-%m-%d" instead.

yLabelFormat Function null

A custom function that formats the y-axis labels. The function takes 1 argument which is the y value and it is called 1 time for each y-axis label to be rendered. If left as the default (null), the chart will use the default formatter which varies by the value of yScale. Here's an example: function(y) { return y + "million"; }

ticks Number 10

Sets the number of labels (ticks) to draw on the x-axis. The chart will always draw the first/last labels on the scale and attempt to evenly space the rest.

tooltips Boolean true

Toggles tooltip support on the chart.

tooltipFormat Function null

A custom function that formats the tooltips that appear when hovering over a point (dot). The function takes 1 argument which is the y value and it is called 1 time for each point (dot) to be rendered. If left as the default (null), the chart will use the default formatter which simply adds commas to the y values. Here's an example: function(y) { return "$" + y; }

Line level options

name type default
area Boolean false

If enabled renders a shaded area below the chart line.

dots Boolean true

If enabled renders each point (dot) ontop of the line. This needs to be enabled for tooltips to work

smooth Boolean false

If enabled smooths the chart line. The smoothing method preseves the monotonacity of the line.


Bar Charts

Basic

Show code

Javascript

Grouped

Show code

Javascript

Horizontal (Column Chart)

Show code

Javascript

Goals

Drag the bars to allocate your leftover monthly funds

Show code

Javascript

Bar Chart APIs

Make the chart

var chart = new Suave.BarChart(selector, {
  option1: value, // chart level options
  option2: value
})

Draw the chart

chart.draw({ 
  labels: [x-axis labels], // ex ["Mon", "Tues", "Wed"]
  
  // Non-grouped
  bars: [1, 2, 3] 

  // OR for grouped bars
  bars: [[1,2], [3,4], [5,6]]

}) 

Customize the chart


/* Global chart styles */
.bar { ... }

/* Bar specific styles. Each group of bars gets the CSS class "bar-group"
in addition to a CSS class that matches its label. 
Then each bar gets a class matching its index in the group's array. 

Ex if we had chart.draw({ labels: ["Monday"], bars: [1,2,3] }) we could style each
bar like so:
*/
.bar-group.Monday .bar.bar-0 { ... }
.bar-group.Monday .bar.bar-1 { ... }
.bar-group.Monday .bar.bar-2 { ... }

Chart level options

name type default
aspectRatio String 16:9

Rather than specifying a chart's width & height you specify a String aspect ratio like "16:9". When the window size changes the chart will automatically resize itself whilst preserving this aspect ratio.

grid Boolean true

If enabled draws a grid behind the chart

layout String ["vertical", "horizontal"]

Controls whether the bars are laid out vertically (y-axis is vertical) or horizontally (y axis is horizontal)

xLabelFormat Function null

Formats the x-axis labels. The function takes 1 argument which is the x value and it is called 1 time for each x-axis label to be rendered. If left as the default (null), the chart will use the default formatter which varies by the value of xScale. Here's an example: function(x) { return x + "million"; }

yLabelFormat Function null

A custom function that formats the y-axis labels. The function takes 1 argument which is the y value and it is called 1 time for each y-axis label to be rendered. If left as the default (null), the chart will use the default formatter which varies by the value of yScale. Here's an example: function(y) { return y + "million"; }

tooltips Boolean true

Toggles tooltip support on the chart.

tooltipFormat Function null

A custom function that formats the tooltips that appear when hovering over a bar. The function takes 1 argument which is the y value and it is called 1 time for each bar to be rendered. If left as the default (null), the chart will use the default formatter which simply adds commas to the y values. Here's an example: function(y) { return "$" + y; }


Histograms

Basic

Show code

Javascript

Customized

Show code

Javascript

Histogram APIs

Make the chart

var chart = new Suave.Histogram(selector, {
  option1: value, // chart level options
  option2: value
})

Draw the chart

chart.draw({ 
  values: [1,2,3,4] // etc
}) 

Customize the chart

/* Global chart styles */
.bar { ... }

Chart level options

name type default
aspectRatio String 16:9

Rather than specifying a chart's width & height you specify a String aspect ratio like "16:9". When the window size changes the chart will automatically resize itself whilst preserving this aspect ratio.

bins Number 20

Sets the number of bins for the histogram to use. By default it will try to create 20 evenly spaced bins based on the input data passed in.

domain Array null

Allows you to set the bounds for the histogram. For example if you pass in domain: [-100, 100] the histogram will create N evenly spaced bins between -100 and 100, where N is the value of the bins option. If this option is not set, the histogram will try to infer the domain from your input data.

grid Boolean true

If enabled draws a grid behind the chart

layout String ["vertical", "horizontal"]

Controls whether the bars are laid out vertically (y-axis is vertical) or horizontally (y axis is horizontal)

xLabelFormat Function null

Formats the x-axis labels. The function takes 1 argument which is the x value and it is called 1 time for each x-axis label to be rendered. If left as the default (null), the chart will use the default formatter. Here's an example: function(x) { return x + "million"; }

yLabelFormat Function null

A custom function that formats the y-axis labels. The function takes 1 argument which is the bin frequency and it is called 1 time for each y-axis label to be rendered. If left as the default (null), the chart will use the default formatter. Here's an example: function(y) { return y + "million"; }

tooltips Boolean true

Toggles tooltip support on the chart.

tooltipFormat Function null

A custom function that formats the tooltips that appear when hovering over a bar. The function takes 1 argument which is the y value and it is called 1 time for each bar to be rendered. If left as the default (null), the chart will use the default formatter which simply adds commas to the y values. Here's an example: function(y) { return "$" + y; }


Donut Charts

Basic

Javascript


Licensing

Non-commercial

For non-commercial projects such as a personal website, school project etc. Suave charts is completely free and available under the Creative Commons Attribution-NonCommercial 4.0 License. You can just download Suave Charts and get going.

Commercial

Suave Charts is available under a paid-for commercial license. Send us an email with your use case for pricing.