| name | charts |
| description | Use this skill when generating interactive charts or data visualizations for frontend dashboards. This skill dictates the use of ApexCharts for all visual representations of data. |
Interactive Charts in EverFern
When spawning sub-agents or writing interactive HTML/JS to display data visualizations, you must use ApexCharts (apexcharts).
Requirements
- Always use ApexCharts for all graphs, plots, and interactive data visualizations.
- Do not use Chart.js, Recharts, D3.js, or other charting libraries unless explicitly requested by the user.
- Include the library via CDN in your HTML files:
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
- Ensure charts are responsive, cleanly animated, and themed to match EverFern's premium aesthetic (modern fonts like Inter, subtle gradients, and custom tooltips).
Example Integration
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
var options = {
chart: {
type: 'area',
height: 350,
fontFamily: 'Inter, sans-serif',
toolbar: { show: false }
},
series: [{
name: 'Sales',
data: [30, 40, 35, 50, 49, 60, 70]
}],
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
},
colors: ['#6366f1'],
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.4,
opacityTo: 0.05,
stops: [0, 90, 100]
}
},
dataLabels: { enabled: false },
stroke: { curve: 'smooth' }
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
