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