Simple Modular JavaScript Chart Library - Billboard.js

Demo Download

Author:	naver
Views Total:	3,104 views
Official Page:	Go to website
Last Update:	April 22, 2025
License:	MIT

Preview:

Simple Modular JavaScript Chart Library – Billboard.js

Description:

Billboard.js is a simple, reusable, customizable, modular, flexible JavaScript chart library based on the famous D3.js library.

Supported chart types:

Line Chart
Timeseries Chart
Spline Chart
Simple XYLine Chart
Multiple XYLine Chart
Line Chart With Regions
Step Chart
Area Chart
StackedArea Chart
Bar Chart
StackedBar Chart
ScatterPlot
Pie Chart
Donut Chart
Gauge Chart
Combination Chart
More…

Install it via package managers:

# Yarn
yarn add billboard.js
# NPM
$ npm install billboard.js

How to use it:

Load the necessary d3.js and the Billboard.js library’s JavaScript & CSS files in the html document.

<script src="//d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="billboard.css">
<script src="billboard.js"></script>

Create a DIV element in which you want to generate the chart.

<div id="chart"></div>

Create a new instance and define your own data to be plotted in the chart.

var myChart = bb.generate({
    bindto: "#chart",
    data: {
      // data here
    }
});

All possible plugin options.

/**
* bindto The CSS selector or the element which the chart will be set to. D3 selection object can be specified. If other chart is set already, it will be replaced with the new one (only one chart can be set in one element).<br><br>
* If this option is not specified, the chart will be generated but not be set. Instead, we can access the element by chart.element and set it by ourselves.<br>
* > <b>NOTE:</b> When chart is not binded, bb starts observing if chart.element is binded by MutationObserver. In this case, polyfill is required in IE9 and IE10 becuase they do not support MutationObserver. On the other hand, if chart always will be binded, polyfill will not be required because MutationObserver will never be called.
* @name bindto
* @memberof Options
* @type {String}
* @default #chart
* @example
* bindto: "#myContainer"
*
* // or element
* bindto: document.getElementById("myContainer")
*
* // or D3 selection object
* bindto: d3.select("#myContainer")
*/
bindto: "#chart",
/**
* Set svg element's class name
* @name svg
* @memberof Options
* @type {Object}
* @property {String} [svg.classname] class name for svg element
* @example
* svg: {
*   classname: "test_class"
* }
*/
svg_classname: undefined,
/**
* The desired size of the chart element.
* If value is not specified, the width of the chart will be calculated by the size of the parent element it's appended to.
* @name size
* @memberof Options
* @type {Object}
* @property {Number} [size.width] width of the chart element
* @property {Number} [size.height] height of the chart element
* @example
* size: {
*   width: 640,
*   height: 480
* }
*/
size_width: undefined,
size_height: undefined,
/**
* The padding of the chart element.
* @name padding
* @memberof Options
* @type {Object}
* @property {Number} [padding.top] padding on the top of chart
* @property {Number} [padding.right] padding on the right of chart
* @property {Number} [padding.bottom] padding on the bottom of chart
* @property {Number} [padding.left] padding on the left of chart
* @example
* padding: {
*   top: 20,
*   right: 20,
*   bottom: 20,
*   left: 20
* }
*/
padding_left: undefined,
padding_right: undefined,
padding_top: undefined,
padding_bottom: undefined,
/**
* Set chart resize options
* @name resize
* @memberof Options
* @type {Object}
* @property {Boolean} [resize.auto=true] Set chart resize automatically on viewport changes.
* @example
*  resize: {
*      auto: false
*  }
*/
resize_auto: !0,
/**
* Set zoom options
* @name zoom
* @memberof Options
* @type {Object}
* @property {Boolean} [zoom.enabled=false] Enable zooming.
* @property {Boolean} [zoom.rescale=false] Enable to rescale after zooming.<br>
*  If true set, y domain will be updated according to the zoomed region.
* @property {Array} [zoom.extent=[1, 10]] Change zoom extent.
* @property {Function} [zoom.onzoom=function(){}] Set callback that is called when the chart is zooming.<br>
*  Specified function receives the zoomed domain.
* @property {Function} [zoom.onzoomstart=function(){}] Set callback that is called when zooming starts.<br>
*  Specified function receives the zoom event.
* @property {Function} [zoom.onzoomend=function(){}] Set callback that is called when zooming ends.<br>
*  Specified function receives the zoomed domain.
* @example
*  zoom: {
*      enabled: true,
*      rescale: true,
*      extent: [1, 100]  // enable more zooming
*      onzoom: function(domain) { ... },
*      onzoomstart: function(event) { ... },
*      onzoomend: function(domain) { ... }
*  }
*/
zoom_enabled: !1,
zoom_extent: undefined,
zoom_privileged: !1,
zoom_rescale: !1,
zoom_onzoom: function zoom_onzoom() {},
zoom_onzoomstart: function zoom_onzoomstart() {},
zoom_onzoomend: function zoom_onzoomend() {},
zoom_x_min: undefined,
zoom_x_max: undefined,
/**
* Interaction options
* @name interaction
* @memberof Options
* @type {Object}
* @property {Boolean} [interaction.enabled=true] Indicate if the chart should have interactions.<br>
*     If `false` is set, all of interactions (showing/hiding tooltip, selection, mouse events, etc) will be disabled.
* @property {Boolean} [interaction.brighten=true]
* @property {Boolean} [interaction.inputType.mouse=true] enable or disable mouse interaction
* @property {Boolean} [interaction.inputType.touch=true] enable or disable  touch interaction
* @example
* interaction: {
*    enabled: false,
*    inputType: {
*        mouse: true,
*        touch: false
*    }
* }
*/
interaction_brighten: !0,
interaction_enabled: !0,
interaction_inputType_mouse: !0,
interaction_inputType_touch: !0,
/**
* Set a callback to execute when mouse/touch enters the chart.
* @name onover
* @memberof Options
* @type {Function}
* @default function(){}
* @example
* onover: function() {
*   ...
* }
*/
onover: function onover() {},
/**
* Set a callback to execute when mouse/touch leaves the chart.
* @name onout
* @memberof Options
* @type {Function}
* @default function(){}
* @example
* onout: function() {
*   ...
* }
*/
onout: function onout() {},
/**
* Set a callback to execute when user resizes the screen.
* @name onresize
* @memberof Options
* @type {Function}
* @default function(){}
* @example
* onresize: function() {
*   ...
* }
*/
onresize: function onresize() {},
/**
* SSet a callback to execute when screen resize finished.
* @name onresized
* @memberof Options
* @type {Function}
* @default function(){}
* @example
* onresized: function() {
*   ...
* }
*/
onresized: function onresized() {},
/**
* Set a callback to execute when the chart is initialized.
* @name oninit
* @memberof Options
* @type {Function}
* @default function(){}
* @example
* oninit: function() {
*   ...
* }
*/
oninit: function oninit() {},
/**
* Set a callback which is executed when the chart is rendered. Basically, this callback will be called in each time when the chart is redrawed.
* @name onrendered
* @memberof Options
* @type {Function}
* @default function(){}
* @example
* onrendered: function() {
*   ...
* }
*/
onrendered: function onrendered() {},
/**
* Set duration of transition (in milliseconds) for chart animation.<br><br>
* <b>NOTE:</b>If `0 `or `null` set, transition will be skipped. So, this makes initial rendering faster especially in case you have a lot of data.
* @name transition
* @memberof Options
* @type {Object}
* @property {Number} [transition.duration=350] duration in milliseconds
* @example
* transition: {
*  duration: 500
* }
*/
transition_duration: 350,
/**
* Specify the key of x values in the data.<br><br>
* We can show the data with non-index x values by this option. This option is required when the type of x axis is timeseries. If this option is set on category axis, the values of the data on the key will be used for category names.
* @name data:x
* @memberof Options
* @type {String}
* @default undefined
* @example
* data: {
*   x: "date"
* }
*/
data_x: undefined,
/**
* 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 to parse string specifed as x.
* @name data:xFormat
* @memberof Options
* @type {String}
* @default %Y-%m-%d
* @example
* data: {
*   xFormat: "%Y-%m-%d %H:%M:%S"
* }
* @see [D3's time specifier](https://npm.runkit.com/d3-time-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: !0,
/**
* Sort on x axis.
* @name data:xSort
* @memberof Options
* @type {Boolean}
* @default true
* @example
* data: {
*   xSort: false
* }
*/
data_xSort: !0,
data_idConverter: function data_idConverter(id) {
  return id;
},
/**
* Set custom data name.
* @name data:names
* @memberof Options
* @type {Object}
* @default {}
* @example
* data: {
*   names: {
*     data1: "Data Name 1",
*     data2: "Data Name 2"
*   }
* }
*/
data_names: {},
/**
* Set custom data class.<br><br>
* If this option is specified, the element g for the data has an additional class that has the prefix 'bb-target-' (eg. bb-target-additional-data1-class).
* @name data:classes
* @memberof Options
* @type {Object}
* @default {}
* @example
* data: {
*   classes: {
*     data1: "additional-data1-class",
*     data2: "additional-data2-class"
*   }
* }
*/
data_classes: {},
/**
* Set groups for the data for stacking.
* @name data:groups
* @memberof Options
* @type {Array}
* @default []
* @example
* data: {
*   groups: [
*     ["data1", "data2"],
*     ["data3"]
*   ]
* }
*/
data_groups: [],
/**
* Set y axis the data related to. y and y2 can be used.
* @name data:axes
* @memberof Options
* @type {Object}
* @default {}
* @example
* data: {
* axes: {
*     data1: "y",
*     data2: "y2"
*   }
* }
*/
data_axes: {},
/**
* Set chart type at once.<br><br>
* If this option is specified, the type will be applied to every data. This setting can be overwritten by data.types.<br><br>
* <b>Available Values:</b>
* - line
* - spline
* - step
* - area
* - area-spline
* - area-step
* - bar
* - scatter
* - pie
* - donut
* - gauge
* @name data:type
* @memberof Options
* @type {String}
* @default line
* @example
* data: {
*  type: "bar"
* }
*/
data_type: undefined,
/**
* Set chart type for each data.<br>
* This setting overwrites data.type setting.
* @name data:types
* @memberof Options
* @type {Object}
* @default {}
* @example
* data: {
*   types: {
*     data1: "bar",
*     data2: "spline"
*   }
* }
*/
data_types: {},
/**
* Show labels on each data points.
* @name data:labels
* @memberof Options
* @type {Boolean}
* @default false
* @example
* data: {
*   labels: true
* }
*/
/**
* Set formatter function for data labels.<br>
* The formatter function receives 4 arguments such as v, id, i, j and it must return a string that will be shown as the label. The arguments are:<br>
*  - `v` is the value of the data point where the label is shown.
*  - `id` is the id of the data where the label is shown.
*  - `i` is the index of the data point where the label is shown.
*  - `j` is the sub index of the data point where the label is shown.<br><br>
* Formatter function can be defined for each data by specifying as an object and D3 formatter function can be set (ex. d3.format('$'))
* @name data:labels:format
* @memberof Options
* @type {Object}
* @default {}
* @example
* data: {
*   labels: {
*     format: function(v, id, i, j) { ... }
*     // it's possible to set for each data
*     //format: {
*     //    data1: function(v, id, i, j) { ... },
*     //    ...
*     //}
*   }
* }
*/
data_labels: {},
/**
*  This option changes the order of stacking the data and pieces of pie/donut. If `null` specified, it will be the order the data loaded. If function specified, it will be used to sort the data and it will recieve the data as argument.<br><br>
*  <b>Available Values:</b>
*  - desc
*  - asc
*  - function(data1, data2) { ... }
*  - null
* @name data:order
* @memberof Options
* @type {String|Function}
* @default desc
* @example
* data: {
*   lorder: "asc"
* }
*/
data_order: "desc",
/**
* Define regions for each data.<br><br>
* The values must be an array for each data and it should include an object that has start, end, style. If start is not set, the start will be the first data point. If end is not set, the end will be the last data point.<br>
* Currently this option supports only line chart and dashed style. If this option specified, the line will be dashed only in the regions.
* @name data:regions
* @memberof Options
* @type {Object}
* @default {}
* @example
* data: {
*   regions: {
*     data1: [{
*         "start": 1,
*         "end": 2,
*         "style": "dashed"
*     }, {
*         "start":3
*     }],
*     ...
*   }
* }
*/
data_regions: {},
/**
* Set color converter function.<br><br>
* This option should a function and the specified function receives color (e.g. '#ff0000') and d that has data parameters like id, value, index, etc. And it must return a string that represents color (e.g. '#00ff00').
* @name data:color
* @memberof Options
* @type {Function}
* @default undefined
* @example
* data: {
*   color: function(color, d) { ... }
* }
*/
data_color: undefined,
/**
* Set color for each data.
* @name data:colors
* @memberof Options
* @type {Object}
* @default {}
* @example
* data: {
*   colors: {
*     data1: "#ff0000",
*     ...
*   }
* }
*/
data_colors: {},
/**
* Hide each data when the chart appears.<br><br>
* If true specified, all of data will be hidden. If multiple ids specified as an array, those will be hidden.
* @name data:hide
* @memberof Options
* @type {Boolean|Array}
* @default false
* @example
* data: {
*   // all of data will be hidden
*   hide: true
*   // specified data will be hidden
*   hide: ["data1", ...]
* }
*/
data_hide: !1,
data_filter: undefined,
/**
* Set data selection enabled.<br><br>
* If this option is set true, we can select the data points and get/set its state of selection by API (e.g. select, unselect, selected).
* @name data:selection:enabled
* @memberof Options
* @type {Boolean}
* @default false
* @example
* data: {
*     selection: {
*       enabled: true
*   }
* }
*/
data_selection_enabled: !1,
/**
* Set grouped selection enabled.<br><br>
* If this option set true, multiple data points that have same x value will be selected by one selection.
* @name data:selection:grouped
* @memberof Options
* @type {Boolean}
* @default false
* @example
* data: {
*     selection: {
*       grouped: true
*   }
* }
*/
data_selection_grouped: !1,
/**
* Set a callback for each data point to determine if it's selectable or not.<br><br>
* The callback will receive d as an argument and it has some parameters like id, value, index. This callback should return boolean.
* @name data:selection:isselectable
* @memberof Options
* @type {Function}
* @default function() { return true; }
* @example
* data: {
*     selection: {
*       isselectable: function(d) { ... }
*   }
* }
*/
data_selection_isselectable: function data_selection_isselectable() {
  return !0;
},
/**
* Set multiple data points selection enabled.<br><br>
* If this option set true, multile data points can have the selected state at the same time. If false set, only one data point can have the selected state and the others will be unselected when the new data point is selected.
* @name data:selection:multiple
* @memberof Options
* @type {Boolean}
* @default true
* @example
* data: {
*     selection: {
*       multiple: false
*   }
* }
*/
data_selection_multiple: !0,
/**
* Enable to select data points by dragging.<br><br>
* If this option set true, data points can be selected by dragging.
* <b>Note:</b> If this option set true, scrolling on the chart will be disabled because dragging event will handle the event.
* @name data:selection:draggable
* @memberof Options
* @type {Boolean}
* @default false
* @example
* data: {
*     selection: {
*       draggable: true
*   }
* }
*/
data_selection_draggable: !1,
/**
* Set a callback for click event on each data point.<br><br>
* This callback will be called when each data point clicked and will receive d and element as the arguments. d is the data clicked and element is the element clicked. In this callback, this will be the Chart object.
* @name data:onclick
* @memberof Options
* @type {Function}
* @default function() {}
* @example
* data: {
*     onclick: function(d, element) { ... }
* }
*/
data_onclick: function data_onclick() {},
/**
* Set a callback for mouse/touch over event on each data point.<br><br>
* This callback will be called when mouse cursor or via touch moves onto each data point and will receive d as the argument. d is the data where mouse cursor moves onto. In this callback, this will be the Chart object.
* @name data:onover
* @memberof Options
* @type {Function}
* @default function() {}
* @example
* data: {
*     onover: function(d) { ... }
* }
*/
data_onover: function data_onover() {},
/**
* Set a callback for mouse/touch out event on each data point.<br><br>
* This callback will be called when mouse cursor or via touch moves out each data point and will receive d as the argument. d is the data where mouse cursor moves out. In this callback, this will be the Chart object.
* @name data:onout
* @memberof Options
* @type {Function}
* @default function() {}
* @example
* data: {
*     onout: function(d) { ... }
* }
*/
data_onout: function data_onout() {},
/**
* Set a callback for on data selection.
* @name data:onselected
* @memberof Options
* @type {Function}
* @default function() {}
* @example
* data: {
*     onselected: function(d) { ... }
* }
*/
data_onselected: function data_onselected() {},
/**
* Set a callback for on data un-selection.
* @name data:onunselected
* @memberof Options
* @type {Function}
* @default function() {}
* @example
* data: {
*     onunselected: function(d) { ... }
* }
*/
data_onunselected: function data_onunselected() {},
data_url: undefined,
data_headers: undefined,
data_json: undefined,
data_rows: undefined,
data_columns: undefined,
data_mimeType: undefined,
data_keys: undefined,
/**
* Set text displayed when empty data.
* @name data:empty:label:text
* @memberof Options
* @type {String}
* @default ""
* @example
* data: {
*   empty: {
*     label: {
*       text: "No Data"
*     }
*   }
* }
*/
data_empty_label_text: "",
/**
* Set subchart options
* @name subchart
* @memberof Options
* @type {Object}
* @property {Boolean} [subchart.show=false] Show sub chart on the bottom of the chart.
* @property {Boolean} [subchart.size.height] Change the height of the subchart.
* @property {Boolean} [subchart.onbrush] Set callback for brush event.<br>
*  Specified function receives the current zoomed x domain.
* @example
*  subchart: {
*      show: true,
*      size: {
*          height: 20
*      },
*      onbrush: function(domain) { ... }
*  }
*/
subchart_show: !1,
subchart_size_height: 60,
subchart_axis_x_show: !0,
subchart_onbrush: function subchart_onbrush() {},
/**
* Set color of the data values
* @name color
* @memberof Options
* @type {Object}
* @property {Array} [color.pattern] custom color pattern
* @property {Object} [color.threshold] color threshold
* @property {String} [color.threshold.unit] unit
* @property {Array} [color.threshold.value] value
* @property {Array} [color.threshold.max=100] max value
* @example
*  color: {
*      pattern: ["#1f77b4", "#aec7e8", ...]
*  }
*/
color_pattern: [],
color_threshold: {},
/**
* Legend options
* @name legend
* @memberof Options
* @type {Object}
* @property {Boolean} [legend.show=true] Show or hide legend.
* @property {Boolean} [legend.hide=false] Hide legend
*  If true given, all legend will be hidden. If string or array given, only the legend that has the id will be hidden.
* @property {String} [legend.position=bottom] Change the position of legend.<br>
*  Available values are: `bottom`, `right` and `inset` are supported.
*  @property {Object} [legend.inset={anchor: 'top-left',x: 10,y: 0,step: undefined}] Change inset legend attributes.<br>
*      This option accepts object that has the keys anchor, x, y and step.
*      anchor decides the position of the legend. These anchors are available:
*      - top-left
*      - top-right
*      - bottom-left
*      - bottom-right
*  x and y set the position of the legend based on the anchor.<br>
*  step defines the max step the lagend has (e.g. If 2 set and legend has 3 legend item, the legend 2 columns).
* @property {Function} [legend.item.onclick=undefined] Set click event handler to the legend item.
* @property {Function} [legend.item.onover=undefined] Set mouse/touch over event handler to the legend item.
* @property {Function} [legend.item.onout=undefined] Set mouse/touch out event handler to the legend item.
* @example
*  legend: {
*      show: true,
*      hide: true,
*      //or hide: "data1"
*      //or hide: ["data1", "data2"]
*      position: "bottom",  // bottom, right, inset
*      inset: {
*          anchor: "top-right"  // top-left, top-right, bottom-left, bottom-right
*          x: 20,
*          y: 10,
*          step: 2
*      },
*      onclick: function(id) { ... },
*      onover: function(id) { ... },
*      onout: function(id) { ... }
*  }
*/
legend_show: !0,
legend_hide: !1,
legend_position: "bottom",
legend_inset_anchor: "top-left",
legend_inset_x: 10,
legend_inset_y: 0,
legend_inset_step: undefined,
legend_item_onclick: undefined,
legend_item_onover: undefined,
legend_item_onout: undefined,
legend_equally: !1,
legend_padding: 0,
legend_item_tile_width: 10,
legend_item_tile_height: 10,
/**
* Switch x and y axis position.
* @name axis:rotated
* @memberof Options
* @type {Boolean}
* @default false
* @example
* axis: {
*   rotated: true
* }
*/
axis_rotated: !1,
/**
* Show or hide x axis.
* @name axis:x:show
* @memberof Options
* @type {Boolean}
* @default true
* @example
* axis: {
*   x: {
*     show: false
*   }
* }
*/
axis_x_show: !0,
/**
* Set type of x axis.<br><br>
* <b>Available Values:</b>
* -timeseries
* -category
* -indexed
* @name axis:x:type
* @memberof Options
* @type {String}
* @default indexed
* @example
* axis: {
*   x: {
*     type: "timeseries"
*   }
* }
*/
axis_x_type: "indexed",
/**
* Set how to treat the timezone of x values.<br>
* If true, treat x value as localtime. If false, convert to UTC internally.
* @name axis:x:localtime
* @memberof Options
* @type {Boolean}
* @default true
* @example
* axis: {
*   x: {
*     localtime: false
*   }
* }
*/
axis_x_localtime: !0,
/**
* Set category names on category axis.
* This must be an array that includes category names in string. If category names are included in the date by data.x option, this is not required.
* @name axis:x:categories
* @memberof Options
* @type {Array}
* @default []
* @example
* axis: {
*   x: {
*     categories: ["Category 1", "Category 2", ...]
*   }
* }
*/
axis_x_categories: [],
/**
* Centerise ticks on category axis.
* @name axis:x:tick:centered
* @memberof Options
* @type {Array}
* @default false
* @example
* axis: {
*   x: {
*     tick: {
*       centered: true
*     }
*   }
* }
*/
axis_x_tick_centered: !1,
/**
* A function to format tick value. Format string is also available for timeseries data.
* @name axis:x:tick:format
* @memberof Options
* @type {Function}
* @default undefined
* @example
* axis: {
*   x: {
*     tick: {
*       format: function(x) {
*           return x.getFullYear();
*       }
*     }
*   }
* }
*/
axis_x_tick_format: undefined,
/**
* Setting for culling ticks.<br><br>
* If true is set, the ticks will be culled, then only limitted tick text will be shown. This option does not hide the tick lines. If false is set, all of ticks will be shown.<br><br>
* We can change the number of ticks to be shown by axis.x.tick.culling.max.
* @name axis:x:tick:culling
* @memberof Options
* @type {Function}
* @default
* - true for indexed axis and timeseries axis
* - false for category axis
* @example
* axis: {
*   x: {
*     tick: {
*       culling: false
*     }
*   }
* }
*/
axis_x_tick_culling: {},
/**
* The number of tick texts will be adjusted to less than this value.
* @name axis:x:tick:culling:max
* @memberof Options
* @type {Number}
* @default 10
* @example
* axis: {
*   x: {
*     tick: {
*       culling: {
*           max: 5
*       }
*     }
*   }
* }
*/
axis_x_tick_culling_max: 10,
/**
* The number of x axis ticks to show.<br><br>
* This option hides tick lines together with tick text. If this option is used on timeseries axis, the ticks position will be determined precisely and not nicely positioned (e.g. it will have rough second value).
* @name axis:x:tick:count
* @memberof Options
* @type {Number}
* @default undefined
* @example
* axis: {
*   x: {
*     tick: {
*       count: 5
*     }
*   }
* }
*/
axis_x_tick_count: undefined,
/**
* Fit x axis ticks.<br><br>
* If true set, the ticks will be positioned nicely. If false set, the ticks will be positioned according to x value of the data points.
* @name axis:x:tick:fit
* @memberof Options
* @type {Boolean}
* @default true
* @example
* axis: {
*   x: {
*     tick: {
*       fit: false
*     }
*   }
* }
*/
axis_x_tick_fit: !0,
/**
* Set the x values of ticks manually.<br><br>
* If this option is provided, the position of the ticks will be determined based on those values. This option works with timeseries data and the x values will be parsed accoding to the type of the value and data.xFormat option.
* @name axis:x:tick:values
* @memberof Options
* @type {Array}
* @default null
* @example
* axis: {
*   x: {
*     tick: {
*       values: [1, 2, 4, 8, 16, 32, ...]
*     }
*   }
* }
*/
axis_x_tick_values: null,
/**
* Rotate x axis tick text.<br>
* If you set negative value, it will rotate to opposite direction.
* @name axis:x:tick:rotate
* @memberof Options
* @type {Number}
* @default 0
* @example
* axis: {
*   x: {
*     tick: {
*       rotate: 60
*     }
*   }
* }
*/
axis_x_tick_rotate: 0,
/**
* Show x axis outer tick.
* @name axis:x:tick:outer
* @memberof Options
* @type {Boolean}
* @default true
* @example
* axis: {
*   x: {
*     tick: {
*       outer: false
*     }
*   }
* }
*/
axis_x_tick_outer: !0,
/**
* Set tick text to be multiline
* @name axis:x:tick:multiline
* @memberof Options
* @type {Boolean}
* @default true
* @example
* axis: {
*   x: {
*     tick: {
*       multiline: false
*     }
*   }
* }
*/
axis_x_tick_multiline: !0,
/**
* Set tick width
* @name axis:x:tick:width
* @memberof Options
* @type {Number}
* @default null
* @example
* axis: {
*   x: {
*     tick: {
*       width: 50
*     }
*   }
* }
*/
axis_x_tick_width: null,
/**
* Set max value of x axis range.
* @name axis:x:max
* @memberof Options
* @type {Number}
* @default undefined
* @example
* axis: {
*   x: {
*     max: 100
*   }
* }
*/
axis_x_max: undefined,
/**
* Set min value of x axis range.
* @name axis:x:min
* @memberof Options
* @type {Number}
* @default undefined
* @example
* axis: {
*   x: {
*     min: -100
*   }
* }
*/
axis_x_min: undefined,
/**
* Set padding for x axis.<br><br>
* If this option is set, the range of x axis will increase/decrease according to the values. If no padding is needed in the ragen of x axis, 0 should be set. On category axis, this option will be ignored.
* @name axis:x:padding
* @memberof Options
* @type {Object}
* @default {}
* @example
* axis: {
*   x: {
*     padding: {
*       left: 0,
*       right: 0
*     }
*   }
* }
*/
axis_x_padding: {},
/**
* Set height of x axis.<br><br>
* The height of x axis can be set manually by this option. If you need more space for x axis, please use this option for that. The unit is pixel.
* @name axis:x:height
* @memberof Options
* @type {Number}
* @default undefined
* @example
* axis: {
*   x: {
*     height: 20
*   }
* }
*/
axis_x_height: undefined,
/**
* Set default extent for subchart and zoom. This can be an array or function that returns an array.
* @name axis:x:extent
* @memberof Options
* @type {Array}
* @default undefined
* @example
* axis: {
*   x: {
*     // [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner and [x1, y1] is the bottom-right corner
*     // https://github.com/d3/d3-brush/blob/master/src/brush.js#L521
*     extent: [[0, 0], [200, 60]]
*   }
* }
*/
axis_x_extent: undefined,
/**
* Set label on x axis.<br><br>
*  You can set x axis label and change its position by this option. string and object can be passed and we can change the poisiton by passing object that has position key. Available position differs according to the axis direction (vertical or horizontal). If string set, the position will be the default.
*  - If it's horizontal axis:
*    - inner-right [default]
*    - inner-center
*    - inner-left
*    - outer-right
*    - outer-center
*    - outer-left
*  - If it's vertical axis:
*    - inner-top [default]
*    - inner-middle
*    - inner-bottom
*    - outer-top
*    - outer-middle
*    - outer-bottom
* @name axis:x:label
* @memberof Options
* @type {String|Object}
* @default undefined
* @example
* axis: {
*   x: {
*     label: "Your X Axis"
*   }
* }
*
* axis: {
*   x: {
*     label: {
*        text: "Your X Axis",
*        position: "outer-center"
*     }
*   }
* }
*/
axis_x_label: {},
/**
* Show or hide y axis.
* @name axis:y:show
* @memberof Options
* @type {Boolean}
* @default true
* @example
* axis: {
*   y: {
*     show: false
*   }
* }
*/
axis_y_show: !0,
/**
* Set type of y axis.
* <b>Available Values:</b>
* -timeseries
* -category
* -indexed
* @name axis:y:type
* @memberof Options
* @type {String}
* @default undefined
* @example
* axis: {
*   y: {
*     type: "timeseries"
*   }
* }
*/
axis_y_type: undefined,
/**
* Set max value of y axis.
* <b>Note:</b> Padding will be added based on this value, so if you don't need the padding, please set axis.y.padding to disable it (e.g. axis.y.padding = 0).
* @name axis:y:max
* @memberof Options
* @type {Number}
* @default undefined
* @example
* axis: {
*   y: {
*     max: 1000
*   }
* }
*/
axis_y_max: undefined,
/**
* Set min value of y axis.
* <b>Note:</b> Padding will be added based on this value, so if you don't need the padding, please set axis.y.padding to disable it (e.g. axis.y.padding = 0).
* @name axis:y:min
* @memberof Options
* @type {Number}
* @default undefined
* @example
* axis: {
*   y: {
*     min: 1000
*   }
* }
*/
axis_y_min: undefined,
/**
* Change the direction of y axis.<br><br>
* If true set, the direction will be from the top to the bottom.
* @name axis:y:inverted
* @memberof Options
* @type {Boolean}
* @default false
* @example
* axis: {
*   y: {
*     inverted: true
*   }
* }
*/
axis_y_inverted: !1,
/**
* Set center value of y axis.
* @name axis:y:center
* @memberof Options
* @type {Number}
* @default undefined
* @example
* axis: {
*   y: {
*     center: 0
*   }
* }
*/
axis_y_center: undefined,
/**
* Show y axis inside of the chart.
* @name axis:y:inner
* @memberof Options
* @type {Boolean}
* @default false
* @example
* axis: {
*   y: {
*     inner: true
*   }
* }
*/
axis_y_inner: !1,
/**
* Set label on y axis.<br><br>
* You can set y axis label and change its position by this option. This option works in the same way as axis.x.label.
* @name axis:y:label
* @memberof Options
* @type {String|Object}
* @default {}
* @example
* axis: {
*   y: {
*     label: "Your Y Axis"
*   }
* }
*
* axis: {
*   y: {
*     label: {
*        text: "Your Y Axis",
*        position: "outer-middle"
*     }
*   }
* }
*/
axis_y_label: {},
/**
* Set formatter for y axis tick text.<br><br>
* This option accepts d3.format object as well as a function you define.
* @name axis:y:format
* @memberof Options
* @type {Function}
* @default undefined
* @example
* axis: {
*   x: {
*     tick: {
*       format: function(x) {
*           return x.getFullYear();
*       }
*     }
*   }
* }
*/
axis_y_tick_format: undefined,
/**
* Show y axis outer tick.
* @name axis:y:tick:outer
* @memberof Options
* @type {Boolean}
* @default true
* @example
* axis: {
*   y: {
*     tick: {
*       outer: false
*     }
*   }
* }
*/
axis_y_tick_outer: !0,
/**
* Set y axis tick values manually.
* @name axis:y:tick:values
* @memberof Options
* @type {Array}
* @default null
* @example
* axis: {
*   y: {
*     tick: {
*       values: [100, 1000, 10000]
*     }
*   }
* }
*/
axis_y_tick_values: null,
axis_y_tick_rotate: 0,
/**
* Set the number of y axis ticks.<br><br>
* <b>Note:</b> The position of the ticks will be calculated precisely, so the values on the ticks will not be rounded nicely. In the case, axis.y.tick.format or axis.y.tick.values will be helpful.
* @name axis:y:tick:count
* @memberof Options
* @type {Number}
* @default undefined
* @example
* axis: {
*   y: {
*     tick: {
*       count: 5
*     }
*   }
* }
*/
axis_y_tick_count: undefined,
/**
* Set the number of y axis ticks.<br><br>
* <b>Note:</b> The position of the ticks will be calculated precisely, so the values on the ticks will not be rounded nicely. In the case, axis.y.tick.format or axis.y.tick.values will be helpful.
* @name axis:y:tick:time
* @memberof Options
* @private
* @type {Object}
* @property {Function} [time.value] D3's time interval function (https://github.com/d3/d3-time#intervals)
* @example
* axis: {
*   y: {
*     tick: {
*       time: {
*          // ticks at 15-minute intervals
*          // https://github.com/d3/d3-scale/blob/master/README.md#time_ticks
*          value: d3.timeMinute.every(15)
*       }
*     }
*   }
* }
*/
// @TODO: not fully implemented yet
axis_y_tick_time_value: undefined,
/**
* Set padding for y axis.<br><br>
* You can set padding for y axis to create more space on the edge of the axis. This option accepts object and it can include top and bottom. top, bottom will be treated as pixels.
* @name axis:y:padding
* @memberof Options
* @type {Object}
* @default {}
* @example
* axis: {
*   y: {
*     padding: {
*       top: 0,
*       bottom: 0
*     }
*   }
* }
*/
axis_y_padding: {},
/**
* Set default range of y axis.<br><br>
* This option set the default value for y axis when there is no data on init.
* @name axis:y:default
* @memberof Options
* @type {Array}
* @default undefined
* @example
* axis: {
*   y: {
*     default: [0, 1000]
*   }
* }
*/
axis_y_default: undefined,
/**
* Show or hide y2 axis.
* @name axis:y2:show
* @memberof Options
* @type {Array}
* @default false
* @example
* axis: {
*   y2: {
*     show: true
*   }
* }
*/
axis_y2_show: !1,
/**
* Set max value of y2 axis.
* @name axis:y2:max
* @memberof Options
* @type {Number}
* @default undefined
* @example
* axis: {
*   y2: {
*     max: 1000
*   }
* }
*/
axis_y2_max: undefined,
/**
* Set min value of y2 axis.
* @name axis:y2:min
* @memberof Options
* @type {Number}
* @default undefined
* @example
* axis: {
*   y2: {
*     min: -1000
*   }
* }
*/
axis_y2_min: undefined,
/**
* Change the direction of y2 axis.<br><br>
* If true set, the direction will be from the top to the bottom.
* @name axis:y2:inverted
* @memberof Options
* @type {Boolean}
* @default false
* @example
* axis: {
*   y2: {
*     inverted: true
*   }
* }
*/
axis_y2_inverted: !1,
/**
* Set center value of y2 axis.
* @name axis:y2:center
* @memberof Options
* @type {Number}
* @default undefined
* @example
* axis: {
*   y2: {
*     center: 0
*   }
* }
*/
axis_y2_center: undefined,
/**
* Show y2 axis inside of the chart.
* @name axis:y2:inner
* @memberof Options
* @type {Boolean}
* @default false
* @example
* axis: {
*   y2: {
*     inner: true
*   }
* }
*/
axis_y2_inner: !1,
/**
* Set label on y2 axis.<br><br>
* You can set y2 axis label and change its position by this option. This option works in the same way as axis.x.label.
* @name axis:y2:label
* @memberof Options
* @type {String|Object}
* @default {}
* @example
* axis: {
*   y2: {
*     label: "Your Y2 Axis"
*   }
* }
*
* axis: {
*   y2: {
*     label: {
*        text: "Your Y2 Axis",
*        position: "outer-middle"
*     }
*   }
* }
*/
axis_y2_label: {},
/**
* Set formatter for y2 axis tick text.<br><br>
* This option works in the same way as axis.y.format.
* @name axis:y2:tick:format
* @memberof Options
* @type {Function}
* @default undefined
* @example
* axis: {
*   y2: {
*     tick: {
*       format: d3.format("$,")
*       //or format: function(d) { return "$" + d; }
*     }
*   }
* }
*/
axis_y2_tick_format: undefined,
/**
* Show or hide y2 axis outer tick.
* @name axis:y2:tick:outer
* @memberof Options
* @type {Boolean}
* @default true
* @example
* axis: {
*   y2: {
*     tick: {
*       outer: false
*     }
*   }
* }
*/
axis_y2_tick_outer: !0,
/**
* Set y2 axis tick values manually.
* @name axis:y2:tick:values
* @memberof Options
* @type {Array}
* @default null
* @example
* axis: {
*   y2: {
*     tick: {
*       values: [100, 1000, 10000]
*     }
*   }
* }
*/
axis_y2_tick_values: null,
/**
* Set the number of y2 axis ticks.
* <b>Note:</b> This works in the same way as axis.y.tick.count.
* @name axis:y2:tick:count
* @memberof Options
* @type {Number}
* @default undefined
* @example
* axis: {
*   y2: {
*     tick: {
*       count: 5
*     }
*   }
* }
*/
axis_y2_tick_count: undefined,
/**
* Set the number of y2 axis ticks.
* <b>Note:</b> This works in the same way as axis.y.tick.count.
* @name axis:y2:padding
* @memberof Options
* @type {Number}
* @default {}
* @example
* axis: {
*   y2: {
*     padding: {
*       top: 100,
*       bottom: 100
*     }
*   }
* }
*/
axis_y2_padding: {},
/**
* Set default range of y2 axis.<br><br>
* This option set the default value for y2 axis when there is no data on init.
* @name axis:y2:default
* @memberof Options
* @type {Array}
* @default undefined
* @example
* axis: {
*   y2: {
*     default: [0, 1000]
*   }
* }
*/
axis_y2_default: undefined,
/**
* Set related options
* @name grid
* @memberof Options
* @type {Object}
* @property {Boolean} [x.show=false] Show grids along x axis.
* @property {Boolean} [x.lines=[]] Show additional grid lines along x axis.<br>
*  This option accepts array including object that has value, text, position and class. text, position and class are optional. For position, start, middle and end (default) are available.
*  If x axis is category axis, value can be category name. If x axis is timeseries axis, value can be date string, Date object and unixtime integer.
* @property {Boolean} [y.show=false] Show grids along x axis.
* @property {Boolean} [y.lines=[]] Show additional grid lines along y axis.<br>
*  This option accepts array including object that has value, text, position and class.
* @property {Boolean} [y.ticks=10]
* @property {Boolean} [focus.show=true] Show grids when focus.
* @property {Boolean} [lines.front=true]
* @default undefined
* @example
* grid: {
*   x: {
*     show: true,
*     lines: [
*       {value: 2, text: "Label on 2"},
*       {value: 5, text: "Label on 5", class: "label-5"}
*       {value: 6, text: "Label on 6", position: "start"}
*     ]
*   },
*   y: {
*     show: true,
*     lines: [
*       {value: 100, text: "Label on 100"},
*       {value: 200, text: "Label on 200", class: "label-200"}
*       {value: 300, text: "Label on 300", position: 'middle'}
*     ],
*     ticks: 5
*   },
*   focus: {
*      show: false
*   },
*   lines: {
*      front: false
*   }
* }
*/
grid_x_show: !1,
grid_x_type: "tick",
grid_x_lines: [],
grid_y_show: !1,
grid_y_lines: [],
grid_y_ticks: 10,
grid_focus_show: !0,
grid_lines_front: !0,
/**
* Set point options
* @name point
* @memberof Options
* @type {Object}
* @property {Boolean} [point.show=true] Whether to show each point in line.
* @property {Number} [point.r=2.5] The radius size of each point.
* @property {Boolean} [point.focus.expand.enabled=true] Whether to expand each point on focus.
* @property {Boolean} [point.focus.expand.r=point.r*1.75] The radius size of each point on focus.
* @property {Number} [point.select.r=point.r*4] The radius size of each point on selected.
* @example
*  point: {
*      show: false,
*      r: 5,
*      focus: {
*          expand: {
*              enabled: true,
*              r: 1
*          }
*      },
*      select: {
*          r: 3
*      }
*  }
*/
point_show: !0,
point_r: 2.5,
point_sensitivity: 10,
point_focus_expand_enabled: !0,
point_focus_expand_r: undefined,
point_select_r: undefined,
/**
* Set line options
* @name line
* @memberof Options
* @type {Object}
* @property {Boolean} [line.connectNull=false] Set if null data point will be connected or not.<br>
*  If true set, the region of null data will be connected without any data point. If false set, the region of null data will not be connected and get empty.
* @property {Boolean} [line.step_type=step] Change step type for step chart.<br>
* <b>Available values:</b>
* - step
* - step-before
* - step-after
* @example
*  line: {
*      connectNull: true,
*      step: {
*          type: "step-after"
*      }
*  }
*/
line_connectNull: !1,
line_step_type: "step",
/**
* Set bar options
* @name bar
* @memberof Options
* @type {Object}
* @property {Number} [bar.width] Change the width of bar chart.
* @property {Number} [bar.width.ratio=0.6] Change the width of bar chart by ratio.
* @property {Number} [bar.width.max]
* @property {Boolean} [bar.zerobased=true] Set if min or max value will be 0 on bar chart.
* @example
*  bar: {
*      width: 10,
*      // or
*      width: {
*          ratio: 0.2,
*          max: 200
*      },
*      zerobased: false
*  }
*/
bar_width: undefined,
bar_width_ratio: 0.6,
bar_width_max: undefined,
bar_zerobased: !0,
/**
* Set area options
* @name area
* @memberof Options
* @type {Object}
* @property {Boolean} [area.zerobased=true] Set if min or max value will be 0 on area chart.
* @property {Boolean} [area.above=false]
* @example
*  area: {
*      zerobased: false,
*      above: true
*  }
*/
area_zerobased: !0,
area_above: !1,
/**
* Set pie options
* @name pie
* @memberof Options
* @type {Object}
* @property {Boolean} [pie.label.show=true] Show or hide label on each pie piece.
* @property {Function} [pie.label.format] Set formatter for the label on each pie piece.
* @property {Number} [pie.label.threshold=0.05] Set threshold to show/hide labels.
* @property {Boolean} [pie.expand=true] Enable or disable expanding pie pieces.
* @property {Number} [pie.padAngle=0] Set padding between data.
* @example
*  pie: {
*      label: {
*          show: false,
*          format: function(value, ratio, id) {
*              return d3.format("$")(value);
*          },
*          threshold: 0.1
*      },
*      expand: false,
*      padAngle: 0.1
*  }
*/
pie_label_show: !0,
pie_label_format: undefined,
pie_label_threshold: 0.05,
pie_label_ratio: undefined,
pie_expand: {},
pie_expand_duration: 50,
pie_padAngle: 0,
/**
* Set gauge options
* @name gauge
* @memberof Options
* @type {Object}
* @property {Boolean} [gauge.fullCircle=false]
* @property {Boolean} [gauge.label.show=true] Show or hide label on gauge.
* @property {Function} [gauge.label.format] Set formatter for the label on gauge.
* @property {Boolean} [gauge.expand=true] Enable or disable expanding gauge.
* @property {Number} [gauge.expand.duration=50]
* @property {Number} [gauge.min=0] Set min value of the gauge.
* @property {Number} [gauge.max=100] Set max value of the gauge.
* @property {Number} [gauge.startingAngle=-1 * Math.PI / 2]
* @property {String} [gauge.units] Set units of the gauge.
* @property {Number} [gauge.width] Set width of gauge chart.
* @example
*  gauge: {
*      label: {
*          show: false,
*          format: function(value, ratio) {
*              return value;
*          }
*      },
*      expand: false,
*      min: -100,
*      max: 200,
*      units: "%",
*      width: 10
*  }
*/
gauge_fullCircle: !1,
gauge_label_show: !0,
gauge_label_format: undefined,
gauge_min: 0,
gauge_max: 100,
gauge_startingAngle: -1 * Math.PI / 2,
gauge_label_extents: undefined,
gauge_units: undefined,
gauge_width: undefined,
gauge_expand: {},
gauge_expand_duration: 50,
/**
* Set donut options
* @name donut
* @memberof Options
* @type {Object}
* @property {Boolean} [donut.label.show=true] Show or hide label on each donut piece.
* @property {Function} [donut.label.format] Set formatter for the label on each donut piece.
* @property {Number} [donut.label.threshold=0.05] Set threshold to show/hide labels.
* @property {Boolean} [donut.expand=true] Enable or disable expanding donut pieces.
* @property {Number} [donut.width] Set width of donut chart.
* @property {String} [donut.title=""] Set title of donut chart.
* @property {Number} [donut.padAngle=0] Set padding between data.
* @example
*  donut: {
*      label: {
*          show: false,
*          format: function(value, ratio, id) {
*              return d3.format("$")(value);
*          },
*          threshold: 0.1
*      },
*      expand: false,
*      width: 10,
*      title: "Donut Title",
*      padAngle: 0.2
*  }
*/
donut_label_show: !0,
donut_label_format: undefined,
donut_label_threshold: 0.05,
donut_label_ratio: undefined,
donut_width: undefined,
donut_title: "",
donut_expand: {},
donut_expand_duration: 50,
donut_padAngle: 0,
/**
* Set spline options
* @name spline
* @memberof Options
* @type {Object}
* @property {String} [spline.interpolation.type=cardinal]
* @example
*  spline: {
*      interpolation: {
*          type: "cardinal"
*      }
*  }
*/
spline_interpolation_type: "cardinal",
/**
* Show rectangles inside the chart.<br><br>
* This option accepts array including object that has axis, start, end and class. The keys start, end and class are optional.
* axis must be x, y or y2. start and end should be the value where regions start and end. If not specified, the edge values will be used. If timeseries x axis, date string, Date object and unixtime integer can be used. If class is set, the region element will have it as class.
* @name regions
* @memberof Options
* @type {Array}
* @default []
* @example
*  regions: [
*   {
*       axis: "x",
*       start: 1,
*       end: 4,
*       class: "region-1-4"
*   }
*  ]
*/
regions: [],
/**
* Tooltip options
* @name tooltip
* @memberof Options
* @type {Object}
* @property {Boolean} [tooltip.show=true] Show or hide tooltip.<br>
* @property {Boolean} [tooltip.grouped=true] Set if tooltip is grouped or not for the data points.
* @property {Function} [tooltip.format.title] Set format for the title of tooltip.<br>
*  Specified function receives x of the data point to show.
* @property {Function} [tooltip.format.name] Set format for the name of each data in tooltip.<br>
*  Specified function receives name, ratio, id and index of the data point to show. ratio will be undefined if the chart is not donut/pie/gauge.
* @property {Function} [tooltip.format.value] Set format for the value of each data in tooltip.<br>
*  Specified function receives name, ratio, id and index of the data point to show. ratio will be undefined if the chart is not donut/pie/gauge.
*  If undefined returned, the row of that value will be skipped.
* @property {function} [tooltip.position] Set custom position for the tooltip.<br>
*  This option can be used to modify the tooltip position by returning object that has top and left.
* @property {function} [tooltip.contents] Set custom HTML for the tooltip.<br>
*  Specified function receives data, defaultTitleFormat, defaultValueFormat and color of the data point to show. If tooltip.grouped is true, data includes multiple data points.
* @example
*  tooltip: {
*      show: true,
*      grouped: false,
*      format: {
*          title: function(x) { return "Data " + x; },
*          name: function(name, ratio, id, index) { return name; },
*          value: function(value, ratio, id, index) { return ratio; }
*      },
*      position: function(data, width, height, element) {
*          return {top: 0, left: 0}
*      },
*      contents: function(d, defaultTitleFormat, defaultValueFormat, color) {
*          return ... // formatted html as you want
*      }
*  }
*/
tooltip_show: !0,
tooltip_grouped: !0,
tooltip_format_title: undefined,
tooltip_format_name: undefined,
tooltip_format_value: undefined,
tooltip_position: undefined,
tooltip_contents: function tooltip_contents(d, defaultTitleFormat, defaultValueFormat, color) {
  return this.getTooltipContent ? this.getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color) : "";
},
tooltip_init_show: !1,
tooltip_init_x: 0,
tooltip_init_position: {
  top: "0px",
  left: "50px"
},
tooltip_onshow: function tooltip_onshow() {},
tooltip_onhide: function tooltip_onhide() {},
/**
* Set title options
* @name title
* @memberof Options
* @type {Object}
* @property {String} [title.text]
* @property {Number} [title.padding.top=0]
* @property {Number} [title.padding.right=0]
* @property {Number} [title.padding.bottom=0]
* @property {Number} [title.padding.left=0]
* @property {String} [title.position=top-center]
* @example
*  title: {
*      text: "Title Text",
*      padding: {
*          top: 10,
*          right: 10,
*          bottom: 10,
*          left: 10
*      },
*      position: "top-center"
*  }
*/
title_text: undefined,
title_padding: {
  top: 0,
  right: 0,
  bottom: 0,
  left: 0
},
title_position: "top-center"
};

