Chart.js Parallel Coordinates Plot

Overview

Chart.js Parallel Coordinate Plots

NPM Package Github Actions

Chart.js module for charting parallel coordinate plots (PCPs). Adding new chart type: pcp.

MTCars

Open in CodePen

MTCars Tooltip

MTCars Tension

Open in CodePen

Related Plugins

Check out also my other chart.js plugins:

Install

npm install --save chart.js chartjs-chart-pcp

Usage

see Samples on Github

PCP

Data Structure

the data items are the regular data items along with their labels. For each attribute there is an dataset. e.g., in the following example there are three items (A, B, C) with three axes / features (f1, f2, f3).

const objs = [
  { label: 'A', f1: 5, f2: 3, f4: 3 },
  { label: 'B', f1: 2, f2: 1, f4: 8 },
  { label: 'C', f1: 10, f2: 6, f4: 2 },
];
const attrs = ['f1', 'f2', 'f3'];
const config = {
  type: 'pcp',
  data: {
    labels: objs.map((obj) => obj.label),
    datasets: attrs.map((attr) => ({
      label: attr,
      data: objs.map((obj) => obj[attr]),
    })),
  },
  options: {},
};

Styling of elements

Two new elements were added: lineSegment as a subclass of line for a line segment between two axes and linearAxis for representing the vertical axis as a wrapper around a linear scale.

see https://github.com/sgratzl/chartjs-chart-pcp/blob/develop/src/elements/lineSegment.ts#L3-L9

see https://github.com/sgratzl/chartjs-chart-pcp/blob/develop/src/elements/axis.ts#L13-L21

Scaling

The Parallel Coordinates controller pcp uses a linear scale. There is also the logarithmicPcp that uses a logarithmic scale. Using chart.js hybrid charts, one can specify the type per dataset. e.g.,

const config = {
  type: 'pcp',
  data: {
    labels: ['1', '2', '3'],
    datasets: [
      {
        label: 'A',
        data: [1, 2, 3]
      },
      {
        type: 'logarithmicPcp',
        label: 'B',
        data: [1, 2, 10000]
      }
    })),
  },
  options: {},
};

ESM and Tree Shaking

The ESM build of the library supports tree shaking thus having no side effects. As a consequence the chart.js library won't be automatically manipulated nor new controllers automatically registered. One has to manually import and register them.

Variant A:

import Chart from 'chart.js';
import { ParallelCoordinatesController, LinearAxis, LineSegment, PCPScale } from 'chartjs-chart-pcp';

Chart.register(ParallelCoordinatesController, PCPScale, LineSegment);
Chart.registry.addElements(LinearAxis);
...

new Chart(ctx, {
  type: ParallelCoordinatesController.id,
  data: [...],
});

Variant B:

import { ParallelCoordinatesChart } from 'chartjs-chart-pcp';

new ParallelCoordinatesChart(ctx, {
  data: [...],
});

Development Environment

npm i -g yarn
yarn install
yarn sdks vscode

Common commands

yarn compile
yarn test
yarn lint
yarn fix
yarn build
yarn docs
You might also like...

Chart image and QR code web API

Chart image and QR code web API

QuickChart QuickChart is a service that generates images of charts from a URL. Because these charts are simple images, they are very easy to embed in

Dec 25, 2022

📈 A small, fast chart for time series, lines, areas, ohlc & bars

📈 A small, fast chart for time series, lines, areas, ohlc & bars

📈 μPlot A small (~35 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed) Introduction μPlot is a fast, memory-efficient Can

Jan 7, 2023

TChart.js - simple and configurable Bar and Line Chart library in Javascript

TChart.js - simple and configurable Bar and Line Chart library in Javascript

TChart.js Simple and configurable Bar and Line Chart library in Javascript Description TChart.js is a canvas-based simple Javascript Bar and Line Char

Mar 3, 2021

🍞📊 Beautiful chart for data visualization.

🍞📊  Beautiful chart for data visualization.

🍞 📈 Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. 📦 Packages The functionality of TOAST U

Jan 6, 2023

The power of Chart.js in Jupyter !

 The power of Chart.js in Jupyter !

The power of Chart.js in Jupyter Notebooks Installation You can install ipychart from your terminal using pip or conda: # using pip $ pip install ipyc

Dec 8, 2022

Chart.js bindings for OCaml

chartjs-ocaml: OCaml bindings for Chart.js This library provides OCaml bindings for the Chart.js charting library and some popular plugins. Following

Aug 20, 2022

Java library for use with Chart.js javascript library

Chart.java Chart.java enables integration with the excellent Chart.js library from within a Java application. Usage example In Java: BarDataset datase

Dec 16, 2022

J2CL and GWT Charts library based on CHART.JS

