libApexCharts

Convertigo NGX builder Project

For more technical informations : documentation

• Installation
• Mobile Application
  • Pages
    • Page
  • Shared Components
    • apxChart

Installation

1. In your Convertigo Studio click on to import a project in the treeview

2. In the import wizard

   

   paste the text below into the Project remote URL field:

   Usage	Click the copy button at the end of the line
   To contribute	libApexCharts=https://github.com/convertigo/c8oprj-lib-apexcharts-ui-ngx.git:branch=8.4.0.0
   To simply use	libApexCharts=https://github.com/convertigo/c8oprj-lib-apexcharts-ui-ngx/archive/8.4.0.0.zip

3. Click the Finish button. This will automatically import the libApexCharts project

Mobile Application

Describes the mobile application global properties

Pages

Page

A simple example to show apex chart usage

Shared Components

apxChart

variables

name	comment
annotations	Defines annotation markers and labels displayed on chart points or axes. Example value: {"yaxis":[{"y":42,"borderColor":"#ff4560","label":{"text":"Target"}}]} ```
chart	Defines the "chart" input of the shared ApexCharts component. Example value: {"type":"bar","height":320,"toolbar":{"show":false}} ```
colors	Defines the "colors" input of the shared ApexCharts component. Example value: ["#2563eb","#0ea5e9","#22c55e"] ```
dataLabels	Defines data label visibility and style options. Example value: {"enabled":true,"style":{"fontSize":"12px","fontWeight":"bold"}} ```
fill	Defines fill style such as solid or gradient. Example value: {"type":"gradient","gradient":{"shadeIntensity":0.4,"opacityFrom":0.8,"opacityTo":0.2}} ```
grid	Defines chart grid visibility and style. Example value: {"show":true,"strokeDashArray":4} ```
labels	Defines category labels for charts such as pie or donut. Example value: ["Direct","Organic","Ads","Referral"] ```
legend	Defines legend behavior and placement. Example value: {"show":true,"position":"bottom"} ```
plotOptions	Defines type-specific rendering options. Example value: {"bar":{"horizontal":false,"columnWidth":"50%"}} ```
responsive	Defines chart options overridden for specific breakpoints. Example value: [{"breakpoint":768,"options":{"legend":{"position":"bottom"}}}] ```
series	Defines the data series rendered by the chart. Example value: [{"name":"Revenue","data":[12,18,15,22,28,24]}] ```
states	Defines hover and active visual states. Example value: {"hover":{"filter":{"type":"lighten","value":0.1}}} ```
stroke	Defines line or area stroke style. Example value: {"curve":"smooth","width":2} ```
subtitle	Defines an optional subtitle displayed under the title. Example value: {"text":"FY 2026 - first half","align":"left"} ```
theme	Defines chart theme and color palette mode. Example value: {"mode":"dark","palette":"palette4"} ```
title	Defines the main chart title. Example value: {"text":"Monthly revenue","align":"left"} ```
tooltip	Defines tooltip display options. Example value: {"enabled":true,"shared":true} ```
xaxis	Defines x-axis categories and labels. Example value: {"categories":["Jan","Feb","Mar","Apr","May","Jun"]} ```
yaxis	Defines y-axis scale and label formatting. Example value: {"min":0,"max":100,"tickAmount":5} ```