Search code examples
c#wpflivecharts

LiveCharts2 HeatMap Data Tooltip formating wrong

I'm using a LiveCharts2 heatmap chart to place data onto a grid, so that he user can visually see and compare the values next to each other as they would appear IRL.

Sometimes the color isn't enough, so I would want to hover the mouse over the point to get the exact info.

When I try to do it, I get all the info I want, but it's formatted wrong.

  • Row 1: xAxisValue
  • Row 2: yAxisValue CellValue

Poorly formated tooltip

As you can see, that makes it hard to read the cell value, since it's close to the yAxis.

Ideally I would have it as such:

  • Row 1: xAxisValue
  • Row 2: yAxisValue
  • Row 3: CellValue

But I would be happy even with just

  • Row 1: CellValue

or

  • Row 1: xAxisValue yAxisValue
  • Row 2: CellValue

I tried to learn to do the formating, but I wasn't sucessful. I could maybe get the axis values to format correctly, but I could never get the cell value out into the tooltip separately.

Sounds like it should be a simple thing. Hopefully someone can help.

I removed all my failed from the code, and this is how it looks like right now:

Xaml:

<lvc:CartesianChart x:Name="Chart"
                        Series="{Binding Series}"
                        XAxes="{Binding XAxes}"
                        YAxes="{Binding YAxes}">
</lvc:CartesianChart>

C#:

ObservableCollection<WeightedPoint> oc = new ObservableCollection<WeightedPoint>(wp);
        Series = new ObservableCollection<ISeries>
        {
            new HeatSeries<WeightedPoint>
            {
                HeatMap = new[]
                {
                    new SKColor(0, 0, 0).AsLvcColor(),
                    new SKColor(0, 0, 255).AsLvcColor(),
                    new SKColor(255, 255, 0).AsLvcColor(),
                    new SKColor(255, 0, 0).AsLvcColor(),
                },
                ColorStops = new[]
                {
                    0,
                    0.5,
                    0.9,
                    1
                },
                Values = new ObservableCollection<WeightedPoint>(wp),
            }
        };

        XAxes = new Axis[]
        {
            new Axis
            {
                Labels = dg.LegendW.Select(x => x.ToString()).ToList(),
                
            }
        };

        YAxes = new Axis[]
        {
            new Axis
            {
                Labels = dg.LegendH.Select(x => x.ToString()).ToList()
            }
        };
Solution

  • You can do it like this:

    // …
new HeatSeries<WeightedPoint> {
  // …
  YToolTipLabelFormatter = (point) => $"{point.Model?.Weight}",
  // …
}
// …

    Other options with the x and y values:

    YToolTipLabelFormatter = (point) => $"Value: {point.Model?.Weight}\r\nX: {point.Model?.X}\r\nY: {point.Model?.Y}",