Changelog:

v3.15.1 (04/22/2025)

core: Fix potential security vulnerability

v3.15.0 (03/19/2025)

region: Enhance regions accept category range
regions: Intent to ship regions.label.center
resize: Container based auto resize
bugfix

v3.14.3 (01/07/2025)

bugfixes

v3.14.2 (11/26/2024)

bugfixes

v3.14.1 (11/17/2024)

bugfixes

v3.14.0 (10/25/2024)

axis: Intent to ship axis.evalTextSize
interaction: Intent to ship interaction.onout
legend: Pass visibility state to legend item’s event callback
render: Add forced init option on lazy rendering
resize: Intent to ship resize.auto=’viewBox’
bugfixes

v3.13.0 (08/23/2024)

bar: Enhance bar width to adjust from callback
legend: Provide original data id in format callback
regions: Enhance regions rendering
shape: Intent to ship area-step-range type
bugfixes

v3.12.4 (06/13/2024)

Bugfixes

v3.12.3 (06/10/2024)

Bugfixes

v3.12.2 (05/28/2024)

funnel: Fix padding and unload

v3.12.1 (05/27/2024)

treemap: Fix generation w/non-exist node

v3.12.0 (05/26/2024)

axis: Intent to ship axis.tooltip
axis: Intent to ship axis.x.forceAsSingle
bundler: Migrate babel -> esbuild
funnel: Intent to ship funnel type
bugfixes

