OptChartC3 Module

class epyk.core.html.options.OptChartC3.C3(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
add_region(axis, start=None, end=None, class_css=None) → OptionsRegion

Show rectangles inside the chart.

Related Pages:

Parameters:

  • axis –

  • start –

  • end –

  • class_css –

add_region_per_series(name, start=None, end=None, class_css=None)

Related Pages:

Parameters:

  • name –

  • start –

  • end –

  • class_css –

property axis: OptionAxis
property 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).

Related Pages:

property color: OptionsColor

Add a title to the chart.

Related Pages:

property container

Return always the container DOM element.

property data: OptionsData

Related Pages:

https://c3js.org/reference.html#data-url

property element

Return always the real DOM element.

property grid
property interaction: OptionsInteraction

Configure the interaction on the chart.

Related Pages:

property legend: OptionsLegend

Set visibility of legend.

Related Pages:

property line: OptionsLine
oninit(js_funcs, profile=None)

Set a callback to execute when the chart is initialized.

https://c3js.org/reference.html#oninit

Parameters:

  • js_funcs –

  • profile –

onmouseover(js_funcs, profile=None)

Set a callback to execute when user resizes the screen.

Related Pages:

Parameters:

  • js_funcs –

  • profile –

onrendered(js_funcs, profile=None)

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.

Related Pages:

Parameters:

  • js_funcs –

  • profile –

onresized(js_funcs, profile=None)

Set a callback to execute when screen resize finished.

Related Pages:

Parameters:

  • js_funcs –

  • profile –

padding() → OptionsPadding

Change padding for the chart.

Related Pages:

property point: OptionsPoints
property render: OptionsRender

Related Pages:

https://naver.github.io/billboard.js/demo/#ChartOptions.LazyRender

size() → OptionsSize

Set chart size in px.

Related Pages:

property subchart

Show sub chart for zoom and selection range.

Related Pages:

property title: OptionsTitle

Add a title to the chart.

Related Pages:

property transition: OptionsTransition

Set duration of transition (in milliseconds) for chart animation.

Related Pages:

property zoom

Zoom by mouse wheel event and slide by drag.

Related Pages:

