Customization of layout algorithm for treemap

Question

I'm new to using charts, as I understood I need threemap chart for this (using highcharts library for React). I'm trying to build an algorithm for my chart, with a treemap type, but didn't get success. I'll attach an image of what I need to do, maybe someone can help me do this? image

Find solution to build chart in proper way

Answer 1

That's correct, you need to build your custom algorithm to create the designed chart. You can for example add another child-point and present it as a parent. Example below:

function customAlgorithm(parent, children) {
  const childrenAreas = [];
  const isSecondLevel = children[0].level === 2;
  let x = 0;

  children.forEach((child, index) => {
    const height = isSecondLevel ? parent.height / 2 : parent.height;
    const y = isSecondLevel ? parent.height / 2 : 0;

    if (isSecondLevel && index === 0) {
      childrenAreas.push({
        x: 0,
        y: 0,
        width: parent.width,
        height: parent.height / 2
      });
    } else {
      const width = isSecondLevel ?
        parent.width * (child.val / (parent.val - children[0].val)) :
        parent.width * (child.val / parent.val);

      childrenAreas.push({
        x,
        y,
        width,
        height
      });

      x += width;
    }
  });

  return childrenAreas;
}

Highcharts.seriesTypes.treemap.prototype.customAlgorithm = customAlgorithm;

---

Live demo: https://jsfiddle.net/BlackLabel/z5v4wfme/

Docs: https://www.highcharts.com/docs/chart-and-series-types/treemap