billboard.js
Version:
Re-usable easy interface JavaScript chart library, based on D3 v4+
62 lines (61 loc) • 2.43 kB
text/typescript
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
/**
* area config options
*/
export default {
/**
* Set area options
* @name area
* @memberof Options
* @type {object}
* @property {object} area Area object
* @property {boolean} [area.zerobased=true] Set if min or max value will be 0 on area chart.
* @property {boolean} [area.above=false] Set background area above the data chart line.
* @property {boolean|object} [area.linearGradient=false] Set the linear gradient on area.<br><br>
* Or customize by giving below object value:
* - x {Array}: `x1`, `x2` value
* - y {Array}: `y1`, `y2` value
* - stops {Array}: Each item should be having `[offset, stop-color, stop-opacity]` values.
* @see [MDN's <linearGradient>](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient), [<stop>](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop)
* @see [Demo](https://naver.github.io/billboard.js/demo/#Chart.AreaChart)
* @see [Demo: above](https://naver.github.io/billboard.js/demo/#AreaChartOptions.Above)
* @see [Demo: linearGradient](https://naver.github.io/billboard.js/demo/#AreaChartOptions.LinearGradient)
* @example
* area: {
* zerobased: false,
* above: true,
*
* // will generate follwing 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],
* ]
* }
* }
*/
area_zerobased: true,
area_above: false,
area_linearGradient: <
boolean|{x?: number[]; y?: number[]; stops?: [number, string|Function|null, number]}
> false
};