Core code of ChartWerk project
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Coin de Gamma bc1e06e515 Merge pull request '0.6.24' (#37) from 0.6.24 into main 1 month ago
build rename example to demo 4 months ago
demo rm abstact keyword and methods 1 month ago
src rm abstact keyword and methods 1 month ago
.gitignore rename lib/ back into dist/ 10 months ago time/value order in TimeSerie.datapoints; Timestamp type; version 0.2.0 3 years ago
LICENSE ISC license 3 years ago remove unused options 5 months ago
css.d.ts sync_532eddbc8ad938091b1d9ec1693cec5eddfdbfc2 3 years ago
package.json 0.6.24 1 month ago
tsconfig.json rm demo from build 1 month ago
yarn.lock upd deps && remove demo 10 months ago

Chartwerk Core

Repo contains the core code of chartwerk project: abstract classes, rendering system, basic components. See ChartwerkPod to see what is parent for all chartwerk pods and get involved into development. Everything can be overwritted.

Plugin contains:

  • SVG container.
  • Series and Options models with defaults.
  • State model to control charts changes.
  • Overlay container to handle all events.
  • Zoom events controller.
  • Axes, with ticks and labels.
  • Grid, with separate behavior from axis.
  • Legend, which can hide metrics.
  • Crosshair.


const pod = new ChartwerkPod(


Series is a list of metrics with datapoints and specific config working for each serie. series = Serie[]

  • datapoints - metric data for rendering.
datapoints = [number, number][]; // 0 index for X, 1 index for Y 
  • target - id of metric. Required param, should be unique.
target: string;


Options is a config working for whole chart and metrics. All options are optional.

  • margin — chart container positioning;
margin = {
  top: number,
  right: number,
  bottom: number,
  left: number,
  • colors: array of metrics colors (should be equal or greater than series length);
['red', 'blue', 'green']
  • labelFormat: labels for axes.
  xAxis: string;
  yAxis: string;

for example:

  xAxis: 'Time';
  yAxis: 'Value';
  • bounds: specify which metrics should be rendered as confidence. (TODO: move to @chartwerk/line-chart) $__metric_name macro can be used here. It will be replaced with each metric's name to find it's bound.
  upper: string;
  lower: string;

for example: metric names: 'serie', 'serie upper_bound', 'serie lower_bound'

  upper: '$__metric_name upper_bound';
  lower: '$__metric_name lower_bound';

'serie upper_bound', 'serie lower_bound' metrics will be rendered as serie metric confidence;

  • timeRange: time range in timestamps
  from: number;
  to: number;

for example:

  from: 1582770000000;
  to: 1582810000000;
  • eventsCallbacks: event callbacks
  zoomIn: (range: [number, number]) => void,
  zoomOut: (center: number) => void,
  mouseMove: (evt: any) => void,
  mouseOut: () => void,
  onLegendClick: (idx: number) => void