GraphApexCharts Module

class epyk.core.html.graph.GraphApexCharts.Area(page: PageModel, width, height, html_code, options, profile)

property options: OptionsArea

Property to the component options.

Options can either impact the Python side or the Javascript builder.

Python can pass some options to the JavaScript layer.

class epyk.core.html.graph.GraphApexCharts.Bar(page: PageModel, width, height, html_code, options, profile)

property options: OptionsBar

Property to the component options.

Options can either impact the Python side or the Javascript builder.

Python can pass some options to the JavaScript layer.

class epyk.core.html.graph.GraphApexCharts.Chart(page: PageModel, width, height, html_code, options, profile)

activePoints(i: Optional[int] = None) → ApexActivePoints

The current active points selected by an event on a chart.

Usage:

library = "apex"
kind = "line"
c = page.ui.charts.plot(library, data.to_dict('records'), kind=kind, y=["Value"], x="Year", height=(500, "px"))

c.click([
  page.js.console.log(c.activePoints().label)
])

Related Pages:

https://apexcharts.com/docs/options/chart/events/

Parameters:: i – Optional. The series index. Default it is the series clicked

add_dataset(data: list, label: str = '', colors: Optional[List[str]] = None, opacity: Optional[float] = None, kind: Optional[str] = None)

Parameters:

data – The list of points (float)
label – Optional. The list of points (float)
colors – Not used. Optional. The color for this series. Default the global definition
opacity – Not used. Optional. The opacity level for the content
kind – Not used. Optional. THe series type. Default to the chart type if not supplied

build(data: Union[str, JsDataModel, float, dict, list, bool] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None, component_id: str = None, stop_state: bool = True, dataflows: List[dict] = None)

Update the chart with context and / or data changes.

Usage:

data = []
component = page.ui.charts.apex.bar([], y_columns=["rating"], x_axis="progress")
btn1 = page.ui.buttons.refresh("refresh")
btn1.click([
    component.build(data)
])

Parameters:

data – Optional. The full datasets object expected by ChartJs
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage
component_id – Not used
stop_state – Remove the top panel for the component state (error, loading…)
dataflows – Chain of data transformations

click(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None, on_ready: bool = False)

Add a click event to the Apex chart.

Related Pages:

https://apexcharts.com/docs/options/chart/events/

Parameters:

js_funcs – A Javascript Python function
profile – Optional. Set to true to get the profile for the function on the Javascript console
source_event – Optional. The source target for the event
on_ready – Optional. Specify if the event needs to be trigger when the page is loaded

colors(hex_values: List[str])

Set the colors of the chart.

hex_values can be a list of string with the colors or a list of tuple to also set the bg colors. If the background colors are not specified they will be deduced from the colors list changing the opacity.

Usage:

line = page.ui.charts.apex.line(height=250)
line.colors(["#FFA500", "#FF7F50"])

Parameters:: hex_values – An array of hexadecimal color codes

define(options: Optional[Union[str, JsDataModel, float, dict, list, bool]] = None, dataflows: Optional[List[dict]] = None) → str

Set the chart options.

Parameters:

options – The apex chart option
dataflows – Chain of config transformations

property js: ApexChart

The Javascript functions defined for this component. Those can be specific ones for the module or generic ones from the language.

Returns:: A Javascript Dom object functions.

labels(labels: List[str])

Set the labels of the different series in the chart.

Parameters:: labels – An array of labels

property options: OptionsLine

Property to the component options.

Options can either impact the Python side or the Javascript builder.

Python can pass some options to the JavaScript layer.

property shared: OptionsChartSharedApex

All the common properties shared between all the charts. This will ensure a compatibility with the plot method.

Usage:

line = page.ui.charts.chartJs.bar()
line.shared.x_label("x axis")

zoomable(flag: bool = True)

Set the chart zoomable.

Parameters:: flag – Optional. Add the zoom option to the chart

class epyk.core.html.graph.GraphApexCharts.Pie(page: PageModel, width, height, html_code, options, profile)

property options: OptionsPie

Property to the component options.

Options can either impact the Python side or the Javascript builder.

Python can pass some options to the JavaScript layer.

class epyk.core.html.graph.GraphApexCharts.RadialBar(page: PageModel, width, height, html_code, options, profile)

property options: OptionsPie

Property to the component options.

Options can either impact the Python side or the Javascript builder.

Python can pass some options to the JavaScript layer.