DataRoom Charts

A vanilla JS, CSS and HTML library for creating D3-powered chart components using custom HTML elements. Built on the dataroom-js framework with rspack for bundling.

Installation

Clone the repository:

git clone <your-repo-url>
cd dataroom-charts
npm install

Usage

The main component is <dataroom-chart>, a custom HTML element that renders various chart types using D3.js.

Basic Example

<dataroom-chart type="bar" width="600" height="400">
[
  { "label": "A", "value": 30 },
  { "label": "B", "value": 80 },
  { "label": "C", "value": 45 },
  { "label": "D", "value": 60 }
]
</dataroom-chart>

Chart Types

Bar Chart

• Type: bar or barchart
• Orientations: vertical (default), horizontal
• Data Format: Array of objects with label and value properties

<dataroom-chart type="bar" orientation="horizontal">
[
  { "label": "Category A", "value": 25 },
  { "label": "Category B", "value": 40 },
  { "label": "Category C", "value": 35 }
]
</dataroom-chart>

Scatter Plot

• Type: scatter or scatterchart
• Data Format: Array of objects with x, y, optional r (radius), c (category/color)

<dataroom-chart type="scatter" width="500" height="300">
[
  { "x": 1, "y": 10, "r": 5, "c": "Group 1" },
  { "x": 2, "y": 20, "r": 8, "c": "Group 1" },
  { "x": 3, "y": 15, "r": 6, "c": "Group 2" }
]
</dataroom-chart>

Line Graph

• Type: line, line-graph, or linegraph
• Data Format: Same as scatter plot
• Features: Connects points with lines, grouped by category

<dataroom-chart type="line" line-width="3">
[
  { "x": 1, "y": 10, "c": "Series A" },
  { "x": 2, "y": 15, "c": "Series A" },
  { "x": 3, "y": 12, "c": "Series A" },
  { "x": 1, "y": 5, "c": "Series B" },
  { "x": 2, "y": 8, "c": "Series B" },
  { "x": 3, "y": 11, "c": "Series B" }
]
</dataroom-chart>

Donut Chart

• Type: donut or donutchart
• Data Format: Array of objects with label and value properties
• Features: Labels can be disabled with labels="false"

<dataroom-chart type="donut" width="400" height="400">
[
  { "label": "Slice A", "value": 30 },
  { "label": "Slice B", "value": 25 },
  { "label": "Slice C", "value": 45 }
]
</dataroom-chart>

Attributes

| Attribute | Description | Default | Chart Types | |-----------|-------------|---------|-------------| | type | Chart type (bar, scatter, line, donut) | Required | All | | width | Chart width in pixels | 400 | All | | height | Chart height in pixels | 400 | All | | orientation | Bar chart orientation (vertical, horizontal) | vertical | Bar | | monochrome | Enable monochrome mode with patterns | false | All | | color | Override default color | CSS --hi or palette | All | | labels | Show/hide labels | true | Donut | | line-width | Line thickness | 2 | Line | | radius | Point radius | 5 (scatter), 4 (line) | Scatter, Line | | min-radius | Minimum bubble size | 2 | Scatter, Line | | max-radius | Maximum bubble size | 15 | Scatter, Line | | data | JSON data as attribute | Content | All | | src | URL to an external JSON data file | null | All |

Data Formats

Data can be provided to the chart in three ways. If multiple sources are provided, the priority is as follows: data attribute > src attribute > element content.

Via Element Content (Recommended)

<dataroom-chart type="bar">
[
  { "label": "A", "value": 30 },
  { "label": "B", "value": 80 }
]
</dataroom-chart>

Via Data Attribute

<dataroom-chart type="bar" data='[{"label":"A","value":30},{"label":"B","value":80}]'></dataroom-chart>

Via External JSON File (src)

You can load data from an external JSON file by providing a URL to the src attribute.

<dataroom-chart type="bar" src="path/to/your/data.json"></dataroom-chart>

Monochrome Mode

Enable monochrome mode with patterns for print-friendly or accessible charts:

<dataroom-chart type="bar" monochrome="true">
[
  { "label": "A", "value": 30 },
  { "label": "B", "value": 80 }
]
</dataroom-chart>

Monochrome mode uses SVG patterns (diagonal stripes, dots, circles, etc.) instead of colors to differentiate data series.

Styling

The component uses CSS custom properties for theming:

:root {
  --color-1: #440154;
  --color-2: #482878;
  --color-3: #3e4989;
  /* ... up to --color-12 */
  --hi: #fde725; /* Highlight color */
}

Development

Running the Project

npm run start

Starts the development server on port 3000.

Building the Project

npm run build

Creates optimized files in the dist folder.

Build Customization

Create a .env file to customize build output:

OUTPUT_FILE_NAME=dataroom-charts.min.js
PORT=8080