Is there a way to associate a data set with the Y Axis scale in line charts?

[powertec-dan]

I have a line chart that has multiple datasets which share the X-axis labels.

Each one of these data sets can have a different Y scale.
I have set the colours of the data sets in the chart. Is it possible to associate the Y-Axis scale to the colour of the dataset?
This would provide better clarity for the user as to which scale belongs to which dataset.

[gvreddy04]

@powertec-dan Can you share a sample code snippet or GitHub repository to reproduce the above scenario? And can you also share your business requirement at a high level for better understanding of the line chart usage?

[powertec-dan]

@page "/charttest"



<div class="row">
    <LineChart @ref="_lineChart" Class="col-12" />
</div>


@code
{
    private LineChart _lineChart = default!;
    private LineChartOptions? _lineChartOptions;

    private List<string> _labels = new();
    private Dictionary<string, List<double>> _dataSets = new();

    protected override void OnInitialized()
    {
        _lineChartOptions = new();
        _lineChartOptions.Responsive = true;
        _lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };


        var rnd = new Random();
        var startDate = DateTime.Now - TimeSpan.FromDays(1);
        _dataSets.Add("Voltage", new());
        _dataSets.Add("Frequency", new());
        _dataSets.Add("Power", new());

        double voltage = 415;
        double frequency = 50;
        double power = 80;

        for (int i = 0; i < 100; i++)
        {
            _labels.Add($"{startDate:O}");

            double voltageShift = rnd.Next(6) - 3;
            if (voltage + voltageShift > 420 || voltage + voltageShift < 410)
                voltageShift *= -1;
            voltage += voltageShift;

            double frequencyShift = (double)(rnd.Next(10) - 5) / 100.0;
            if (frequency + frequencyShift > 50.15 || frequency + frequencyShift < 49.85)
                frequencyShift *= -1;
            frequency += frequencyShift;

            double powerShift = rnd.Next(20) - 10;
            if (power + powerShift > 1200 || power + powerShift < 20)
                powerShift *= -1;
            power += powerShift;

            _dataSets["Voltage"].Add(voltage);
            _dataSets["Frequency"].Add(frequency);
            _dataSets["Power"].Add(power);

            startDate += TimeSpan.FromMinutes(1);
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var chartData = new ChartData
                {
                    Labels = _labels,
                    Datasets = BuildDatasets()
                };

            await _lineChart.InitializeAsync(chartData, _lineChartOptions!);
        }
    }

    private List<IChartDataset> BuildDatasets()
    {
        var datasets = new List<IChartDataset>();

        var colors = ColorBuilder.CategoricalTwelveColors;
        int colourIndex = 0;
        foreach (var col in _dataSets.Keys)
        {

            var dataset = new LineChartDataset
                {
                    Label = col,
                    Data = new List<double>(_dataSets[col]),
                    BackgroundColor = new List<string> { colors[colourIndex] },
                    BorderColor = new List<string> { colors[colourIndex] },
                    BorderWidth = new List<double> { 2 },
                    HoverBorderWidth = new List<double> { 4 },
                    PointBackgroundColor = new List<string> { colors[colourIndex] },
                    PointRadius = new List<int> { 0 }, // hide points
                    PointHoverRadius = new List<int> { 4 },
                    YAxisID = col
                };
            datasets.Add(dataset);
            colourIndex++;
        }
        return datasets;
    }
}

Code snippet above to show a general case for what I'm trying to achieve.

What we do as a business is to supply "Behind the meter" microgrid solutions to industrial sites that require power integration from multiple different generation sources (Solar, Diesel generators etc).
We do this through a network of distributed processing modules that control the individual power assets. Each one of these processing modules has a Human Machine Interface (HMI) running on it for the operating engineer to be able to access the module both for control, and in the case of the chart above, troubleshooting.
The requirement is that the engineer be able to graph up to twelve different variables (out of about 200) at a time that are captured at a 0.5 second interval to see if there are any issues present on the device. As you can see from the example, the variables can have wildly different scales. This means plotting them on the same Y-Axis reduces the effectiveness of the display. Having them each on their own Y-Axis gives a much better result for the engineer.

This all seems to work fine, except that there appears to be no way in the LineChartOptions to specify the colour for each Y-Axis scale. Only the 'default' scale denoted by "Y". Having the ability to colour the Y-Axis scale to be the same as the dataset would just add that little bit more clarity.

I did have a brief look at Chart.js and it seemed to me that the facility was supported but Javascript isn't really my thing so I'm not sure.