100% Stacked Bar Chart

Effectively compares the percentage contribution of each category within different groups. Each bar represents a group, and the stacked segments within the bar show the proportion of each category, ensuring that the total of each bar adds up to 100%. This helps in understanding the relative importance of each category within each group, such as comparing the market share of different products across different regions or the age distribution within different income brackets.

Chart:

Code:

  const { muze, getDataFromSearchQuery } = viz;

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