v3.11.3 (03/18/2024)

bugfixes

v3.11.2 (02/23/2024)

bugfixes

v3.11.1 (02/21/2024)

bugfixes

v3.11.0 (02/15/2024)

arc: Intent to ship arc.rangeText
axis: Add x.tick.text.inner option
gauge: Intent to ship gauge.enforceMinMax
gauge: Intent to ship gauge.label.ratio
legend: Itent to ship legend.format, legend.tooltip
bugfixes

v3.10.3 (11/08/2023)

api: Intent to ship subchart method

v3.10.2 (10/27/2023)

api: Intent to ship subchart method

v3.10.0 (10/25/2023)

api: Intent to ship subchart method
plugin: Add nullString option
point: Intent to ship point.radialGradient
regions: Intent to ship regions.label
theme: Add new modern theme
tooltip: Provide y position for tooltip position callback
bugfixes

v3.9.4 (09/04/2023)

tooltip: Fix error throw when tooltip.show=false is set

v3.9.3 (08/09/2023)

bugfixes

v3.9.2 (08/04/2023)

bugfixes

v3.9.1 (07/17/2023)

bugfix

v3.9.0 (07/03/2023)

arc: Intent to ship arc.needle
bar: Intent to ship bar.front
data: Intent to ship data.labels.position function
legend: Intent to ship legend.item.interaction.dblclick
legend: Intent to ship legent.item.interaction
point: Enhance point.sensitivity
theme: Intent to ship dark theme
bugfixes

