CanvasXpress Quick Start Guide

Everything you need to create your first interactive visualization.

This guide provides a rapid introduction to CanvasXpress, from adding the library to your page to creating a simple bar chart. Our goal is to get you up and running in minutes, so you can start exploring the powerful features of our scientific data visualization library.

1. Installation

The simplest way to use CanvasXpress is by including the necessary CSS and JavaScript files via CDN links in your HTML document.

<!-- In your HTML <head> -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script type="text/javascript" src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>

2. Your First Visualization

After including the library, you need to create a `<canvas>` element in your HTML `<body>` with a unique ID. Then, use JavaScript to define your data, your chart configuration, and initialize a new CanvasXpress instance.

<!-- In your HTML <body> -->
<canvas id="myFirstChart" width="600" height="400"></canvas>

<script>
var data = {
  "y": {
  "vars": ["Sales"],
  "smps": ["Q1", "Q2", "Q3", "Q4"],
  "data": [[500, 750, 620, 900]]
  }
};

var config = {
  "graphType": "Bar",
  "title": "Quarterly Sales"
};

window.onload = function() {
  new CanvasXpress("myFirstChart", data, config);
};
</script>

3. Core Concepts

CanvasXpress is built on a few key principles that make it unique:

High Performance: The library uses HTML5 Canvas to render complex datasets smoothly, outperforming SVG-based libraries.
Rich Interactivity: Built-in features for zooming, panning, and data selection empower users to explore their data without code.
Reproducibility: You can export a visualization's complete state as a JSON object, making it easy to share and reproduce your exact chart.

Ready to explore more?

View All Examples