# Proposed JavaScript library interface

## Files 

The charting library must be stored in a ZIP file, which contains exactly **2 files**:

### `chart.js` 

The package should include everything needed to build graphs. Unobfuscated source code.

No network requests: AJAX, JSONP, CSS, fonts, images by URL etc. are not allowed. Every resource needed should be accessed via [Data URLs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs).

Sets the global variable `window.Graph` to an object with `render` function. [See below](#graph-render-container-chart).

### `chart.css`

Unobfuscated styling, no global rules  (no `body`, `h1`, etc; only chart-related rules).

No external fonts. The system font stack should be used instead ([example](https://css-tricks.com/snippets/css/system-font-stack/)).

Each CSS-class used by the library should have the same prefix (e.g. `my-chart--`).

Light mode is used by default. Dark mode is enabled using the `html.dark` parent rule (`<html class="dark">...</html>`). The event `darkmode` is fired on `document` when the theme (and `<html>` class) changes.

No external requests: AJAX, JSONP, CSS, images etc. are prohibited. Everything needed should be accessed via [Data URLs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs).

Example:

    html.dark .my-chart--container {
      color: #EEE;
    }

## `Graph.render(container, chart)`

Renders a graph inside the container element.

### `container`
DOM Node in which the chart is rendered.
The graph layout should resize automatically to occupy the entire available width (handle `window.resize` event).

### `chart`
JSON Object representing a graph.

--- | ---
**title** | Graph title
**columns** | List of all data columns in the chart. Each column has its label at position 0, followed by values.\
x values are UNIX timestamps in milliseconds.
**types** | Chart types for each of the columns. Supported values:\
`"line"`\
`"area”`\
`"bar”`\
`"x"` (x axis values for each of the charts at the corresponding positions).
**colors** | Color for each variable in 6-hex-digit format (e.g. "#AAAAAA").
**names** | Name for each variable.
**percentage** | true for percentage based values. 
**stacked** | true for values stacking on top of each other. 
**y_scaled** | true for charts with 2 Y axes.
**x_on_zoom(x)** | optional function which returns Promise with data for the zoomed chart (new chart object). If function is not defined, the chart needs no zooming (although when `percentage` is true, the chart needs to show piecharts automatically).

------

For the moment, all restrictions on charts remain the same as in the contest:

- Chart types are always the same for every column in the graph.

- Graphs with every chart type should be able to zoom into the same chart type with the same columns (names and types).
- Each graph must be zoomable into a "line" chart with any set of columns (like the 4th graph in the second contest).

- The "bar" chart type and "stacked" option are always used together.
- "y_scaled" is only used with exactly 2 "line" columns.
- "percentage" is always used with the "area" graph.
- Up to 50 columns on one graph must be supported.