class epyk.core.html.options.OptChartC3.C3Area(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property area: OptionsArea

Related Pages:

https://c3js.org/reference.html#area-zerobased

class epyk.core.html.options.OptChartC3.C3Bar(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property bar: OptionsBar

Related Pages:

https://c3js.org/reference.html#bar-width

class epyk.core.html.options.OptChartC3.C3Bubble(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property bubble: OptionsBubble

Related Pages:

https://naver.github.io/billboard.js/demo/#Chart.BubbleDimensionChart

class epyk.core.html.options.OptChartC3.C3Donut(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property donut: OptionsDonut

Related Pages:

https://naver.github.io/billboard.js/demo/#DonutChartOptions.LabelRatio

class epyk.core.html.options.OptChartC3.C3Gauge(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property gauge: OptionsGauge

Related Pages:

https://naver.github.io/billboard.js/demo/#DonutChartOptions.LabelRatio

class epyk.core.html.options.OptChartC3.C3Pie(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property pie: OptionsPie

Related Pages:

https://naver.github.io/billboard.js/demo/#PieChartOptions.ExpandRate

class epyk.core.html.options.OptChartC3.C3Radar(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property direction: OptionsDirection

Related Pages:

https://naver.github.io/billboard.js/demo/#Chart.RadarChart

property level: OptionsLevel

Related Pages:

https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarAxis

property radar: OptionsRadar

Related Pages:

https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarAxis

class epyk.core.html.options.OptChartC3.C3Spline(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property spline: OptionsSpline
class epyk.core.html.options.OptChartC3.C3Stanford(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property axis: OptionAxis
property data: C3StanfordData
property grid: OptionsGrid
property point: OptionsPoints
property zoom: OptionsZoom
class epyk.core.html.options.OptChartC3.C3StanfordData(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property epochs

Related Pages:

https://naver.github.io/billboard.js/demo/#Chart.BubbleDimensionChart

class epyk.core.html.options.OptChartC3.EnumAxisTypes(options: Options, name: str, js_tree: Optional[bool] = None, page: Optional[PageModel] = None)
category(categories: Optional[list] = None)

Related Pages:

indexed()

Related Pages:

log()

Related Pages:

timeseries()

Related Pages:

class epyk.core.html.options.OptChartC3.EnumLegendPosition(options: Options, name: str, js_tree: Optional[bool] = None, page: Optional[PageModel] = None)
left()

Related Pages:

right()

Related Pages:

class epyk.core.html.options.OptChartC3.EnumStepTypes(options: Options, name: str, js_tree: Optional[bool] = None, page: Optional[PageModel] = None)
basis()

Set type of curve interpolation.

Related Pages:

basis_closed()

Set type of curve interpolation.

Related Pages:

basis_open()

Set type of curve interpolation.

Related Pages:

bundle()

Set type of curve interpolation.

Related Pages:

cardinal()

Set type of curve interpolation.

Related Pages:

cardinal_closed()

Set type of curve interpolation.

Related Pages:

cardinal_open()

Set type of curve interpolation.

Related Pages:

linear()

Set type of curve interpolation.

Related Pages:

linear_closed()

Set type of curve interpolation.

Related Pages:

monotone()

Set type of curve interpolation.

Related Pages:

step()

Set type of curve interpolation.

Related Pages:

step_after()

Related Pages:

step_before()

Related Pages:

class epyk.core.html.options.OptChartC3.EnumTextPosition(options: Options, name: str, js_tree: Optional[bool] = None, page: Optional[PageModel] = None)
middle()

Related Pages:

start()

Related Pages:

class epyk.core.html.options.OptChartC3.EnumTickFormat(options: Options, name: str, js_tree: Optional[bool] = None, page: Optional[PageModel] = None)
e_b_y()

Related Pages:

format()

Related Pages:

timestamp()

Related Pages:

yy_mm_dd()

Related Pages:

class epyk.core.html.options.Enums(options: Options, name: str, js_tree: Optional[bool] = None, page: Optional[PageModel] = None)
property item

Return the option object on which the key, value will be added.

property key

Returns the predefined enumeration key which will be added with this object.

class epyk.core.html.options.OptChartC3.OptionAxis(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property rotated

Switch x and y-axis position.

Related Pages:

property x: OptionsAxis

Related Pages:

https://c3js.org/reference.html#axis-y2-show https://c3js.org/reference.html#axis-x-show

property y: OptionsAxis

Related Pages:

https://c3js.org/reference.html#axis-y2-show

property y2: OptionsAxis

Related Pages:

https://c3js.org/reference.html#axis-y2-show

class epyk.core.html.options.OptChartC3.OptionCulling(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property max

The number of tick texts will be adjusted to less than this value.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionEpochs(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property epochs
class epyk.core.html.options.OptChartC3.OptionLines(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property css_class

Related Pages:

https://naver.github.io/billboard.js/demo/#Style.StyleForGrid

property position

Show additional grid lines along x axis.

Related Pages:

property text

Related Pages:

https://naver.github.io/billboard.js/demo/#Style.StyleForGrid

property value

Related Pages:

https://naver.github.io/billboard.js/demo/#Style.StyleForGrid

class epyk.core.html.options.OptChartC3.OptionPadding(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property bottom
class epyk.core.html.options.OptChartC3.OptionStep(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property type

Related Pages:

https://naver.github.io/billboard.js/demo/#Chart.StepChart

class epyk.core.html.options.OptChartC3.OptionTick(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property autorotate

Related Pages:

property centered

Centerise ticks on category axis.

Related Pages:

property count

Set the number of y axis ticks.

Related Pages:

property culling: OptionCulling

Setting for culling ticks.

Related Pages:

property default

This option set the default value for y axis when there is no data on init.

Related Pages:

property fit

Fit x axis ticks.

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.

Related Pages:

format(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None)

A function to format tick value. Format string is also available for timeseries data.

Related Pages:

Parameters:

  • js_funcs –

  • profile –

property multiline

Enable multiline.

If this option is set true, when a tick’s text on the x-axis is too long, it splits the text into multiple lines in order to avoid text overlapping.

Related Pages:

property multilineMax

If this option is set and is above 0, the number of lines will be adjusted to less than this value and tick’s text is ellipsified.

Related Pages:

property outer

Show x-axis outer tick.

Related Pages:

property rotate

Rotate x-axis tick text.

If you set negative value, it will rotate to opposite direction.

Related Pages:

property stepSize

Related Pages:

https://naver.github.io/billboard.js/demo/#Axis.StepSizeForYAxis

property text

Related Pages:

https://naver.github.io/billboard.js/demo/#Axis.XAxisTickPosition

property values

Set y-axis tick values manually.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionX(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property tick: OptionTick
class epyk.core.html.options.Options(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property builder

Add a JavaScript Builder function to the options.

This will be used to automatically map the Python component to its corresponding JavaScript builder function used by the build method.

Usage:

but = page.ui.button()
but.options.builder = "Button"
Prop value:

The JavaScript builder function name.

property config_default

The default value for the configuration in case of template.

Default value is an empty string.

Usage:

component.options.config_default = {"value": "test"}
config_html()

Return the HTML options used by the python and passed to the HTML.

Those options will not be available in the JavaScript layer and they are only defined either to build the HTML from Python or to set some HTML properties.

The returned dictionary is a copy so it can be changed or used in other processes. To change the internal component property, the options property should be used.

config_js(attrs: Optional[dict] = None)

Return the JavaScript options used by the builders functions.

Builder functions can be defined in the framework or external from the various packages.

The returned dictionary is a copy so it can be changed or used in other processes. To change the internal component property, the options property should be used.

Parameters:

attrs – Optional. The extra or overridden options

custom_config(name: str, value: Any, js_type: bool = False)

Add a custom JavaScript configuration.

Usage:

chart = page.ui.charts.apex.scatter()
chart.options.chart.zoom.custom_config("test", False)
Parameters:

  • name – The key to be added to the attributes

  • value – String or JString. The value of the defined attributes

  • js_type – Optional. Specify if the parameter is a JavaScript fragment

details()

Retrieve the defined properties details.

This function will return a dictionary with all the component attributes (required and optional) ones. It will provide the full available description of those components.

Usage:

but = page.ui.button()
pprint.pprint(but.options.details(), indent=4)
from_json(vals: dict, schema: Optional[dict] = None)

Load the option schema for a component from a json string.

TODO: add more feature to handle functions and enumeration

Parameters:

  • vals – The input schema

  • schema – The full object schema

has_attribute(cls_obj, name: Optional[str] = None)

Add an extra sub layer to the data structure.

The key in the object representation will be the function name.

Parameters:

  • cls_obj – Class. The sub data class used in the structure definition

  • name – The sub attribute name

isJsContent(property_name: str)

Check if the content of a property is defined to always be a JavaScript fragment.

Thus the framework will not convert it to a Json content.

Usage:

div = page.ui.div()
print(div.options.isJsContent("inline"))
Parameters:

property_name – The property name

property managed

Boolean flag to set if the component needs to be added to the page.

If set to False the component has to be managed manually in the page.

Usage:

but = page.ui.button()
but.options.managed = False
Prop bool:

Flag to specify if this component is automatically managed by the page

optional()

Return all options not added to the HTML component by default.

Those are options which will impact either the Python or the JavaScript builders.

To get the full definition of options the details method should be used.

Usage:

but = page.ui.button()
pprint.pprint(but.options.optional(), indent=4)
property profile

Boolean flag to set if extra logs need to be displayed.

This could help in debugging, default is the page verbose flag (default is false).

Usage:

but = page.ui.button()
but.options.verbose = True
Prop flag:

Flag to display / hide warning logs generated by the framework.

required()

Return all the mandatory / required options with the default values.

Those options are added by the framework to provide a default for the HTML components but they can be changed.

System options are also added to this category as they are always available in any HTML components.

To get the full definition of options the details method should be used.

Usage:

but = page.ui.button()
pprint.pprint(but.options.required(), indent=4)
set_attrs(vals: dict)

Set the object internal attributes.

Parameters:

vals – All the attributes to be added to the component

property style

Change some CSS attributes to the internal HTML component.

Related Pages:

Prop values:

The CSS attributes.

update_config(attrs: dict)

Update the option configuration.

Parameters:

attrs – The attributes to set

property verbose

Boolean flag to set if extra logs need to be displayed.

This could help in debugging, default is the page verbose flag (default is false).

Usage:

but = page.ui.button()
but.options.verbose = True
Prop flag:

Boolean. Flag to display / hide warning logs generated by the framework.

class epyk.core.html.options.OptChartC3.OptionsArea(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property zerobased

Set if min or max value will be 0 on area chart.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsAxis(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
add_lines(value, class_css=None, text=None) → OptionLines

Related Pages:

Parameters:

  • value – Number

  • class_css – String. Optional.

  • text – String. Optional.

property categories

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.

Related Pages:

property center
property extend

Set default extent for subchart and zoom. This can be an array or function that returns an array.

Related Pages:

property height

Set height of x-axis.

Related Pages:

property inverted
property label: OptionsLabel
property localtime

Set how to treat the timezone of x values.

If true, treat x value as localtime. If false, convert to UTC internally.

Related Pages:

property max

Set max value of x-axis range.

Related Pages:

property min

Set min value of x-axis range.

Related Pages:

property padding: OptionPadding

Set padding for the selected axis.

Related Pages:

property show

Show or hide x-axis.

Related Pages:

property text

OptionsText

Type:

rtype

property tick: OptionTick
property type

Set type of x-axis.

Related Pages:

property types

Set type of x-axis.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsBar(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property width

Related Pages:

https://c3js.org/reference.html#bar-width

property zerobased

Set if min or max value will be 0 on bar chart.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsBubble(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property maxR

Related Pages:

https://naver.github.io/billboard.js/demo/#Chart.BubbleDimensionChart

property minR

Related Pages:

https://naver.github.io/billboard.js/demo/#Chart.BubbleDimensionChart

class epyk.core.html.options.OptChartC3.OptionsChartSharedC3(component: HtmlModel, page: Optional[PageModel] = None)
x_format(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None)
Parameters:

  • js_funcs –

  • profile –

x_format_money(symbol: str = '', digit: int = 0, thousand_sep: str = '.', decimal_sep: str = ',', fmt: str = '%v %s', factor: Optional[float] = None, alias: str = '')
Parameters:

  • symbol –

  • digit –

  • thousand_sep –

  • decimal_sep –

  • fmt –

  • factor –

  • alias –

x_format_number(factor: float = 1, alias: Optional[str] = None, digits: int = 0, thousand_sep: str = '.')
Parameters:

  • factor –

  • alias –

  • digits –

  • thousand_sep –

x_label(value: str)

Set the label of the x-axis.

Related Pages:

Parameters:

value – The axis label

x_tick_count(num: int)
Parameters:

num –

y_format(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None)
Parameters:

  • js_funcs –

  • profile –

y_format_money(symbol: str = '', digit: int = 0, thousand_sep: str = '.', decimal_sep: str = ',', fmt: str = '%v %s', factor: Optional[float] = None, alias: str = '')
Parameters:

  • symbol –

  • digit –

  • thousand_sep –

  • decimal_sep –

  • fmt –

  • factor –

  • alias –

y_format_number(factor: float = 1, alias: Optional[str] = None, digits: int = 0, thousand_sep: str = '.')
Parameters:

  • factor –

  • alias –

  • digits –

  • thousand_sep –

y_label(value: str)

Set the label of the y-axis.

Parameters:

value – The axis label.

y_tick_count(num: int)
Parameters:

num –

class epyk.core.html.options.OptChartC3.OptionsColor(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property pattern

Set custom color pattern.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsData(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property axes

Set y-axis the data related to. y and y2 can be used.

Related Pages:

property classes

Set custom data class.

Related Pages:

color(js_funcs, profile=None)

Set color converter function.

Related Pages:

Parameters:

  • js_funcs –

  • profile –

property colors

Set color for each data.

Related Pages:

property columns

Load data from a multidimensional array, with each element containing an array consisting of a datum name and associated data values.

Related Pages:

property empty: OptionsEmpty
property groups

Set groups for the data for stacking.

Related Pages:

property hide

Hide each data when the chart appears.

If true specified, all of data will be hidden. If multiple ids specified as an array, those will be hidden.

Related Pages:

property labels

Show labels on each data points.

Related Pages:

property names

Set custom data name.

Related Pages:

onclick(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = False)

Set a callback for click event on each data point.

Related Pages:

Parameters:

  • js_funcs – The Javascript functions

  • profile – Optional. A flag to set the component performance storage

onmouseout(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = False)

Set a callback for mouseout event on each data point.

Related Pages:

Parameters:

  • js_funcs – The Javascript functions

  • profile – Optional. A flag to set the component performance storage

onmouseover(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = False)

Set a callback for mouseover event on each data point.

Related Pages:

Parameters:

  • js_funcs – The Javascript functions

  • profile – Optional. A flag to set the component performance storage

property order

Define the order of the data.

Related Pages:

property rows

Load data from a multidimensional array, with the first element containing the data names, the following containing related data in that order.

Related Pages:

property selection: OptionsSelection
property stack: OptionsStack

Related Pages:

https://c3js.org/reference.html#data-stack-normalize

property type

Set chart type at once.

Related Pages:

property types

This setting overwrites data.type setting: line, spline, step, area…

Related Pages:

property url

Load a CSV or JSON file from a URL. Note that this will not work if loading via the “file://” protocol as the most browsers will block XMLHTTPRequests.

Related Pages:

property x

Specify the key of x values in the data.

Related Pages:

property xFormat

Set a format to parse string specified as x.

Related Pages:

property xs

Specify the keys of the x values for each data.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsDirection(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property clockwise

Related Pages:

https://naver.github.io/billboard.js/demo/#Chart.RadarChart

class epyk.core.html.options.OptChartC3.OptionsDonut(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property label: OptionsDonutLabel
property padAngle

Related Pages:

https://naver.github.io/billboard.js/demo/#DonutChartOptions.padAngle

property startingAngle

Related Pages:

https://naver.github.io/billboard.js/demo/#DonutChartOptions.StartingAngle

property title

Set title of donut chart.

Related Pages:

property width

Set width of donut chart.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsDonutLabel(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property ratio

Related Pages:

https://naver.github.io/billboard.js/demo/#DonutChartOptions.LabelRatio

class epyk.core.html.options.OptChartC3.OptionsEmpty(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property label: OptionsLabel

Set text displayed when empty data.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsGauge(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property label: OptionsDonutLabel
property max

Set max value of the gauge.

Related Pages:

property min

Set min value of the gauge.

Related Pages:

property units

Set width of donut chart.

Related Pages:

property width

Set width of donut chart.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsGrid(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property x: OptionsGridAxis

Property to the grid x axis.

property y: OptionsGridAxis

Property to the grid y axis.

class epyk.core.html.options.OptChartC3.OptionsGridAxis(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
add_lines(value, css_class=None, text=None, position=None) → OptionLines

Add lines to the chart.

Related Pages:

Parameters:

  • value – Number. The coordinate for the line.

  • css_class – String. Optional. The CSS class reference.

  • text – String. Optional. The label on the line.

  • position – String. Optional.

Return type:

OptionLines

property show

Show grids along x axis.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsInteraction(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property enabled

Indicate if the chart should have interactions.

If false is set, all of interactions (showing/hiding tooltip, selection, mouse events, etc) will be disabled.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsLabel(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
format(js_funcs, profile=None)

Set formatter for the label on each donut piece.

Related Pages:

Parameters:

  • js_funcs –

  • profile –

property position
property text
class epyk.core.html.options.OptChartC3.OptionsLegend(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property hide

Show or hide legend.

Related Pages:

property inset

Change inset legend attributes.

This option accepts object that has the keys anchor, x, y and step.

anchor decides the position of the legend. These anchors are available.

Related Pages:

property position

Change the position of legend.

Currently bottom, right and inset are supported.

Related Pages:

property positions: EnumLegendPosition

return:

property show

Show or hide legend.

Related Pages:

property usePoint

Return the point definition to the legend.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsLevel(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property depth

Related Pages:

https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarLevel

property show

Related Pages:

https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarLevel

class epyk.core.html.options.OptChartC3.OptionsLine(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property classes

Related Pages:

https://naver.github.io/billboard.js/demo/#Style.StyleForLines

property connectNull

Set if null data point will be connected or not.

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.

Related Pages:

property step: OptionStep

Related Pages:

https://naver.github.io/billboard.js/demo/#Chart.StepChart

class epyk.core.html.options.OptChartC3.OptionsPadding(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property bottom

Change padding for the chart.

Related Pages:

property left

Change padding for the chart.

Related Pages:

property right

Change padding for the chart.

Related Pages:

property top

The padding on the top of the chart.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsPie(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property expand: OptionsPieExpand

Related Pages:

https://naver.github.io/billboard.js/demo/#PieChartOptions.ExpandRate

property innerRadius

Related Pages:

https://naver.github.io/billboard.js/demo/#PieChartOptions.InnerRadius

property label: OptionsPieLabel

Related Pages:

https://naver.github.io/billboard.js/demo/#PieChartOptions.LabelRatio

property outerRadius

Related Pages:

https://naver.github.io/billboard.js/demo/#PieChartOptions.OuterRadius

property padAngle

Related Pages:

https://naver.github.io/billboard.js/demo/#PieChartOptions.PadAngle https://c3js.org/reference.html#pie-padAngle

property padding

Related Pages:

https://naver.github.io/billboard.js/demo/#PieChartOptions.Padding

property startingAngle

Related Pages:

https://naver.github.io/billboard.js/demo/#PieChartOptions.StartingAngle

class epyk.core.html.options.OptChartC3.OptionsPieExpand(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property rate

Related Pages:

https://naver.github.io/billboard.js/demo/#PieChartOptions.ExpandRate

class epyk.core.html.options.OptChartC3.OptionsPieLabel(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property ratio

Related Pages:

https://naver.github.io/billboard.js/demo/#PieChartOptions.LabelRatio

property show

Show or hide label on each pie piece.

Related Pages:

property threshold

Set threshold to show/hide labels.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsPoints(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property focus
property pattern

Related Pages:

https://naver.github.io/billboard.js/demo/#Point.CombinationPoints

property r

The radius size of each point.

Related Pages:

property select
property show

Whether to show each point in line.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsPosition(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property x
property y
class epyk.core.html.options.OptChartC3.OptionsRadar(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
axis() → OptionsAxis

Related Pages:

property size: OptionsSize

Related Pages:

https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarSize

class epyk.core.html.options.OptChartC3.OptionsRegion(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
class epyk.core.html.options.OptChartC3.OptionsRender(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property lazy

Related Pages:

https://naver.github.io/billboard.js/demo/#ChartOptions.LazyRender

property observe

Related Pages:

https://naver.github.io/billboard.js/demo/#ChartOptions.LazyRender

class epyk.core.html.options.OptChartC3.OptionsSelection(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property draggable

Enable to select data points by dragging.

If this option set true, data points can be selected by dragging.

Related Pages:

property enabled

Set data selection enabled.

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).

Related Pages:

property grouped

Set grouped selection enabled.

If this option set true, multiple data points that have same x value will be selected by one selection.

Related Pages:

isselectable(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None)

Set a callback for each data point to determine if it’s selectable or not.

Related Pages:

property multiple

Set multiple data points selection enabled.

If this option set true, multiple 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.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsSize(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property height

The desired height of the chart element.

If this option is not specified, the height of the chart will be calculated by the size of the parent element it’s appended to.

Related Pages:

property width

The desired width of the chart element.

If this option is not specified, the width of the chart will be calculated by the size of the parent element it’s appended to.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsSpline(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property interpolation: OptionStep
class epyk.core.html.options.OptChartC3.OptionsStack(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property normalize

Set the stacking to be normalized.

For stacking, the data.groups option should be set and have positive values. The yAxis will be set in percentage value (0 ~ 100%).

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsSubchart(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property axis: OptionsGrid
property show

Show sub chart on the bottom of the chart.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsText(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property position: OptionsPosition

Related Pages:

https://naver.github.io/billboard.js/demo/#Axis.XAxisTickPosition

property show
class epyk.core.html.options.OptChartC3.OptionsTitle(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property text
class epyk.core.html.options.OptChartC3.OptionsTooltip(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property contents

Set custom HTML for the tooltip.

Specified function receives data, defaultTitleFormat, defaultValueFormat and color of the data point to show. If tooltip.grouped is true, data includes multiple data points.

Related Pages:

property grouped

Set if tooltip is grouped or not for the data points.

Related Pages:

property horizontal

Show the tooltips based on the horizontal position of the mouse.

Related Pages:

property position

Set custom position for the tooltip.

This option can be used to modify the tooltip position by returning object that has top and left.

Related Pages:

property show

Show or hide tooltip.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsTransition(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property duration

Set duration of transition (in milliseconds) for chart animation.

Related Pages:

class epyk.core.html.options.OptChartC3.OptionsZoom(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property enabled

Enable zooming.

Related Pages:

property extent

Change zoom extent.

Related Pages:

onzoom(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None)

Set callback that is called when the chart is zooming.

Specified function receives the zoomed domain.

Related Pages:

Parameters:

  • js_funcs – Javascript functions

  • profile – Optional. A flag to set the component performance storage

onzoomend(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None)

Set callback that is called when zooming ends.

Specified function receives the zoomed domain.

Related Pages:

Parameters:

  • js_funcs – Javascript functions

  • profile – Optional. A flag to set the component performance storage

onzoomstart(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None)

Set callback that is called when zooming starts.

Specified function receives the zoom event.

Related Pages:

Parameters:

  • js_funcs – Javascript functions

  • profile – Optional. A flag to set the component performance storage

property rescale

Enable to rescale after zooming.

If true set, y domain will be updated according to the zoomed region.

Related Pages:

property type

‘scroll’ and ‘drag’.

Related Pages:

Type:

There are two types of zoom behavior