v3.8.2 (05/18/2023)

Bugfixes

v3.8.1 (05/04/2023)

Bugfixes

v3.8.0 (04/13/2023)

api: Enhance resizeAfter for .load/unload APIs
axis: Intent to ship axis.x.inverted
package: extends root div interface for styling
padding: Intent to ship padding=’fit’
bugfixes

v3.7.6 (03/06/2023)

bugfixes

v3.7.4 (02/06/2023)

bugfixes

v3.7.3 (01/26/2023)

bugfixes

v3.7.2 (01/19/2023)

bugfixes

v3.7.1 (01/13/2023)

bugfixes

v3.7.0 (01/11/2023)

api: Enhance .export() to preserve fontStyle
arc: Intent to ship arc.cornerRadius
tooltip: Enhance passing ratio value for stacked area/bar
treemap: Intent to ship treemap type
bugfixes

v3.6.3 (10/28/2022)

Bug Fixes

v3.6.2 (10/26/2022)

eventrect: Fix eventReceiver coordinates

v3.6.1 (10/22/2022)

bugfixes

v3.6.0 (09/29/2022)

api: Enhance .config() to return generation options
options: Intent to ship bar.linearGradient
options: Intent to ship bar.overlap
options: Intent to ship data.groupsZeroAs
options: Intent to ship legend.item.tile.type
packages: Intent to ship React wrapper
Bugfixes

