Appearance

On this page

Charts > Arrow Plot ​

The arrow plot shows a change in value with the arrow pointing right to show an increase and left for a decrease.

The Chart ​

Other compatible charts

Change: +NaN%
Download example CSV
Copy HTML

Playground ​

Animation

Duration of animation in ms

Style

Color of positive arrow
Color of negative arrow
Show grid
Show value labels next to dots

Usage Example (with tooltip) ​

vue
<template>
  <ArrowPlot :data="data" @hover="setTooltip" />

  <OTTooltip :info="tooltip">
    <div>
      <span class="font-semibold">Change</span>:
      {{ tooltip.data.x1 > tooltip.data.x2 ? "-" : "+"
      }}{{ Math.abs(tooltip.data.x1 - tooltip.data.x2) }}%
    </div>
  </OTTooltip>
</template>

<script setup>
import useTooltip from "@/functions/useTooltip.js";

const [tooltip, setTooltip] = useTooltip();
</script>

Component API ​

The arrow plot is built with SVG and d3.

Data ​

js
[
  { id: "cat-1", name: "Category 1", x1: 20, x2: 40 },
  { id: "cat-2", name: "Category 2", x1: 80, x2: 30 },
];

Props ​

NameDefaultTypeDescription
data[]ArrayThe dataset
colorArrowPositive#3B82F6StringThe color for arrows pointing right
colorArrowNegative#F59E0BStringThe color for arrows pointing left
showLabelstrueBooleanWhether or not to show value labels
showLegendtrueBooleanWhether or not to show legend labels
xAxisDomain[0, 100]ArrayThe min and max value for x axis
legendLabels['Pre', 'Post']ArrayLabels for legend
labelWidth100NumberThe space for category labels on the left
duration300NumberThe total time of the animation in ms

Dependencies ​

  • d3