Scale Grouping

[sevsev9]

Is your feature request related to a problem? Please describe.
Currently, when visualizing multiple datasets in a VueUiXy chart, enabling chart.grid.yAxis.useIndividualScales = true assigns each series its own scale. This becomes problematic when I want to compare two distinct groups of data—such as one group representing percentages and another representing total counts—using only two separate scales. The lack of scale grouping makes it difficult to visually compare related metrics in a single chart.

Describe the solution you'd like
Introduce a "scale group" property on each dataset item that allows multiple series to share the same y-axis scale. For example, if datasets are assigned scaleGroup: "percentage" or scaleGroup: "total", the chart would automatically create one y-axis for each group. This would allow, for instance, all percentage-based datasets to use one scale and all total-based datasets to use another, while still displaying all series in one cohesive chart.

Describe alternatives you've considered
Alternatives include merging datasets into a single series or rendering separate charts for each scale group. However, these approaches either reduce clarity or force a disjointed user experience. Manually adjusting each scale is also not a scalable solution.

Additional context
This feature would greatly improve readability in dashboards where different types of metrics must be visualized together—such as financial data, performance metrics, or any scenario where two distinct scales are required. Providing this functionality would allow users to easily toggle and compare data across different units while keeping the visualization clear and cohesive.

If you consider the following example of 4 or more datasets, each in a scale group, half the diagram becomes just scales eventually.

import type { VueUiXyDatasetItem } from 'vue-data-ui';

// Extended type (for demonstration purposes) with an optional scaleGroup property
interface ExtendedVueUiXyDatasetItem extends VueUiXyDatasetItem {
  scaleGroup?: string;
}

// Example datasets with humorous content

// Donut Devourers series
const donutHappiness: ExtendedVueUiXyDatasetItem = {
  name: 'Donut Devourers - Happiness (%)',
  type: 'line',
  dataLabels: true,
  scaleGroup: 'percentage', // Share scale with other percentage-based series
  series: [92.34, 88.37, 95.00] // Example percentages across different days
};

const donutsEaten: ExtendedVueUiXyDatasetItem = {
  name: 'Donut Devourers - Donuts Eaten',
  type: 'bar',
  dataLabels: true,
  scaleGroup: 'total', // Share scale with other total-based series
  series: [12, 15, 13] // Example counts per day
};

// Pizza Party series
const pizzaDelight: ExtendedVueUiXyDatasetItem = {
  name: 'Pizza Party - Cheesy Delight (%)',
  type: 'line',
  dataLabels: true,
  scaleGroup: 'percentage',
  series: [75.12, 80.50, 78.34]
};

const pizzaSlices: ExtendedVueUiXyDatasetItem = {
  name: 'Pizza Party - Slices Consumed',
  type: 'bar',
  dataLabels: true,
  scaleGroup: 'total',
  series: [8, 9, 10]
};

// Combined into one array that can be fed into the VueUiXy chart
const chartDataset: ExtendedVueUiXyDatasetItem[] = [
  donutHappiness,
  donutsEaten,
  pizzaDelight,
  pizzaSlices
];

export { chartDataset };

I think this would make an outstanding addition to the already phenomenal data visualization library, as it would enable very information dense XY charts.

[graphieros]

Hi @sevsev9

This is a great idea!
Let me see if I can pull that off, as it may be tricky, regarding series properties:

• using groups would make the scaleMin and scaleMax useless if set on series, but this feature would have to remain in some way. I may need to add a dedicated config section for this, like

chart: {
  scaleGroups: {
    enable: true, // default: false
    groups: [
       { name: 'percentage',  scaleMin: null, scaleMax: null },
       // ... and so many as one needs
    ], // default: []
  }
}

All while keeping scaleGroup defined in series, as you proposed.

I'll keep you posted, hopefully with a beta.

Cheers

[sevsev9]

I agree, this sure would be hard to pull off. But what also might be a more simple approach is:

If scaleMin and scaleMax are the exact same for multiple data sets, automatically show only one scale?

Then of course, the scaleName: if the scaleName is distinct it shows different scales.

Maybe group them if scaleMin + scaleMax + scaleName is the same across multiple datasets?

[graphieros]

This would work if the scale name was not the series name, which it is currently.

[sevsev9]

Excuse me, I meant scaleLabel.

[graphieros]

Looks like an interesting path

[sevsev9]

Currently I am trying to fit 8 datasets with 2 scales into one diagram, but half the diagram is scales. I've done a rather ugly workaround now which confines the scales to the left side and effectively makes them unreadable (yAxis.labelWidth: 0).

Do you have a better workaround currently? Can the scales be hidden entirely?

[graphieros]

Unfortunately not, sorry for that, not even css classes to grab.
I'm afraid you'll have to show 2 charts until a solution is shipped.

[sevsev9]

Thank you,
I appreciate the swift responses!

I really love this project, is there a way to sponsor it? I like to sponsor the projects I use often.

[graphieros]

That's very nice to offer, I did not set up sponsoring for now, I'd rather get good PRs ;)

[graphieros]

Oh You can probably hide the scales using the #svg slot, by sticking a rect with the same bg color as the chart bg.

    <VueUiXy :dataset="dataset" :config="config">
        <template #svg="{ svg }">
            <rect :x="0" :y="0"  :width="24" :height="svg.height" fill="red"/>
        </template>
    </VueUiXy>

[graphieros]

@sevsev9

Can you try out 2.6.29 and let me know if it's good for you ?

Setting common scaleLabel in the dataset will group scales.

You will need to set this additional config option to control the color of scale groups (will be applied on all grouped scales):

const config: VueUiXyConfig = {
  chart: {
    grid: {
      labels: {
        yAxis: {
          groupColor: '#1A1A1A', // default: null, if not set, will default to a series color
          scaleLabelOffsetX: 0,  // default: 0
          scaleValueOffsetX: 0, // default: 0
        }
      }
    }
  }
}

[sevsev9]

Thank you! I will try both this afternoon! (I'm PST)

[graphieros]

@sevsev9 no need to try hiding the scales, as upgrading to 2.6.29 should have you covered :)

PS. Thanks for the funny dataset, which made me crave pizza at 6am ^^

[sevsev9]

That's amazing, thank you!