billboard.js

/** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */ /** * bar config options */ export default { /** * Set bar options * @name bar * @memberof Options * @type {object} * @property {object} bar Bar object * @property {boolean} [bar.front=false] Set 'bar' to be positioned over(on the top) other shapes elements. * @property {number} [bar.indices.removeNull=false] Remove nullish data on bar indices positions. * @property {number} [bar.label.threshold=0] Set threshold ratio to show/hide labels. * @property {boolean|object} [bar.linearGradient=false] Set the linear gradient on bar.<br><br> * Or customize by giving below object value: * - x {Array}: `x1`, `x2` value (default: `[0, 0]`) * - y {Array}: `y1`, `y2` value (default: `[0, 1]`) * - stops {Array}: Each item should be having `[offset, stop-color, stop-opacity]` values. * - (default: `[[0, $DATA_COLOR, 1], [1, $DATA_COLOR, 0]]`) * @property {boolean} [bar.overlap=false] Bars will be rendered at same position, which will be overlapped each other. (for non-grouped bars only) * @property {number} [bar.padding=0] The padding pixel value between each bar. * @property {number} [bar.radius] Set the radius of bar edge in pixel. * @property {number} [bar.radius.ratio] Set the radius ratio of bar edge in relative the bar's width. * @property {number} [bar.sensitivity=2] The senstivity offset value for interaction boundary. * @property {number|Function|object} [bar.width] Change the width of bar chart. * @property {number} [bar.width.ratio=0.6] Change the width of bar chart by ratio. * - **NOTE:** Criteria for ratio. * - When x ticks count is same with the data count, the baseline for ratio is the minimum interval value of x ticks. * - ex. when timeseries x values are: [2024-01-01, 2024-02-01, 2024-03-01], the minimum interval will be `2024-02-01 ~ 2024-03-01` * - if the minimum interval is 30px, then ratio=1 means 30px. * - When x ticks count is lower than the data count, the baseline will be calculated as `chart width / data count`. * - ex. when chart width is 500, data count is 5, then ratio=1 means 100px. * @property {number} [bar.width.max] The maximum width value for ratio. * @property {number} [bar.width.dataname] Change the width of bar for indicated dataset only. * @property {number} [bar.width.dataname.ratio=0.6] Change the width of bar chart by ratio. * - **NOTE:** * - Works only for non-stacked bar * @property {number} [bar.width.dataname.max] The maximum width value for ratio. * @property {boolean} [bar.zerobased=true] Set if min or max value will be 0 on bar chart. * @see [Demo: bar front](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarFront) * @see [Demo: bar indices](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarIndices) * @see [Demo: bar overlap](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarOverlap) * @see [Demo: bar padding](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarPadding) * @see [Demo: bar radius](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarRadius) * @see [Demo: bar width](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidth) * @see [Demo: bar width variant](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidthVariant) * @example * bar: { * // make bar shape to be positioned over the other shape elements * front: true, * * // remove nullish data on bar indices postions * indices: { * removeNull: true * }, * * // will generate follwing linearGradient: * // for more info: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient * // <linearGradient x1="0" x2="0" y1="0" y2="1"> * // <stop offset="0" stop-color="$DATA_COLOR" stop-opacity="1"></stop> * // <stop offset="1" stop-color="$DATA_COLOR" stop-opacity="0"></stop> * // </linearGradient> * linearGradient: true, * * // Or customized gradient * linearGradient: { * x: [0, 0], // x1, x2 attributes * y: [0, 0], // y1, y2 attributes * stops: [ * // offset, stop-color, stop-opacity * [0, "#7cb5ec", 1], * * // setting 'null' for stop-color, will set its original data color * [0.5, null, 0], * * // setting 'function' for stop-color, will pass data id as argument. * // It should return color string or null value * [1, function(id) { return id === "data1" ? "red" : "blue"; }, 0], * ] * }, * * // remove nullish da * overlap: true, * * padding: 1, * * // bar radius * radius: 10, * // or * radius: { * ratio: 0.5 * } * * label: { * // 0.1(10%) ratio value means, the minimum ratio to show text label relative to the y Axis domain range value. * // if data value is below than 0.1, text label will be hidden. * threshold: 0.1, * }, * * // will not have offset between each bar elements for interaction * sensitivity: 0, * * width: 10, * * // or specify width callback. The callback will receive width, targetsNum, maxDataCount as arguments. * // - width: chart area width * // - targetsNum: number of targets * // - maxDataCount: maximum data count among targets * width: function(width, targetsNum, maxDataCount) { * return width / (targetsNum * maxDataCount); * } * * // or specify ratio & max * width: { * ratio: 0.2, * max: 20 * }, * * // or specify width per dataset * width: { * data1: 20, * data2: { * ratio: 0.2, * max: 20 * } * }, * * zerobased: false * } */ bar_front: false, bar_indices_removeNull: false, bar_label_threshold: 0, bar_linearGradient: <boolean | { x?: [number, number], y?: [number, number], stops?: [number, string | null | Function, number] }>false, bar_overlap: false, bar_padding: 0, bar_radius: <number | {ratio: number} | undefined>undefined, bar_radius_ratio: <number | undefined>undefined, bar_sensitivity: 2, bar_width: <number | ((width: number, targetsNum: number, maxDataCount: number) => number) | { ratio?: number, max?: number } | undefined>undefined, bar_width_ratio: 0.6, bar_width_max: undefined, bar_zerobased: true };