# Chartist.js ADDON Simple responsive charts

About

Chartist's goal is to provide a simple, lightweight and unintrusive library to responsively craft charts on your website. Chartist leverages the power of browsers today and say good bye to the idea of solving all problems ourselves.

Chartist works with inline-SVG and therefore leverages the power of the DOM to provide parts of its functionality. This also means that Chartist does not provide it's own event handling, labels, behaviors or anything else that can just be done with plain HTML, JavaScript and CSS. The single and only responsibility of Chartist is to help you drawing "Simple responsive Charts" using inline-SVG in the DOM, CSS to style and JavaScript to provide an API for configuring your charts.

Find tutorials, guidelines and more on their official documentation

## Area Chart

Example of line area chart with a color filler

## Line Scattered

This advanced example uses a line chart to draw a scatter diagram. The data object is created with a functional style random mechanism. There is a mobile first responsive configuration using the responsive options to show less labels on small screens.

## Using Events

Chartist has fixed graphical representations that are chosen because of their flexibility and to provide a high level of separation of the concerns. However, sometimes you probably would like to use different shapes or even images for your charts. One way to achieve this is by using the draw events and replace or add custom SVG shapes.

## Bipolar Line Chart

You can also only draw the area shapes of the line chart. Area shapes will always be constructed around their areaBase which also allows you to draw nice bi-polar areas.

## Advanced SMIL Animation

Chartist provides simple API to animate the Chart elements using SMIL. You can do most animation with CSS but in some cases you'd like to animate SVG properties that are not available in CSS

## Horizontal Bar

Guess what! Creating horizontal bar charts is as simple as it can get. There's no new chart type you need to learn, just passing an additional option is enough

## Peak Circles

With the help of draw events we are able to add a custom SVG shape to the peak of our bars.

## Pie Chart

Basic pie chart with label interpolation to show percentage instead of the actual data value

## Overlap Bar (Mobile)

This example makes use of label interpolation and the seriesBarDistance property that allows you to make bars overlap over each other. This then can be used to use the available space on mobile better. Resize your browser to see the effect of the responsive configuration.

## Extream Responsive

Customized responsive configuration, you can create a chart that adopts to every media condition!

## Gauge Chart

This pie chart uses donut, startAngle and total to draw a gauge chart.

## Line Interpolation

By default Chartist uses a cardinal spline algorithm to smooth the lines

## Muti Labels

Chartist will figure out if your browser supports foreignObject and it will use them to create labels that are based on regular HTML text elements. Multi-line and regular CSS styles are just two of many benefits while using foreignObjects!

## Series Overrides

By naming your series using the series object notation with a name property, you can enable the individual configuration of series specific settings. `showLine`, `showPoint`, `showArea` and even the smoothing function can be overriden per series! And guess what? You can even override those series settings in the responsive configuration!

## Stacked Bar

You can also set your bar chart to stack the series bars on top of each other easily by using the `stackBars` property in your configuration.

## Path Animation

Path animation is made easy with the SVG Path API. The API allows you to modify complex SVG paths and transform them for different animation morphing states.

## Label Placement

You can change the position of the labels on line and bar charts easily by using the `position` option inside of the axis configuration.

## Bar Chart

A simple barchart with default configuration

## Pie Chart (labels)

This pie chart is configured with custom labels specified in the data object

## Distributed Series

Sometime it's desired to have bar charts that show one bar per series distributed along the x-axis. If this option is enabled, you need to make sure that you pass a single series array to Chartist that contains the series values. In this example you can see T-shirt sales of a store categorized by size.

## Donut Fill

This pie chart uses donut and donutSolid to draw a donut chart

## Gauge Fill

This pie chart uses total, startAngle, donut and donutSolid to draw a gauge chart.

- Home
- Inbox
- Add More

Tracey Chang
IT Director

- Tracey Chang Online
- Oliver Kopyuv Online
- Dr. John Cook PhD Away
- Ali Amdaney Online
- Sarah McBrook Online
- oliver.kopyuv@gotbootstrap.com Offline
- oliver.kopyuv@gotbootstrap.com Busy
- oliver.kopyuv@gotbootstrap.com Offline
- +714651347790 Missed Call

Jun 19

Hey Tracey, did you get my files?

3:00 pm

Hi

Sorry going through a busy time in office. Yes I analyzed the solution.

It will require some resource, which I could not manage.

3:24 pm

Okay

Sending you some dough today, you can allocate the resources to this project.

3:26 pm

Perfect. Thanks a lot!

I will have them ready by tonight.

Cheers

Jun 20
Send

#### Layout Settings User Interface Settings

##### App Layout

Fixed Header header is in a fixed at all times
Fixed Navigation left panel is fixed
Minify Navigation Skew nav to maximize space
Hide Navigation roll mouse on edge to reveal
Top Navigation Relocate left pane to top
Fixed Footer page footer is fixed
Boxed Layout Encapsulates to a container

Fixed Background

##### Mobile Menu

Push Content Content pushed on menu reveal
No Overlay Removes mesh on menu reveal
Off-Canvas (beta) Content overlaps menu

##### Accessibility

Bigger Content Font content fonts are bigger for readability
High Contrast Text (WCAG 2 AA) 4.5:1 text contrast ratio
Daltonism (beta) color vision deficiency
Preloader Inside preloader will be inside content
SmartPanel Icons (not Panels) smartpanel buttons will appear as icons

##### Global Modifications

Clean Page Background adds more whitespace
Hide Navigation Icons invisible navigation icons
Disable CSS Animation Disables CSS based animations
Hide Info Card Hides info card from left panel
Lean Subheader distinguished page header
Hierarchical Navigation Clear breakdown of nav links
Dark Navigation Navigation background is darkend

##### Global Font Size

SM MD LG XL
Change root font size to effect rem values (resets on page refresh)

##### Theme colors more info

##### Theme Modes (beta) why beta?

###### Internet Explorer Issue

This particular component may not work as expected in Internet Explorer. Please use with caution.
Default
Light
Dark

Reset Settings
Factory Reset