` elements with: - `class` - Contains the localId value (e.g., `gsbp-6a376a3`) - `data-chart-data` - Contains the escaped chart options JSON - `data-chart-id` - Contains the chart's unique ID ## Chart Types and Examples ### Line Chart Line charts display data as a series of points connected by straight line segments. ```html

``` ### Area Chart Area charts are similar to line charts but fill the area below the line with color. They're ideal for showing trends over time. ```html

``` ### Bar Chart Bar charts display data using vertical bars, making them excellent for comparing values across categories. ```html

``` ### Horizontal Bar Chart Horizontal bar charts display data using horizontal bars, useful for comparing values when category labels are long or when emphasizing ranking. ```html

``` ### Pie Chart Pie charts show proportional data as slices of a circle, perfect for displaying percentage distributions. ```html

``` ### Radar Chart Radar charts display multivariate data on a two-dimensional chart with axes starting from the same point, ideal for comparing multiple variables. ```html

``` ### Candlestick Chart Candlestick charts are commonly used for financial data, showing open, high, low, and close values for each time period. ```html

``` ## Common Chart Configuration Options ### Chart Type Configuration All charts require a `chart` object with at minimum: - `type`: The chart type (line, area, bar, pie, radar, candlestick, etc.) - `height`: Height of the chart (should match `styleAttributes.height`) ### Series Data Most charts use a `series` array containing data: - For line, area, bar charts: Array of objects with `name` and `data` properties - For pie charts: Array of numbers with corresponding `labels` array - For candlestick charts: Array with complex data objects containing x and y values ### Axes Configuration - `xaxis`: Configure x-axis with categories, type, position, styling - `yaxis`: Configure y-axis with step size, tooltip, styling ### Styling Options - `colors`: Array of color values for series - `fill`: Configure fill type and gradients - `stroke`: Configure line stroke width and style - `plotOptions`: Chart-specific plot options (e.g., bar border radius, horizontal orientation) - `dataLabels`: Enable/disable and style data labels - `title`: Add chart title with positioning and styling ### Responsive Configuration Charts can include `responsive` array with breakpoint-specific options: ```json "responsive": [ { "breakpoint": 480, "options": { "chart": { "width": 300 }, "legend": { "position": "bottom" } } } ] ``` ## Dynamic Attributes Charts can include `dynamicAttributes` for data binding: - `data-series-0`, `data-series-1`, etc.: Dynamic series data - `data-xaxis-categories`: Dynamic x-axis categories - `data-series-numbers`: Dynamic numeric series - `data-labels`: Dynamic labels for pie/donut charts ## Best Practices 1. Always set chart height in both `styleAttributes` and chart options 2. Use unique IDs for each chart (id and localId must match) 3. Properly escape JSON in both the JSON parameter and HTML data attribute 4. Follow ApexCharts.js documentation for advanced configuration options 5. Test responsive behavior with appropriate breakpoint configurations 6. Ensure data-chart-data HTML attribute contains properly escaped JSON 7. Use the `init` parameter in chartData to control initialization timing if needed