Bar and Tick Chart

Combines bars to represent the main values and ticks to show additional details. This provides a concise and informative visualization, combining the visual impact of bars with the precision of ticks. It is useful for displaying both the overall magnitude and specific details within each category, such as sales figures with specific targets or performance scores with individual contributions.

Chart:

Code:

  muze
    .canvas()
    .columns(["Maker"])
    .rows(["Miles_per_Gallon"])
    .layers([
      {
        mark: "bar",
        encoding: {
          color: {
            value: () => "#8DD3C7",
          },
        },
      },
      {
        mark: "tick",
        encoding: {
          y: "Miles_per_Gallon",
          color: { value: () => "black" },
        },
      },
    ])