Getting Started

Creating beautiful data visualizations using Pioneer Charts and Angular is both simple and intuitive. The following steps will help get you up and running in no time.

Introduction

Lets face it, creating rich data visualizations is hard! A lot of work needs to be put in up front to produce clean and compliant markup that reacts to data in meaningful way. Pioneer Charts sets out to solve these problems in a simple and intuitive way through:

• Interaction with charts through a common and powerful contract.
• Harnessing the power of d3 and the richness of SVG markup.
• Building on top of Angular, a long-term supported and familiar framework.
• Supplying a means to add styling overrides to an already beautiful default theme.

Quick Start

Step 1: Install Pioneer Charts

npm install --save @pioneer-code/pioneer-charts

Step 2: Import Components

Pioneer Charts components are standalone. Import the ones you plan on using directly in your component.

import { PcacLineChart } from '@pioneer-code/pioneer-charts';

@Component({
  ...
  imports: [PcacLineChart],
  ...
})
export class YourComponent { }

Step 3: Import Styles

@import "@pioneer-code/pioneer-charts/themes/pioneer-charts.css";

Accessibility

Every chart can be used from the keyboard and read by a screen reader, with nothing to set up.

• A chart is one stop in the Tab order. Inside it, the arrow keys move from bar to bar (slice, point), and Home and End go to the first and last.
• The focused bar, slice or point is highlighted and shows its tooltip, as it would under the pointer. Escape hides the tooltip.
• Enter or Space does what a click does: barClicked, sliceClicked or dotClicked emits.
• A screen reader announces the chart by its ariaLabel, and each bar, slice or point by its key and value, formatted as its axis is — “Chips, Week 3: 125”. Axes and grid lines are left out, as the marks already carry their values. With a custom tooltip, the focused mark is described by the tooltip too, so whatever the template adds is read out.
• When the user has asked their system to reduce motion, charts are drawn without animation.
• A legend is a group named by its heading, and each of its items a switch that Enter or Space toggles.