100% Stacked Area Chart

Illustrates how the proportion of each category within a whole changes over time. The total area of the chart always sums to 100%, providing a clear visualization of the relative contribution of each category throughout the period. This is particularly useful for understanding how the composition of a whole changes over time, such as market share fluctuations or changes in demographic composition.

Chart:

Code:

  const { muze, getDataFromSearchQuery } = viz;

  const data = getDataFromSearchQuery();

  const ColumnField = "Year";
  const RowField = "Horsepower";
  const ColorField = "Origin";
  
  muze
    .canvas()
    .rows([RowField])
    .columns([ColumnField])
    .color(ColorField)
    .layers([
      {
        mark: "area",
        transform: { type: "stack100percent" },
      },
    ])
    .data(data)
    .mount("#chart") // mount your chart