new feature Echart options

[smile2008]

Hi, I’m trying to change the label text size in the Area Chart visual with new feature "Echart options" (6.1.0rc1)

I’m using this:

{ "series": [{ "label": { "fontSize": 4 } }] }

but the chart becomes blank. If I try title and etc - all ok.

Is there a way to merge this into the existing series instead of overwriting it completely, so that only fontSize is changed? Or is there any other way to do this without forking the visual and adding custom settings?

[dosubot[bot]]

Your chart becomes blank because the series array in echartOptions completely overwrites the existing series configuration rather than merging with it. When you provide { "series": [{ "label": { "fontSize": 4 } }] }, it replaces the entire series array that contains your actual chart data, leaving only the label configuration.

The code uses lodash's merge() function for deep merging, but this only works properly for object properties—arrays like series are treated as complete replacements.

Unfortunately, there's no built-in way to merge custom series options with existing series in the current implementation. The Area Chart constructs its series array programmatically from your query data, and echartOptions can only overwrite it entirely.

Workarounds:

• Use echartOptions only for top-level properties that merge properly (grid, tooltip, legend, title, etc.)
• For label fontSize specifically, you'd need to modify the frontend code (transformProps.ts for the Area chart plugin) and rebuild
• For visual-only changes, Dashboard CSS targeting specific chart IDs may work in some cases

This is a known limitation—several related discussions and issues have been raised about the inability to customize series-level ECharts properties per chart instance.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[smile2008]

@dosu Maybe it would make sense to add merge support for series in echartOptions.

label.fontSize is a simple atomic property, so it should not affect anything else and does not seem difficult to support. Or am I missing something?

[dosubot[bot]]

You're right that for a simple property like label.fontSize, it seems straightforward—but the challenge is in how to match which series to apply it to.

The complication is that the series array isn't just a single item—it contains one object per metric, plus derived series (time comparisons), forecast series with confidence bands, and annotation layers. Any merge logic needs to determine: should { "series": [{ "label": { "fontSize": 4 } }] } apply to all series, just the first one, or series matched by name/index?

Key challenges:

• Matching strategy: By index (fragile if order changes), by name (most reliable, but names can be custom), or broadcast to all?
• Different series types: The transformSeries function produces series with different structures (line vs bar vs area have different valid properties)
• Special series: Derived/forecast series have programmatically generated names and special styling that users may not want to override

That said, it's definitely a reasonable feature request. A practical implementation could:

1. Use lodash's mergeWith with custom logic for series arrays
2. Match by series name when provided, fall back to index
3. Allow a special key like "__all__" to broadcast properties to all series

If you're interested in contributing this, it would likely be welcomed—it's a common pain point. The main work would be in Echart.tsx where the merge happens, plus ensuring it works across all ECharts-based chart types.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[smile2008]

@dosu I think I`l start with all , thank you

[dosubot[bot]]

That sounds like a great starting point! Broadcasting to all series is the simplest approach and probably covers the most common use case (like your original fontSize example where you'd want consistent styling across all series).

Good luck with the implementation! 🚀

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[manimovassagh]

Dosu's explanation is right about the root cause (arrays get replaced, not merged), but there is actually a way to work around this without forking.

The trick is to match the exact number of series your chart generates and provide the full structure for each one. If your Area Chart has, say, 3 series (3 metrics or 3 dimension values), you need:

{
  "series": [
    { "label": { "fontSize": 14 } },
    { "label": { "fontSize": 14 } },
    { "label": { "fontSize": 14 } }
  ]
}

But this still wipes your data because lodash merge on arrays replaces by index, and your override objects don't have data, type, name, etc.

What actually works: use the graphic property instead.

For text sizing, you can use Dashboard CSS rather than echartOptions:

/* Target label text in all ECharts within this dashboard */
.echarts-for-react text[font-size] {
  font-size: 14px !important;
}

Or more specifically for series labels:

.superset-chart-echarts .echarts-for-react text {
  font-size: 14px !important;
}

Go to your dashboard, click the ... menu, select Edit CSS, and paste it in.

This is admittedly hacky, but it works without touching series config at all. The echartOptions feature is really only safe for non-array properties like title, tooltip, legend, grid, xAxis, and yAxis.