v3.5.1 (07/14/2022)

fixed bugs

v3.5.0 (06/30/2022)

fixed bugs

v3.4.1 (04/14/2022)

point,util: fix syntax to work on legacy browser

v3.4.0 (03/31/2022)

api: Implement axis range reset
option: Intent to ship onclick
polar: Intent to ship polar type
bugfixes

v3.3.3 (02/24/2022)

Bug Fixes

v3.3.2 (02/14/2022)

Bug Fixes

v3.3.1 (01/28/2022)

Bug Fixes

v3.3.0 (01/15/2022)

axis: alow user to hide tick lines while using culling
bar: add non zero based bar chart
bar: Implement stacking bar radius
bar: Intent to ship bar.indices.removeNull
option: Enhance padding to be removed completely
bugfix

v3.2.2 (11/21/2021)

Bug Fixes

v3.2.1 (10/23/2021)

Bug Fixes

v3.2.0 (10/07/2021)

Bug Fixes
all: Make consistent transition
axis: Consistent transition on axis
axis: Enhance padding to accept px value
error: Enhance error logging for ESM import
event: add option for step-before/step-after charts for tooltip to match step behavior
module: Support dual CJS/ESM package
plugin: Intent to ship sparkline
plugin: Intent to ship TableView plugin
Subchart: add subchart x axis tick format option
tooltip: Enhance tooltip.position passing curr pos

