What's the best way to graph datasets with different labels?

[AjaniBilby]

I'm trying to graph a horizontal bar chart, where I want the different "groups" to be colour coded, and you can click on the legend to hide a group. However every option I can find to get something like this working has a lot of painful side affects.

This is the best I've come up with so far

<Client.Chart
  type="bar"
  data={{
    // 1: works pretty well, but has zero sized bars for each label creating weird spacing
    labels: data.map(x => x.label),
    datasets: [{
      label: 'Level',
      data: data.map(x => x.type === "Level" ? x.value : null),
    },{
      label: 'Kind',
      data: data.map(x => x.type === "Kind" ? x.value : null),
    },{
      label: 'Material',
      data: data.map(x => x.type === "Material" ? x.value : null),
    },{
      label: 'Resolution',
      data: data.map(x => x.type === "Resolution" ? x.value : null),
    }]

    // 2: renders same as (1) but now order is grouped by type
    // datasets: [
    // 	{ data: data.filter(x => x.type === "Material").map(x => ({ x: x.value, y: x.label })) },
    // 	{ data: data.filter(x => x.type === "Level").map(x => ({ x: x.value, y: x.label })) },
    // 	{ data: data.filter(x => x.type === "Kind").map(x => ({ x: x.value, y: x.label })) },
    // 	{ data: data.filter(x => x.type === "Resolution").map(x => ({ x: x.value, y: x.label })) },
    // ]

    // 3: doesn't render anything
    // datasets: [{
    // 	label: 'Level',
    // 	data: levels.map(x => x.energy),
    // 	labels: levels.map(x => x.name)
    // },{
    // 	label: 'Resolution',
    // 	data: resolutions.map(x => x.energy),
    // 	labels: resolutions.map(x => x.name)
    // },{
    // 	label: 'Kind',
    // 	data: kinds.map(x => x.energy),
    // 	labels: kinds.map(x => x.name)
    // },{
    // 	label: 'Material',
    // 	data: materials.map(x => x.energy),
    // 	labels: materials.map(x => x.material.short || x.material.name)
    // }]
  }}
  options={{
    indexAxis: "y",
    scales: { x: { beginAtZero: true } },
    plugins: {
      legend: { display: true, position: "top" }
    },
    interaction: { intersect: false, mode: 'index' }
  }}
  style={{ width: "100%", height: lineHeight * data.length + offset + "px" }}
  hideZeros
/>

Option 1 is the closest I can get visually to what I want, but there are clearly four bars on each label with the other three all being zero causing weird spacing, and even weirder hovering behaviour.

Also unfortunately the labels of different groups don't disappear when I hide the group, but I presume that's just something I'm going to have to live with.

All I really want to make this passable is to get rid of the 0 value bars on a label.
Not sure if it's possible, but if anyone has any suggestions they would be much appreciated

[AjaniBilby]

Also FYI, the reason that chart setup looks a little weird is that's the server side render of the content, which gets JSONified and remounted on the client like this:

export function Chart(props: {
  type:    ChartConfiguration["type"],
  data:    ChartConfiguration["data"] & { datasets: Array<TrendLine>},
  options: ChartConfiguration["options"],
  style?: CSSProperties
  hideZeros?: boolean
}) {
  const chartRef = useRef <HTMLCanvasElement> (null);
  const chartInstanceRef = useRef<ChartJS | null>(null);

  useEffect(() => {
    if (!chartRef.current) return;

    const ctx = chartRef.current.getContext("2d");
    if (!ctx) return;

    // Destroy existing chart instance
    if (chartInstanceRef.current) chartInstanceRef.current.destroy();

    if (props.hideZeros) {
      props.options ||= {};
      props.options.plugins ||= {};
      props.options.plugins.tooltip ||= {};
      props.options.plugins.tooltip.filter = function(tooltipItem) {
        return tooltipItem.parsed.x !== null && tooltipItem.parsed.x !== 0;
      }
      props.options.plugins.tooltip.callbacks ||= {};
      props.options.plugins.tooltip.callbacks.title = function(tooltipItems) {
        if (tooltipItems.length === 0) return '';
        return tooltipItems[0].label;
      }
    }

    // Create new chart instance
    chartInstanceRef.current = new ChartJS(ctx, {
      type: props.type,
      data: props.data,
      options: props.options,
    });

    return () => {
      if (!chartInstanceRef.current) return;
      chartInstanceRef.current.destroy();
      chartInstanceRef.current = null;
    };
  }, []);

  return <div style={{ display: "block" }}>
    <canvas ref={chartRef} style={props.style}></canvas>
  </div>;
}

Also the usage of this table in production has 86 different labels at the moment, it's basically a breakdown of the time costs of each level that can make up a repair.