OptChartJs Module

class epyk.core.html.options.OptChartJs.ChartJsOptions(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

add_title(text: str, color: Optional[str] = None)

Parameters:

text –
color –

property elements: OptionElements

property layout: OptionLayout

property legend: OptionLegend

property plugins: OptionChartJsPlugins

property scales: OptionScales

property title: OptionTitle

property tooltips

class epyk.core.data.DataClass.DataClass(component: Optional[HtmlModel] = None, attrs: Optional[dict] = None, options: Optional[dict] = None, page: Optional[PageModel] = None)

add(name: str, value: Any)

Add the key and value to the final result object.

Parameters:

name – The key in the final data dictionary.
value – The value in the final data dictionary.

attr(name: str, value: Any)

Add an attribute to the Javascript underlying dictionary.

Parameters:

name – The attribute name
value – The attribute value

Returns:

“Self” to allow the chains on the Python side

attrs()

config_attrs(options: Optional[dict] = None) → str

Get the attributes in a string.

Parameters:: options – Dictionary with specific attributes to be set

custom(name: str, value: Any)

Custom function to add a bespoke attribute to a class.

This entry point will not be able to display any documentation but it is a shortcut to test new features. If the value is a Javascript object, the PyJs object must be used.

Parameters:

name – The key to be added to the attributes
value – The value of the defined attributes

Returns:

The DataAttrs to allow the chains

get(dfl: Optional[Union[str, bool, int, dict, list, float]] = None, name: Optional[str] = None)

Get the attribute to the underlying attributes dictionary.

Parameters:

dfl – Optional. The default value of this attribute
name – Optional. The attribute name. default the name of the function

has_attribute(cls_obj)

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

set(value: Any, name: Optional[str] = None)

Add an attribute to the Javascript underlying dictionary.

Parameters:

value – The attribute value
name – Optional. The attribute name. default the name of the functin.

Returns:

“Self” to allow the chains on the Python side

sub_data(name: str, cls_obj)

Add an extra sub layer to the data structure. The key in the object representation will be the function name.

Should use has_attribute is the name can be deduced from the parent function.

Parameters:

name – The key to be added to the internal data dictionary
cls_obj – Class. Object. The object which will be added to the nested data structure

sub_data_enum(name: str, cls_obj)

Add key to a sub dictionary. This will create an attribute object with a nested structure.

Parameters:

name – The key to be added to the internal data dictionary
cls_obj – Class. Object. The object which will be added to the nested data structure

update(vals: dict)

Update the object internal attributes.

Parameters:: vals – All the attributes to be added to the component

class epyk.core.html.options.OptChartJs.OptionAxes(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

add_label(text: str, color: Optional[str] = None)

Parameters:

text –
color –

property border: OptionAxesBorder

category(vals)

Parameters:: vals –

property grid: OptionAxesGridLine

property gridLines: OptionAxesGridLine

property id

property offset

property padding

property position

property reverse

property scaleLabel: OptionAxesScaleLabel

property stacked

property static

property stepSize

property suggestedMax

property suggestedMin

property ticks: OptionAxesTicks

property time: OptionAxesTime

property title: OptionTitle

options.scales[scaleId].title, it defines options for the scale title. Note that this only applies to cartesian axes.

Related Pages:

https://www.chartjs.org/docs/latest/axes/labelling.html

Type:: Namespace

class epyk.core.html.options.OptChartJs.OptionAxesGridLine(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property borderColor

The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.

Related Pages:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

property borderDash

Length and spacing of dashes on grid lines.

Related Pages:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

property borderDashOffset

Offset for line dashes.

Related Pages:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

property borderWidth

Offset for line dashes.

Related Pages:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

property circular

If true, gridlines are circular (on radar chart only).

Related Pages:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

property color

The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.

Related Pages:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

property display

If false, do not display grid lines for this axis.

Related Pages:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

property drawBorder

If true, draw border at the edge between the axis and the chart area.

Related Pages:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

property drawOnChartArea

If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn.

Related Pages:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

property drawTicks

If true, draw lines beside the ticks in the axis area beside the chart.

Related Pages:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

property lineWidth

Stroke width of grid lines.

Related Pages:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

property offsetGridLines

If true, grid lines will be shifted to be between labels. This is set to true for a bar chart by default.

Related Pages:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

property tickColor

property tickMarkLength

Length in pixels that the grid lines will draw into the axis area.

Related Pages:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

property z

z-index of gridline layer. Values <= 0 are drawn under datasets, > 0 on top.

Related Pages:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

property zeroLineBorderDash

Length and spacing of dashes of the grid line for the first index (index 0).

Related Pages:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

property zeroLineBorderDashOffset

Offset for line dashes of the grid line for the first index (index 0).

Related Pages:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

property zeroLineColor

Stroke color of the grid line for the first index (index 0).

Related Pages:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

property zeroLineWidth

Stroke width of the grid line for the first index (index 0).

Related Pages:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

class epyk.core.html.options.OptChartJs.OptionAxesScaleLabel(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

label(value: str)

Shortcut to the labelString and display property.

Parameters:: value – The label value.

class epyk.core.html.options.OptChartJs.OptionAxesTicks(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property backdropColor

Change the font color.

Related Pages:

https://www.chartjs.org/docs/latest/charts/line.html

property beginAtZero

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

Related Pages:

https://www.chartjs.org/docs/latest/samples/scale-options/ticks.html

Parameters:

js_funcs –
profile –

property color

Change the font color.

Related Pages:

https://www.chartjs.org/docs/latest/charts/line.html

property fontColor

Change the font color.

Related Pages:

https://www.chartjs.org/docs/latest/charts/line.html

property fontSize

Change the labels CSS font size.

Related Pages:

https://www.chartjs.org/docs/latest/charts/line.html

property major: OptionAxesTicksMajor

mapTo(mapping: dict)

Map the values to a static dictionary.

Parameters:: mapping – The mapping table.

property max

property maxTicksLimit

property min

property minor: OptionAxesTicksMajor

property mirror

Flips tick labels around axis, displaying the labels inside the chart instead of outside. Note: Only applicable to vertical scales.

Related Pages:

https://www.chartjs.org/docs/latest/charts/line.html

property stepSize

Force the step size.

Related Pages:

https://www.chartjs.org/docs/latest/charts/line.html https://www.chartjs.org/docs/3.7.0/samples/scales/linear-step-size.html

property suggestedMax

property suggestedMin

property textStrokeColor

Change the font color.

Related Pages:

https://www.chartjs.org/docs/latest/charts/line.html

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

Convert to number using the accounting Javascript module-

Related Pages:

https://openexchangerates.github.io/accounting.js/

Parameters:

js_funcs –
profile –

class epyk.core.html.options.OptChartJs.OptionAxesTime(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property displayFormats: OptionDisplayFormats

class epyk.core.html.options.OptChartJs.OptionChartJsPieTooltips(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property callbacks

OptionChartJsTooltipsPieCallbacks

Type:: rtype

class epyk.core.html.options.OptChartJs.OptionChartJsPlugins(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property legend: OptionLegend

property subtitle: OptionTitle

property title: OptionTitle

class epyk.core.html.options.OptChartJs.OptionChartJsTooltips(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property backgroundColor

property bodyAlign

property bodyColor

property bodySpacing

property borderColor

property borderWidth

property boxHeight

property boxPadding

property boxWidth

property callbacks

OptionChartJsTooltipsCallbacks

Type:: rtype

property caretPadding

property caretSize

property cornerRadius

property displayColors

property enabled

//www.chartjs.org/docs/3.7.0/configuration/tooltip.html

Type:: https

property footerAlign

property footerColor

property footerMarginTop

property footerSpacing

property multiKeyBackground

property position

//www.chartjs.org/docs/3.7.0/configuration/tooltip.html

Type:: https

property rtl

property textDirection

property titleAlign

property titleColor

property titleMarginBottom

property titleSpacing

property usePointStyle

property xAlign

property yAlign

class epyk.core.html.options.OptChartJs.OptionChartJsTooltipsCallbacks(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property label

property value

class epyk.core.html.options.OptChartJs.OptionChartJsTooltipsPieCallbacks(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

class epyk.core.html.options.OptChartJs.OptionDisplayFormats(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

class epyk.core.html.options.OptChartJs.OptionElements(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property point: OptionPoint

class epyk.core.html.options.OptChartJs.OptionElementsLine(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property line: OptionLine

class epyk.core.html.options.OptChartJs.OptionGeo(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property colorScale

OptionGeoColorScale

Type:: rtype

property radiusScale

OptionGeoRadiusScale

Type:: rtype

class epyk.core.html.options.OptChartJs.OptionGeoColorScale(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property legend

OptionLegend

Type:: rtype

class epyk.core.html.options.OptChartJs.OptionGeoRadiusScale(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

class epyk.core.html.options.OptChartJs.OptionLabels(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property fontColor: Change the color.

class epyk.core.html.options.OptChartJs.OptionLayout(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property padding: OptionPadding

property paddings

class epyk.core.html.options.OptChartJs.OptionLegend(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property align

Alignment of the legend.

Related Pages:

https://www.chartjs.org/docs/latest/configuration/legend.html

property display

Is the legend shown?

Related Pages:

https://www.chartjs.org/docs/latest/configuration/legend.html

property labels: OptionLabels

property position

Position of the legend values are top, left, bottom, right

Related Pages:

https://www.chartjs.org/docs/latest/configuration/legend.html

property reverse

Legend will show datasets in reverse order.

Related Pages:

https://www.chartjs.org/docs/latest/configuration/legend.html

property rtl

true for rendering the legends from right to left.

Related Pages:

https://www.chartjs.org/docs/latest/configuration/legend.html

property title: OptionTitle

class epyk.core.html.options.OptChartJs.OptionLine(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property tension

class epyk.core.html.options.OptChartJs.OptionPadding(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property bottom

property left

property right

property top

class epyk.core.html.options.OptChartJs.OptionPieAnimation(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property animateRotate

property animateScale

class epyk.core.html.options.OptChartJs.OptionPoint(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property radius

class epyk.core.html.options.OptChartJs.OptionScaleGeo(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

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

Parameters:

js_funcs –
profile –

class epyk.core.html.options.OptChartJs.OptionScales(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

add_axis(value: str) → OptionAxes

Add a bespoke series to the chart.

Parameters:: value – The series alias

add_x_axis() → OptionAxes: Add a X axis to a chart component.

add_y_axis() → OptionAxes: Add / Get y axis to the chart.

property r: OptionScaleR: Add options to the r scale.

property x: OptionAxes: Add options to the x axis.

property xAxes: OptionAxes: Shortcut property to the last x_axes definition. Use the function x_axes to be more specific.

x_axes(i: Optional[int] = None) → OptionAxes

Get a specific x axis.

Parameters:: i – optional. Default take the latest one

property y: OptionAxes: Add options to the y axis.

property y2: OptionAxes: Add options to a y2 axis.

property yAxes: OptionAxes

Shortcut property to the last y_axis definition. Use the function y_axis to be more specific.

y_axis is useful when multiple y axes are used for the same chart.

y_axis(i: Optional[int] = None) → OptionAxes

Get a specific y axis.

Parameters:: i – optional. Default take the latest one

class epyk.core.html.options.OptChartJs.OptionTitle(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property align

property color

property display

property font: OptionLabelFont

property text

Set the Chart title.

Usage:

bar = page.ui.charts.chartJs.bar()
bar.options.plugins.title.text = pk.js_callback("function(){return Math.random()}")
bar.options.plugins.title.display = True

Related Pages:

https://www.chartjs.org/docs/latest/samples/other-charts/pie.html

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

property datasets: Bar: Common datasets configuration for all series

property stacked

class epyk.core.html.options.OptChartJs.OptionsChartSharedChartJs(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: Union[str, JsDataModel, float, dict, list, bool] = '', digit: int = 0, thousand_sep: Union[str, JsDataModel, float, dict, list, bool] = '.', decimal_sep: Union[str, JsDataModel, float, dict, list, bool] = ',', fmt: Union[str, JsDataModel, float, dict, list, bool] = '%v %s', factor: Optional[int] = None, alias: str = '')

Parameters:

symbol –
digit –
thousand_sep –
decimal_sep –
fmt –
factor –
alias –

x_format_number(factor: int = 1, alias: Optional[str] = None, digits: int = 0, thousand_sep: Union[str, JsDataModel, float, dict, list, bool] = '.')

Parameters:

factor –
alias –
digits –
thousand_sep –

x_label(value: Union[str, JsDataModel, float, dict, list, bool])

Set the label of the x-axis.

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: Union[str, JsDataModel, float, dict, list, bool] = '', digit: int = 0, thousand_sep: Union[str, JsDataModel, float, dict, list, bool] = '.', decimal_sep: int = ',', fmt: Union[str, JsDataModel, float, dict, list, bool] = '%v %s', factor: Optional[int] = None, alias: str = '')

Parameters:

symbol –
digit –
thousand_sep –
decimal_sep –
fmt –
factor –
alias –

y_format_number(factor: int = 1, alias: Optional[str] = None, digits: int = 0, thousand_sep: Union[str, JsDataModel, float, dict, list, bool] = '.')

Parameters:

factor –
alias –
digits –
thousand_sep –

y_label(value: Union[str, JsDataModel, float, dict, list, bool])

Set the label of the y-axis.

Parameters:: value – The axis label.

y_tick_count(num: int)

Parameters:: num –

class epyk.core.html.options.OptChartJs.OptionsGeo(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property geo

OptionGeo

Type:: rtype

property plugins: OptionPlugins

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

property backgroundColor

The line fill color.

Related Pages:

https://www.chartjs.org/docs/3.7.0/charts/line.html

property borderCapStyle

Cap style of the line.

Related Pages:

https://www.chartjs.org/docs/3.7.0/charts/line.html

property borderColor

The line color.

Related Pages:

https://www.chartjs.org/docs/3.7.0/charts/line.html

property borderDash

Length and spacing of dashes.

Related Pages:

https://www.chartjs.org/docs/3.7.0/charts/line.html

property borderDashOffset

Offset for line dashes.

Related Pages:

https://www.chartjs.org/docs/3.7.0/charts/line.html

property borderJoinStyle

Line joint style.

Related Pages:

https://www.chartjs.org/docs/3.7.0/charts/line.html

property borderWidth

The line width (in pixels).

Related Pages:

https://www.chartjs.org/docs/3.7.0/charts/line.html

property datasets: Line: Common datasets configuration for all series

property elements: OptionElementsLine

property fill

How to fill the area under the line.

Related Pages:

https://www.chartjs.org/docs/3.7.0/charts/line.html

property interaction: OptionInteractionLine

property showLines

If false, the line is not drawn for this dataset.

Related Pages:

https://www.chartjs.org/docs/latest/charts/polar.html https://www.chartjs.org/docs/3.7.0/charts/line.html

property spanGaps

If true, lines will be drawn between points with no or null data. If false, points with null data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used.

Related Pages:

https://www.chartjs.org/docs/latest/charts/polar.html https://www.chartjs.org/docs/3.7.0/charts/line.html

property tension

Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used.

Related Pages:

https://www.chartjs.org/docs/3.7.0/charts/line.html

class epyk.core.html.options.OptChartJs.OptionsPie(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property animation: OptionPieAnimation

property circumference

property cutoutPercentage

property datasets: Pie: Common datasets configuration for all series

property rotation

property tooltips

class epyk.core.html.options.OptChartJs.OptionsPolar(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)

property animation: OptionPieAnimation

property datasets: Polar: Common datasets configuration for all series

property startAngle

Starting angle to draw arcs for the first item in a dataset. In degrees, 0 is at top.

Related Pages:

https://www.chartjs.org/docs/latest/charts/polar.html https://www.chartjs.org/docs/3.7.0/api/interfaces/PolarAreaControllerChartOptions.html