Chart

The Gravity charting library is built on chart.js. We've made a number of modifications to the chart styling and created initiliser functions so you can easily create beautiful, responsive charts in seconds.

The standard structure for a chart is a container element, with a canvas inside. You pass the class name of the container to the chart's initialiser function.

You will also need to place an empty div with an id of #chart-tooltip somewhere on your page (it doesn't matter where) to utilise the custom tooltips. These can be styled in chart.scss

<div id="chart-tooltip"></div>

To include a legend in your chart, place an empty div with the class .legend before or after your chart container.

<div class="legend"></div>

You can customise any of the chart functionality in /assets/js/chart.js

Chart Datasets

Chart data should be in the following format:

labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn"],
datasets: [{ label: "Gravity", data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0] }]};

You can pass multiple datasets to a line or bar chart by adding to the datasets array.

Line Chart

HTML

<div class="chart linechart">
 <canvas></canvas>
</div>

Javascript

// chart: class name of the chart container: .linechart
// data: data to be plotted
// color: use [redChart], [greenChart], [blueChart] or [purpleChart]
// or add multiple colors to the array when plotting multiple datasets
// showLegend: true or false
// useMetric true or false – converts 10,000 to 10k

createLineChart(chart, data, color, showLegend, useMetric)

Sparkline

HTML

<div class="sparkline">
 <canvas></canvas>
</div>

Javascript

// chart: class name of the chart container: .sparkline
// data: data to be plotted
// color: use [redChart], [greenChart], [blueChart] or [purpleChart]
// or add multiple colors to the array when plotting multiple datasets
// showLegend: true or false<

createSparklineChart(chart, data, color, showLegend)

Bar Chart

HTML

<div class="chart barchart">
 <canvas></canvas>
</div>

Javascript

// chart: class name of the chart container: ".barchart"
// data: data to be plotted
// color: use [redChart], [greenChart], [blueChart] or [purpleChart]
// or add multiple colors to the array when plotting multiple datasets
// showLegend: true or false
// useMetric true or false – converts 10,000 to 10k

createBarChart(chart, data, color, showLegend, useMetric)

Pie Chart

HTML

<div class="legend"></div>

<div class="pie chart">
 <canvas></canvas>
</div>

Javascript

// chart: class name of the chart container: ".piechart"
// data: data to be plotted
// color: use [redChart], [greenChart], [blueChart] or [purpleChart]
// or add multiple colors to the array when plotting multiple datasets
// showLegend: true or false

createPieChart(chart, data, color, showLegend)

Donut Chart

HTML

<div class="legend"></div>

<div class="donut chart">
 <canvas></canvas>
</div>

Javascript

// chart: class name of the chart container: ".donutchart"
// data: data to be plotted
// color: use [redChart], [greenChart], [blueChart] or [purpleChart]
// or add multiple colors to the array when plotting multiple datasets
// showLegend: true or false

createDonutChart(chart, data, color, showLegend)