The charting library must be stored in a ZIP file, which contains exactly 2 files:
chart.jsThe 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.
Sets the global variable window.Graph to an object with render function. See below.
chart.cssUnobfuscated styling, no global rules (no body, h1, etc; only chart-related rules).
No external fonts. The system font stack should be used instead (example).
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.
Example:
html.dark .my-chart--container {
color: #EEE;
}Graph.render(container, chart)Renders a graph inside the container element.
containerDOM Node in which the chart is rendered.
The graph layout should resize automatically to occupy the entire available width (handle window.resize event).
chartJSON 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.