v3.1.5 (08/17/2021)

Bug Fixes

v3.1.4 (08/11/2021)

Bug Fixes

v3.1.3 (07/28/2021)

Bug Fixes

v3.1.2 (07/12/2021)

module: fix module compatibility

v3.1.1 (06/28/2021)

Fixed data: Handle spaced data name for label bg color

v3.1.0 (06/25/2021)

all: contain inline css prop setting
api: Intent to ship append load
data: Intent to ship data.onshown/onhidden
data.labels: Intent to ship data.labels.backgroundColors
subchart: Intent to ship subchart.init.range option
subchart: Intent to ship subchart.showHandle
bugfixes

v3.0.3 (04/17/2021)

Bug Fixes

v3.0.2 (03/31/2021)

Bug Fixes

v3.0.0 (03/27/2021)

candlestick: fix exporting candlestick module

v3.0.0 (03/26/2021)

All: update for d3 v6
Api: Enhance .export() option to specify size
Api: Intent to ship subchart APIs
candlestick: Intent to ship candlestick
Bug Fixes

v2.2.6 (03/11/2021)

tooltip: fix linked tooltip recursive call

v2.2.5 (03/05/2021)

Bug Fixes

v2.2.2 (03/04/2021)

legend: fix hiding via .hide()
zoom: fix x Axis tick transition during zoom

