Is there a name for this type of graph and can this be created using a chart engine?

Question

I saw this kind of graphs a few decades ago being used in an automotive industry book written in the 1980s and been more or less fascinated by them ever since, wondering how to create similar timelines on the fly. It would be extremely useful in my upcoming hobby project as I see no other good way to perfectly visualize this type of data.

Attached a simple mock-up (actually very much like how the chart is supposed to look), along with the sample data the chart is based on.

product evolution chart product evolution table

The product characteristic on the Y axis could be many things, like engine power, weight, volume, length, max speed, it's not really important what it is, I just named it capacity here. But it needs to be there to properly align the products on the chart, so a typical timeline with no actual Y axis values is just not enough for the purpose. I also thought could this thing be tackled with just labeled data series or something, sorry for not knowing the proper terms.

So, I'm mainly interested in knowing the name of this chart variant and are there any examples online. I have searched but haven't really found what I'm looking for.

Secondly, could something like this be accomplished using any of these chart engines: Google Charts, HighCharts, Chart.js, ApexCharts, or Apache ECharts.

I'm thinking about publishing on WordPress, but MediaWiki or some another popular platform is not completely out of the question either. However, figuring out this graph challenge is naturally the first step here. The project would be a community effort, but the contributors shouldn't have to worry about any chart creation, just inputting tabular data.

I would highly appreciate any possible answers or tips.

Answer 1

You can create such a chart with the Highcharts library using a columnrange series.

Highcharts.chart('container', {
  chart: {
    type: 'columnrange',
    inverted: true
  },
  colors: ['black'],
  title: {
    text: 'Product evolution 1985 - 2000'
  },
  legend: {
    enabled: false
  },
  xAxis: {
    /* min: 50,
    max: 600, */
    tickInterval: 50,
  },
  data: {
    csv: document.getElementById('csv').innerHTML,
    seriesMapping: [{
      x: 0,
      low: 1,
      high: 2,
      label: 3
    }]
  },
  yAxis: {
    title: {
        text: ''
    }
  },
  tooltip: {
    useHTML: true,
    formatter: function() {
      const point = this;

      return `
        <div>
            <b>${point.point.label}</b><br/>
          Capacity: ${point.point.x}<br/>
          Range: ${point.point.low} - ${point.point.high}
        </div>
      `;
    }
  },
  plotOptions: {
    columnrange: {
        groupPadding: 0,
      pointPadding: 0,
      dataLabels: {
        enabled: true,
        inside: true,
        formatter: function(e) {
          if (e.align == "left") return this.point.label;
        }
      }
    }
  },
});

<script src="https://code.highcharts.com/11.3/highcharts.js"></script>
<script src="https://code.highcharts.com/11.3/highcharts-more.js"></script>
<script src="https://code.highcharts.com/11.3/modules/data.js"></script>

<div id="container"></div>
<pre id="csv" style="display:none">
Capacity, Released, Discontinued, Product
50,
100, 1986, 1994, AB 1
150, 1994, 1997, AC 1
200, 1988, 1994, AB 2
250, 1994, 1997, AC 2
300, 1989, 1991, BH 3
350, 1991, 1995, BK 3
450, 1995, 1999, CC 5
500, 1993, 1995, CB 5
600
</pre>

Demo: https://jsfiddle.net/BlackLabel/4der19cw/
API: https://api.highcharts.com/highcharts/data