Integration: Data Visualization

[endigo9740]

Describe the feature in detail (code, mocks, or screenshots encouraged)

Now the radial and conic gradients are handled as Tailwind features, rather than a dedicated component, we should still aim to provide support for data visualization elements. At least to replace the way conic gradient was used in v2 and prior.

This might include:

• Pie Charts
• Bar Charts
• Line Charts
• etc

In order to handle the variety of options and configurations folks might need, my recommendation is we push folks towards a third-party solution, but pair it with Skeleton styles (Skeleton colors). For this we could use:

• CSS-Based: https://chartscss.org/
• SVG-Based: https://d3js.org/
• Canvas-Based: https://www.chartjs.org/docs/latest/

As such, we should aim to make an opinionated choice and showcase how it can be integrated (ala Lucide for icons). In most cases, it should be as simple as passing the appropriate CSS Custom Properties to define the colors.

Provide relevant links or additional information.

For Chart.css, setting colors might work like this:

#my-chart .column {
  --color-1: rgb(var(--color-primary-500));
  --color-2: rgb(var(--color-secondary-500));
  --color-3: rgb(var(--color-tertiary-500));
  --color-4: rgb(var(--color-success-500));
  --color-5: rgb(var(--color-warning-500));
  --color-6: rgb(var(--color-error-500));
  --color-7: rgb(var(--color-surface-500));
  /* ... */
}

Technology

The three standard options typically revolve around these three types of tech:

• CSS: typically the simplest to use, but has the least amount of options
• SVG: typically a good balance of capability and ease of use (thinking of Tailwind fill- colors here)
• Canvas: typically the most performant but also the hardest to configure (likely won't support light/dark mode)

[kmalloy24]

Throwing ECharts (Apache 2.0 License) out there.

• Pass custom themes via JS or JSON
• Light/dark support via themes
• TS support
• SVG or Canvas rendering

Evidence.dev built their charting library with ECharts and Svelte - it's open source (MIT).

• Code
• Docs

[endigo9740]

@kmalloy24 sounds great on paper!

Per the themes, I think we'll run into the situation where they're almost always SVG or Canvas based, which means they expect the styles to be passes via JS, JSON, etc.

Given the new Theme Generator is a standalone tool, we can actually do some interesting stuff with it - such as have a way to export the color data in multiple formats. Might be able to do a JSON format that can be parsed by tools like this.

• NEXT: Pagination #2389
• https://themes.skeleton.dev/

Note our focus is on v3 components right now, but I do plan to circle back to this in the future. This may be an additional feature we can implement.

[endigo9740]

Adding this to the list of options to review:
https://echarts.apache.org/