v2.2.3 (02/16/2021)

api: fix loading area-line-range
legend: legend.inset.anchor is working again

v2.2.2 (02/05/2021)

grid: fix rendering when interaction is disabled
shape: retrieve raw x scale value

v2.2.0 (01/26/2021)

api: make return values for axis.labels()
data: Intent to ship data.label multiline
data.labels.colors: Add callback support
gauge: added support for drawing gauge from ‘startingAngle’ to ‘arcLength’
gauge: Intent to ship gauge.background
pie: Intent to ship pie.outerRadius
point: Intent to ship point.opacity
bugs fixed

v2.1.4 (11/11/2020)

Bug Fixes

v2.1.3 (10/23/2020)

event: Fix handling for single x Axis data
point: fix error when data has spaced name

v2.1.2 (10/13/2020)

Bug Fixes

v2.1.1 (09/25/2020)

interaction: Fix wrong tooltip event coordinate

v2.1.0 (09/25/2020)

area: Intent to ship area.front
axis: Improve log scale to handle 0
axis: Intent to ship axis.y2.type
interaction: avoid multiple generation
plugin: Add JS Plugin class file
theme: Add new ‘datalab’ theme
Bug Fixes

v2.0.3 stable (08/07/2020)

Bug Fixes

v2.0.1 stable (07/20/2020)

