ApexCharts (Legacy)
This component is a drop-in replacement for the Kyvis-Labs ApexCharts module.
ApexCharts renders charts using SVG instead of canvas, offering crisp, scalable visuals and seamless CSS styling. While not as fast as canvas for massive datasets, SVG enables rich interactivity, easier DOM manipulation, and high-quality graphics across a wide range of chart types.
Properties
| Name | Description | Property Type |
|---|---|---|
type | Chart type. | string |
options | Chart options. | object |
series | Chart data. | object |
style | Use styles to customize the visual style of the component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. | object |
Component Configuration
Details on how to configure the component can be found on the ApexCharts documentation site. All configurations supported by ApexCharts are supported on the Perspective component.
Only configuration details specific to this module are provided here.
📄️ Event Handlers
ApexCharts provides a range of event handlers for their charts. The events allow you to respond to various events, such as mouse click, zoom, selection, etc.
🗃️ Component Methods
9 items
📄️ Leveraging Perspective Theme Colors and Fonts
It is possible to leverage Perspective theme colors and fonts for the charts. Simply use a defined variable from the theme in replace of the actual color or font. Here is an example of using a theme color:
📄️ User Defined Functions
ApexCharts allows users to define functions for various properties to offer more flexibility. For example, you can define a label formatter that uses JavaScript customize the label. The module supports user defined functions, but you must follow a specific format. For any property that allows a user defined function, simple set the property in Ignition to a string starting with: