sgratzl / chartjs-chart-pcp

Chart.js Parallel Coordinates Plot

Chart.js Parallel Coordinate Plots

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

Related Plugins

Check out also my other chart.js plugins:

• chartjs-chart-boxplot for rendering boxplots and violin plots
• chartjs-chart-error-bars for rendering errors bars to bars and line charts
• chartjs-chart-geo for rendering map, bubble maps, and choropleth charts
• chartjs-chart-graph for rendering graphs, trees, and networks
• chartjs-chart-venn for rendering venn and euler diagrams
• chartjs-chart-wordcloud for rendering word clouds
• chartjs-plugin-hierarchical for rendering hierarchical categorical axes which can be expanded and collapsed

Install

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

Usage

see Examples

PCP

Data Structure

the data items are the regular data items along with their labels. For each attribute there is a 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

chartjs-chart-pcp's Issues

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

How can I create a Parallel Coordinate graph in the react?

I want to use this library to create something like this in React: https://plotly.com/javascript/parallel-coordinates-plot/ Is this possible with this library?

Can you please suggest some steps to work with reactjs?

Thanks.

add to awesome list

https://github.com/chartjs/awesome

Chart.js 3.0 update

Chart.js 3.0 is out now, so should be able to update the package.json

Is it possible to have multiple datasets in different colors in the same PCP?

Is it possible to have multiple datasets in different colors in the same PCP?

(In the newest version)

I remember that I have tried to use this library before to find out that it is not possible. But I may be wrong.

How do you set min/max values on the linearAxis/is there a way to customise each y axis scale?

How do you set min/max values on the linearAxis and is there a way to customise each of the y axis scales (for example y axis 1 round ticks to 3dp, y axis 5 round ticks to whole numbers)?

• Version: Current version
• Browser: Chrome

I tried this but nothing seems to change with the scales when I add min/max values
elements: { linearAxis: { axisWidth: 10, border: { color: "grey" }, grid: { display: false }, ticks: { color: "grey", includeBounds: true, }, offset: true, min: 0, max: 1 }, },