J2CL and GWT Charts library based on CHART.JS

Charba - J2CL and GWT Charts library based on CHART.JS What's Charba GWT Web toolkit doesn't have charting library available out of the box. There are

Dec 17, 2022

📊 Vue.js wrapper for Chart.js

📊  Vue.js wrapper for Chart.js

vue-chartjs vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components. Demo & Docs 📺 Demo 📖 Docs Compatibility

Jan 7, 2023
Comments
  • Cannot run npm install

    Cannot run npm install

    When running npm install I get the following error

    D:\Temp\node_modules\chartjs-chart-pcp>npm install

    [email protected] prepare D:\Temp\node_modules\chartjs-chart-pcp npm run build:dev

    [email protected] build:dev D:\Temp\node_modules\chartjs-chart-pcp rollup -c -i src/index.js

    [!] Error: Could not resolve entry module (rollup.config.js).
    Error: Could not resolve entry module (rollup.config.js).
        at error (D:\Temp\node_modules\chartjs-chart-pcp\node_modules\rollup\dist\shared\rollup.js:161:30)
        at ModuleLoader.loadEntryModule (D:\Temp\node_modules\chartjs-chart-pcp\node_modules\rollup\dist\shared\rollup.js:17598:16)
        at process._tickCallback (internal/process/next_tick.js:68:7)
        at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
        at startup (internal/bootstrap/node.js:283:19)
        at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
    
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! [email protected] build:dev: `rollup -c -i src/index.js`
    npm ERR! Exit status 1
    
    bug 
    opened by PaulMcGuinness 8
  • Bump node-fetch from 2.6.0 to 2.6.1

    Bump node-fetch from 2.6.0 to 2.6.1

    Bumps node-fetch from 2.6.0 to 2.6.1.

    Release notes

    Sourced from node-fetch's releases.

    v2.6.1

    This is an important security release. It is strongly recommended to update as soon as possible.

    See CHANGELOG for details.

    Changelog

    Sourced from node-fetch's changelog.

    v2.6.1

    This is an important security release. It is strongly recommended to update as soon as possible.

    • Fix: honor the size option after following a redirect.
    Commits
    • b5e2e41 update version number
    • 2358a6c Honor the size option after following a redirect and revert data uri support
    • 8c197f8 docs: Fix typos and grammatical errors in README.md (#686)
    • 1e99050 fix: Change error message thrown with redirect mode set to error (#653)
    • 244e6f6 docs: Show backers in README
    • 6a5d192 fix: Properly parse meta tag when parameters are reversed (#682)
    • 47a24a0 chore: Add opencollective badge
    • 7b13662 chore: Add funding link
    • 5535c2e fix: Check for global.fetch before binding it (#674)
    • 1d5778a docs: Add Discord badge
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by akepinski, a new releaser for node-fetch since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v4.1.0)
Owner
Samuel Gratzl
Research Software Engineer with a focus on Data Visualization - author of @lineupjs and @upsetjs
Samuel Gratzl
A Simple Dashboard Chart in Laravel Nova using Chart JS

A Simple Dashboard Chart in Laravel Nova using Chart JS. Starting create your own dashboard with Chart JS Integration can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart.

Kuncoro Wicaksono 177 Jan 4, 2023
Chart.js plugin to defer initial chart updates

Chart.js plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart a

Chart.js 97 Nov 9, 2022
Bar Funnel Chart extension for Chart.js

Chart.BarFunnel.js Provides a Bar Funnel Chart for use with Chart.js Documentation To create a Bar Funnel Chart, include Chart.BarFunnel.js after Char

Chart.js 58 Nov 24, 2022
TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies; use it with any framework or backend.

null 24 Dec 12, 2022
Redefined chart library built with React and D3

Recharts Introduction Recharts is a Redefined chart library built with React and D3. The main purpose of this library is to help you to write charts i

recharts 19.4k Jan 2, 2023
:bar_chart: A D3-based reusable chart library

c3 c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications. Follow the link for more information: http

C3.js 9.2k Jan 2, 2023
GPL version of Javascript Gantt Chart

dhtmlxGantt Getting started | Features | Follow us | License | Useful links dhtmlxGantt is an open source JavaScript Gantt chart that helps you illust

null 952 Dec 29, 2022
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 2, 2023
:bar_chart: Re-usable, easy interface JavaScript chart library based on D3.js

billboard.js is a re-usable, easy interface JavaScript chart library, based on D3 v4+. The name "billboard" comes from the famous billboard chart whic

NAVER 5.4k Jan 1, 2023
:bar_chart: A library of modular chart components built on D3

Plottable Plottable is a library of chart components for creating flexible, custom charts for websites. It is built on top of D3.js and provides highe

Palantir Technologies 2.9k Dec 31, 2022