types: add missing named exports

v2.0.0 stable (07/16/2020)

Bug Fixes and update

v2.0.0 next5 (06/22/2020)

Bug Fixes

v2.0.0 next3 (06/16/2020)

bar: Intent to ship bar.label.threshold
gauge: Intent to ship gauge.label.threshold

v2.0.0 next1 (06/08/2020)

Bug Fixes
Code Refactoring

1.12.11 (06/05/2020)

axis: Fix evaluating tick text size

1.12.10 (05/26/2020)

Bug Fixes

1.12.4 (04/10/2020)

Bug Fixes

1.12.3 (04/09/2020)

Bug Fixes

1.12.2 (04/06/2020)

Bug Fixes

1.12.0 stable (03/21/2020)

axis: Autorotate x axis tick texts on type “category” and “timeseries”
axis: Clone y/y2-axis domain if no data is bound to one of them
axis: Intent to ship axis.x.min/max.fit
axis: Intent to ship axis.y2.tick.rotate
axis: Intent to ship y Axes stepSize
gauge: more than one arc are possible for gauges
grid: Intent to ship grid.focus.y
line: Intent to ship bubble/line/scatter zerobased
options: Intent to ship Arc’s expand.rate
plugin: Intent to ship bubblecompare plugin
tooltip: Enhancement on callback options
zoom: Intent to ship zoom.resetButton.onclick
Bugs fixed

1.12.0 next 5 (03/11/2020)

axis: Autorotate x axis tick texts on type “category” and “timeseries”
axis: Intent to ship axis.x.min/max.fit
tooltip: Intent to ship tooltip.position.unit
bugs fixed

1.12.0 (02/06/2020)

axis: Intent to ship axis.y2.tick.rotate
gauge: more than one arc are possible for gauges
grid: Intent to ship grid.focus.y
line: Intent to ship bubble/line/scatter zerobased
options: Intent to ship Arc’s expand.rate
plugin: Intent to ship bubblecompare plugin
zoom: Intent to ship zoom.reseteButton.onclick
bugs fixed

1.11.1 (12/20/2019)

Fixed tooltip: Revert on pointer-events css prop

1.11.0-next.7 (11/21/2019)

Bugfix & update

1.11.0-next.7 (11/21/2019)

Bugfix & update

v1.11.0 (09/03/2019)

Bugfix
Added new options

v1.10.2 (08/30/2019)

interaction: Fix on eventRect rederaw
Fix the build for IE9

v1.10.2 (08/19/2019)

interaction: Fix on eventRect rederaw
text: Fix data label y position when all data are 0

v1.10.0 (08/07/2019)

axis: Intent to ship y/y2 axis culling
bubble: Intent to ship dimension
options: Pass instance arg to callbacks
radar: Intent to ship axis.text.position
bugfix

v1.9.5 (07/03/2019)

Bugfixes

v1.9.4 (07/02/2019)

Bugfixes

v1.9.4 (07/02/2019)

Bugfixes

v1.9.3 (06/28/2019)

color: Fix on color.threshold.values handling
radar: Fix radar positioning
radar: Make data points stay over radar

v1.9.1 (06/20/2019)

arc: Fix to generate arc when data is zero
line: Fix gradient with dataname starting w/no

v1.9.0 (06/13/2019)

Update and bugs fixed

v1.8.0 (04/29/2019)

Refactor.
Bugs fixed.
Add support for Stanford Diagrams

v1.7.1 (02/23/2019)

fix(legend): Fix resize for arc
fix(label): Correct newly added texts transition position
feat(bar): Intent to ship variant width
fix(line): Correct zoom with data.regions
feat(title): Intent to ship multilined title
fix(radar): Fix incorrect rendering
fix(api): Correct on exporting custom points
fix(options): Correct when bindto element not exist
fix(legend): Correct legend positioning
fix(axis): Correct axis transition
fix(data): Correct onover/out callback on touch
feat(color): Intent to ship color.onover
fix(radar): Fix data.onover/out callback
feat(arc): Enhance multiline text label

v1.6.2 (12/13/2018)

fix(zoom): Correct not firing data.onclick callback
fix(tooltip): Fix mid value showing for area-range type
fix(api): Remove cached data when .unload() is called
fix(api): Correct .x()/.xs() to work properly
feat(data): Intent to ship data.min()/max()
fix(shape): Fix normalization on hidden data
fix(shape): Fix for empty data in normalization
fix(shape): Prevent when non-existed data.hide is given
fix(arc): Correction on rendering 0 values
fix(tooltip): Fix for dynamically loaded data adding column
chore(build): Change require() to import statement
fix(Axis): Fix tick text position
fix(Axis): Fix text alignment when legend is not showing
fix(domain): Fix getting Y domain min/max value
feat(axis): Intent to ship multi Axes
fix(zoom): Maintain zoommed scale on .zoom()

v1.5.1 (09/07/2018)

fix(event): Correct on resizing all generated charts
fix(line): Correct on rotated step type
fix(interaction): Correct drag selection error
fix(tooltip): Make linked tooltip to work based on index
feat(theme): Intent to ship css theme
feat(Chart): Expose primary node elements
feat(gauge): Enhance display multiline labels
fix(api): Fix loading to maintain correct x index
feat(zoom): Add option to zoom by dragging
fix(interaction): Correct rect element sizing
feat(line): Ability to hide points for linecharts only
fix(radar): Correct on resizing
feat(radar): Intent to ship radar.direction.clockwise
feat(api): Intent to ship .config()
fix(tooltip): Correct tooltip position when is zoomed
fix(tooltip): Fix on ungrouped tooltip showing for custom shape
skip: Fix the template literal transpile error
skip: allow to set null for .config() api
fix(regions): Fix regions resizing on zoom
fix(zoom): Fix on zoom.rescale option
fix(tooltip): Enhancement for overlapped points
fix(internal): Fix on unexpected resize event firing
fix(api): Fix regions.remove() error
fix(zoom): Fix on .zoom() API

v1.4.1 (06/22/2018)

Bugfix

Simple Modular JavaScript Chart Library – Billboard.js

Preview:

Description:

Supported chart types:

Install it via package managers:

How to use it:

Changelog:

See Also:

You Might Be Interested In:

Leave a ReplyCancel reply