[FEATURE REQUEST] Add methods to programmatically show and hide series

[dennismeister93]

Is your feature request related to a problem? Please describe.
I need to programmatically control the visibility of series in some of the components I am using (vue-ui-xy, vue-stackbar) from a parent component. Currently, there's no way to show or hide specific series by name without manually triggering the legend click events or manipulating internal state.

Describe the solution you'd like
I would like to add two new methods to the component. (starting with vue-ui-xy, vue-stackbar): showSeries(name) and hideSeries(name). These methods would allow parent components to programmatically control series visibility by passing the series name as a parameter. The methods should:

• Find the series by name in the dataset
• Toggle its visibility state (show/hide)
• Update the legend to reflect the change
• Ensure the chart and table data are updated accordingly

Additional context
This feature would be particularly useful for:

• Loading specific series based on URL parameters
• Dynamic dashboards where series need to be shown/hidden based on user interactions
• Conditional rendering based on data availability
• Automated testing scenarios
• Integration with external controls or filters

The methods could probably look like:

function showSeries(name) {
    const series = absoluteDataset.value.find(s => s.name === name);
    if (series && segregatedSeries.value.includes(series.id)) {
        segregate(series); 
    }
}

function hideSeries(name) {
    const series = absoluteDataset.value.find(s => s.name === name);
    if (series && !segregatedSeries.value.includes(series.id)) {
        segregate(series);
    }
}

[graphieros]

@dennismeister93

Thank you for this interesting feature.
It needs to be applied on 19 components of the library.
I will keep you informed when it is done.

Note that there will always be one series visible, should a user try to segregate all series. I never saw the point of allowing the chart to be empty by allowing to hide all series. This is currently the case when using legends to hide/show, and this behaviour will be reflected in the exposed hideSeries method.

Cheers

[dennismeister93]

Note that there will always be one series visible, should a user try to segregate all series. I never saw the point of allowing the chart to be empty by allowing to hide all series. This is currently the case when using legends to hide/show, and this behavior will be reflected in the exposed hideSeries method.

This makes totally sense and i think its also completely ok to keep this behaviour!

Thanks for taking this feature!

[graphieros]

@dennismeister93

You can upgrade to 3.5.0 which exposes hideSeries and showSeries methods.

showSeries: (name: string) => void
hideSeries: (name: string) => void

Set a ref on your chart component to call exposed methods:

<VueUiXy ref="chart" :dataset="dataset" :config="config" />

Example:

const chart = ref(null); // Add this ref on the chart component

function showSeriesByName(name) {
  if (!chart.value) return;
  chart.value.showSeries(name);
}

function hideSeriesByName(name) {
  if (!chart.value) return;
  chart.value.hideSeries(name);
}

[dennismeister93]

Perfect! Thank you so much, thats exactly what I was asking for @graphieros! 🙂

[graphieros]

@dennismeister93
Great!

Since you are using this version, I recommend you use treeshaken imports, so that your build only includes the components you are actually using:

import { VueUiXy } from "vue-data-ui/vue-ui-xy";
import { VueUiStackbar } from "vue-data-ui/vue-ui-stackbar";

See notes on v3.2.0 release for more info about treeshaking