# Chart.js ADDON Simple yet flexible JavaScript charting for designers & developers

About

Chart.js is a JavaScript library that allows you to draw different types of charts by using the HTML5 `canvas` element.

The library doesn’t have dependencies and its weight is very low as it’s ~11kb in size when minified, concatenated, and served gzipped. However, you’re able to reduce the size even further, if you don’t use all six of the core chart types, by including only the modules you need.

Find tutorials, guidelines and more on Chart.js's official documentation

## Line Chart

The line chart requires an array of labels for each of the data points. This is shown on the X axis. It has a colour for the fill, a colour for the line and colours for the points and strokes of the points

## Area Chart

An area chart or area graph displays graphically quantitative data. It is based on the line chart. The area between axis and line are commonly emphasized with colors, textures and hatchings

## Horizontal Bar Chart

A horizontal bar chart provides a way of showing data values represented as horizontal bars. It is sometimes used to show trend data, and the comparison of multiple data sets on top of another

## Bar Chart

A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side

## Bar Stacked

A stacked bar chart, is a graph that is used to break down and compare parts of a whole. Each bar in the chart represents a whole, and segments in the bar represent different parts or categories of that whole

## Bar Stacked (horizontal)

A stacked horizontal bar chart, shows you a breakdown and compare parts of a whole. Each segment displays a whole brown down into different parts or categories - displayed on top of another

## Bubble Chart

A bubble chart is used to display three dimensions of data. The location of the bubble is determined by the first two dimensions and the third dimension is represented by the size of the individual bubbles

## Combination Chart (Bar & Line)

This is a combination of different charts presented together to show how easy it is to built complex charts. Here we use similar data sets to combine a linechart with bar chart

## Polar Area

Polar charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. Polar charts is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context

## Radar Chart

For a radar chart, to provide context of what each point means, we include an array of strings that show around each point in the chart. For the radar chart data, we have an array of datasets as objects, with a fill, stroke, and line color for each point. We also have an array of data values

## Pie Chart

Pie charts are probably the most commonly used chart there are. They are divided into segments, the arc of each segment shows the proportional value of each piece of data

## Doughnut Chart

Doughnut charts are probably the most commonly used chart there are. They are divided into segments, the arc of each segment shows the proportional value of each piece of data

- 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