Chartist

Chartist exposes low-level utilities for advanced customization:

• Interpolation: A namespace providing methods to define how lines or shapes are interpolated between data points.
• EventEmitter: A class used for handling and emitting events within the Chartist lifecycle.

Chartist provides several core chart classes to render different data visualizations. The primary chart types available are:

• BarChart: For rendering bar-based visualizations.
• LineChart: For rendering line-based visualizations.
• PieChart: For rendering pie-based visualizations.

Each class is used to instantiate a chart on a specific DOM element with provided data and options.

// Example conceptual usage
new LineChart('.chart-container', {
  labels: ['Jan', 'Feb', 'Mar'],
  series: [[1, 2, 3]]
});

Chartist uses SVG elements for rendering. You can interact with or extend these via specific wrapper classes:

• Svg: The base wrapper for SVG elements.
• SvgPath: Specifically for managing and manipulating SVG path elements.
• SvgList: For managing collections of SVG elements.

You can control how axes behave and scale using different axis classes:

• AutoScaleAxis: Automatically calculates the scale based on the data provided.
• FixedScaleAxis: Uses a fixed scale, which is useful when you want to maintain a consistent range across multiple charts.
• StepAxis: Renders axes with step-like increments rather than continuous linear scales.

Chartist allows you to control how the axes scale based on your data:

1. Auto scale axis: The axis automatically adjusts its range to fit the minimum and maximum values of the provided data.
2. Fixed and auto scale axis: You can combine fixed ranges for certain axes with auto-scaling for others to maintain a consistent visual baseline while still accommodating data fluctuations.

/* Refer to 'line/axis-auto' and 'line/axis-fixed-and-auto' sandboxes for configuration patterns */

Chartist is a lightweight, responsive charting library built with inline-SVG.

Key Design Principles:

• Leverages Web Standards: Instead of reinventing the wheel, Chartist relies on the DOM, HTML, CSS, and JavaScript.
• Styling via CSS: Chartist does not provide complex internal styling engines; it expects you to use CSS to style the SVG elements.
• Responsiveness: It is designed to work responsively within the browser's layout.
• Single Responsibility: The library's primary role is to draw charts using inline-SVG in the DOM. It does not provide its own event handling or label behaviors if they can be achieved with standard web technologies.

When working with datasets that contain gaps, you have two primary visual approaches:

1. Holes in data: The line breaks at the missing data points, creating a visual gap in the chart.
2. Filled holes in data: The chart interpolates or connects the points across the missing data, effectively 'filling' the gap to maintain a continuous line.

/* Refer to 'line/data-holes' and 'line/data-fill-holes' sandboxes for implementation */

If you are using GitHub Pages for hosting, you can build and push the website to the gh-pages branch using the deploy command. You must provide your GitHub username via the GIT_USER environment variable. Set USE_SSH=true to use SSH for the deployment.

$ GIT_USER=<Your GitHub username> USE_SSH=true pnpm deploy

Start a local development server to preview the website. This command opens a browser window and supports live reloading, so most changes are reflected immediately without a server restart.

$ pnpm start

Install the chartist library using your preferred package manager.

pnpm add chartist
# or
yarn add chartist
# or
npm i chartist

Generate static content for the website. The output is placed in the build directory and is ready to be served by any static content hosting service.

$ pnpm build