Gradients in BarChart

[ArbazIrshad]

Hello, Thanks for creating this amazing Library. Really enjoying exploring it. I like how creating different charts is quite easy with it.

How do I create a bar chart with gradient or area with gradient using cristalyse?

Thank you!

[rudi-q]

Hey👋 @ArbazIrshad

Thanks for exploring cristalyse - glad you're enjoying it! 🎉

As of v1.5.0, gradient fills for bars and areas aren't currently supported.

The library has gradient color mapping (like heat maps where each cell gets a color from a gradient scale), but no visual gradient fills within individual bars/areas yet.

It's definitely doable, though - if there's demand for it, I can prioritize adding gradient fills in an upcoming release.

Would love to hear more about your specific use case if you don't mind sharing!

[ArbazIrshad]

Hello @rudi-q, Thanks for replying.
I am trying to implement a graph from figma for an app.
The graphs use gradients heavily. The bars look like this.
I guess I will have to make do without gradients for now.
Gradients would be a nice feature to have.

[rudi-q]

Hey 👋 @ArbazIrshad

Wanted to let you know that with the release of v1.6.0, gradient colors are now supported with the 'customPalette()' method.

You can find more info on the example app and docs here:

https://docs.cristalyse.com/advanced/custom-themes#applying-gradient-themes
https://docs.cristalyse.com/advanced/custom-themes#gradient-themes-experimental

// Create gradients map for use with .customPalette()
final productGradients = {
  // Linear gradients for different product tiers
  'Enterprise': const LinearGradient(
    colors: [Color(0xFF8B5CF6), Color(0xFFA78BFA)],
    begin: Alignment.bottomLeft,
    end: Alignment.topRight,
    stops: [0.0, 1.0],
  ),
  'Professional': const LinearGradient(
    colors: [Color(0xFF3B82F6), Color(0xFF60A5FA)],
    begin: Alignment.bottomCenter,
    end: Alignment.topCenter,
  ),
  // Radial gradient for special categories
  'Premium': const RadialGradient(
    colors: [Color(0xFFDC2626), Color(0xFFEF4444), Color(0xFFFCA5A5)],
    center: Alignment.center,
    radius: 1.2,
    stops: [0.0, 0.7, 1.0],
  ),
  // Sweep gradient for dynamic effects
  'Special': const SweepGradient(
    colors: [
      Color(0xFFEAB308),
      Color(0xFFF59E0B),
      Color(0xFFDC2626),
      Color(0xFFEAB308),
    ],
    center: Alignment.center,
    startAngle: 0.0,
    endAngle: 2 * math.pi,
  ),
};


CristalyseChart()
  .data(productData)
  .mapping(x: 'month', y: 'sales', color: 'tier') // Color mapping required
  .geomBar()
  .customPalette(categoryGradients: productGradients)
  .build()

Hope this helps 🙌

If this resolves it for you, can you please mark it as 'answered'!
@ArbazIrshad