Barcode Chart

Displays values using a series of bars with varying heights. This provides a unique and visually striking way to represent data, often used for categorical data. It is useful for comparing the relative frequencies or magnitudes of different categories, such as the distribution of customer preferences or the frequency of different events.

Chart:

Code:

  const { muze, getDataFromSearchQuery } = viz;
  
  const data = getDataFromSearchQuery();

  const ColumnField = "population_percent";
  const RowField = "age";

  muze
    .canvas()
    .columns([ColumnField])
    .rows([RowField])
    .layers([
      {
        mark: "tick",
        encoding: {
          color: {
            value: () => {
              return "#000";
            },
          },
        },
      },
    ])
    .config({
      autoGroupBy: { disabled: true },
      axes: {
        x: {
          showAxisLine: false,
          domain: [0, 10],
          tickFormat: (dataInfo) => {
            return `${dataInfo.formattedValue}%`;
          },
        },
        y: {
          showAxisLine: true,
          ordering: {
            type: "custom",
            values: [
              "≥80",
              "70-79",
              "60-69",
              "50-59",
              "40-49",
              "30-39",
              "20-29",
              "10-19",
              "<10",
            ],
          },
        },
      },
    })
    .data(data)
    .mount("#chart"); // mount your chart