Simple Modular JavaScript Chart Library – Billboard.js

Category: Chart & Graph , Javascript , Recommended | May 18, 2023
0 Comment
Demo Download
Author:naver
Views Total:26 views
Official Page:Go to website
Last Update:May 18, 2023
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.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

See Also:

You Might Be Interested In:

Leave a Reply