Reference

API

const chartParams = {
  // ...
  // defines the data, see next sections
};
const chartConfig = {
  // ...
  // defines chart configuration, see next sections
};
// promise which resolves
let chartPromise = Plotica.createMain(params, chartConfig);

// destroy chart
chartPromise.then(function () {
  destroyMain(chartId); // promise
});

// OPTIONAL: if you want to run all the initialization code before createMain
// to minimize latency of the first call
init(); // promise

Chart params

const params = {
  // css selector of where to put the chart
  selector: "#chart-1",

  // optional content name (not used at the moment)
  contentName: "New chart",

  // one of 3 supported data types:
  //  * "date"
  //  * "datetime"
  //  * "number"
  coordType: "date",
  valueType: "number",

  // list of objects like:
  // {
  //     "name": name of a series
  //     "coords"; list of coordinates of coordType type
  //     "values": list of values of valueType type
  // }
  dataSets: [
    {
      name: "Foo",
      // all the below are valid dates
      coords: ["2020-01-01", 1577923200000, new Date("2020-01-03")],
      values: [10, "20", 30.0],
    },
  ],
};

Chart config

Tip

Should you come up with your own good looking theme (config below), please consider sharing it in a new discussion on Github.

const CONFIG = {
  version: 1,
  fontStandard: "system-ui",
  fontMonospace: "monospace",
  fontSizeSmall: 10,
  fontSizeNormal: 12,
  fontSizeLarge: 14,
  fontWidthCoeff: 0.65,
  lineWidth: 1.5,
  circleRadius: 2,
  colorGrid: [237, 237, 237], // rgb
  colorTick: [142, 142, 142],
  colorCameraGrip: [0, 0, 255, 0.15], // rgba
  colorPreviewOverlay: [0, 0, 0, 0.4],
  colorPreviewHint: [255, 255, 255, 1],
  colorTooltip: [255, 255, 255, 1],
  colorTooltipFont: [0, 0, 0, 1],

  // defines how series should be sorted (order in tooltip & legend)
  // one of:
  //  * "maxAsc"
  //  * "maxDesc"
  //  * "minAsc"
  //  * "minDesc"
  //  * "medianAsc"
  //  * "medianDesc" (preferable)
  //  * "none"
  sortDataSetsBy: "medianDesc",

  // the following 3 settings define weights of content vs preview vs legend
  // sections
  layoutContentHeight: 5,
  layoutPreviewHeight: 1,
  layoutLegendHeight: 1.5,

  // palette to be used
  colorPalette: [
    // first 5 are color-blind friendly
    [75, 216, 100],
    [254, 60, 47],
    [147, 12, 249],
    [54, 152, 224],
    [255, 221, 50],

    // same, but 1.7x darker
    [44, 127, 58],
    [149, 35, 27],
    [86, 7, 146],
    [31, 89, 131],
    [150, 130, 29],
  ],

  // long press duration in ms
  msLongPress: 500,

  // automatically switch to pseudo-log scale when charts take N-times more
  // vertical space.
  // pseudo-log scale means: log10(value - globalMinValue + 1000.0) - 3.0;
  // it allows to visualize negative numbers
  autoLogScaleThreshold: 15,

  // number of significant digits when fallen back to scientific notation:
  //  1.234e6
  expFmtSignificantDigits: 5,
};