UNPKG

billboard.js

Version:

Re-usable easy interface JavaScript chart library, based on D3 v4+

159 lines (151 loc) 4.23 kB
/** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */ import type {DataRegionsType} from "../../../../types/types"; /** * Axis based chart data config options */ export default { /** * Specify the keys of the x values for each data.<br><br> * This option can be used if we want to show the data that has different x values. * @name data․xs * @memberof Options * @type {object} * @default {} * @example * data: { * xs: { * data1: "x1", * data2: "x2" * } * } */ data_xs: {}, /** * Set a format specifier to parse string specifed as x. * @name data․xFormat * @memberof Options * @type {string} * @default %Y-%m-%d * @example * data: { * x: "x", * columns: [ * ["x", "01012019", "02012019", "03012019"], * ["data1", 30, 200, 100] * ], * // Format specifier to parse as datetime for given 'x' string value * xFormat: "%m%d%Y" * }, * axis: { * x: { * type: "timeseries" * } * } * @see [D3's time specifier](https://d3js.org/d3-time-format#locale_format) */ data_xFormat: "%Y-%m-%d", /** * Set localtime format to parse x axis. * @name data․xLocaltime * @memberof Options * @type {boolean} * @default true * @example * data: { * xLocaltime: false * } */ data_xLocaltime: true, /** * Sort on x axis. * - **NOTE:** This option works for lineish(area/line/spline/step) types only. * @name data․xSort * @memberof Options * @type {boolean} * @default true * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataXSort) * @example * data: { * xSort: false, * x: "x", * columns: [ * // The line graph will start to be drawn following the x axis sequence * // Below data, wil start drawing x=1: 200, x=2: 300, x=3: 100 * ["x", 3, 1, 2], * ["data1", 100, 200, 300] * ] * } */ data_xSort: true, /** * Set y axis the data related to. y and y2 can be used. * - **NOTE:** If all data is related to one of the axes, the domain of axis without related data will be replaced by the domain from the axis with related data * @name data․axes * @memberof Options * @type {object} * @default {} * @example * data: { * axes: { * data1: "y", * data2: "y2" * } * } */ data_axes: <{[key: string]: string}>{}, /** * Define regions for each data.<br> * The values must be an array for each data and it should include an object that has `start`, `end` and `style`. * - The object type should be as: * - start {number}: Start data point number. If not set, the start will be the first data point. * - [end] {number}: End data point number. If not set, the end will be the last data point. * - [style.dasharray="2 2"] {string}: The first number specifies a distance for the filled area, and the second a distance for the unfilled area. * - **NOTE:** * - Supports only line type. * - `start` and `end` values should be in the exact x value range. * - Dashes will be applied using `stroke-dasharray` css property when data doesn't contain nullish value(or nullish value with `line.connectNull=true` set). * - Dashes will be applied via path command when data contains nullish value. * @name data․regions * @memberof Options * @type {object} * @default {} * @example * data: { * regions: { * data1: [{ * start: 1, * end: 2, * style: { * dasharray: "5 2" * } * }, { * start: 3 * }], * ... * } * } */ data_regions: <DataRegionsType>{}, /** * Set the stacking to be normalized * - **NOTE:** * - For stacking, '[data.groups](#.data%25E2%2580%25A4groups)' option should be set * - y Axis will be set in percentage value (0 ~ 100%) * - Must have postive values * @name data․stack․normalize * @memberof Options * @type {boolean} * @default false * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataStackNormalized) * @example * data: { * stack: { * normalize: true * } * } */ data_stack_normalize: false };