Candlestick

Candlesticks are used to visualize the movement of data over a time period by plotting the open, close, high, and low values of a dataset.

Basic

See the full API here. Typically composed with VictoryChart to create full charts.

Live View

Live Editor

<VictoryChart
  domainPadding={{ x: 25 }}
  theme={VictoryTheme.clean}
>
  <VictoryCandlestick
    data={[
      {
        x: "3/1/23",
        open: 5,
        close: 10,
        high: 15,
        low: 0,
      },
      {
        x: "3/2/23",
        open: 10,
        close: 15,
        high: 20,
        low: 5,
      },
      {
        x: "3/3/23",
        open: 15,
        close: 20,
        high: 22,
        low: 10,
      },
      {
        x: "3/4/23",
        open: 20,
        close: 10,
        high: 25,
        low: 7,
      },
      {
        x: "3/5/23",
        open: 10,
        close: 8,
        high: 15,
        low: 5,
      },
    ]}
  />
</VictoryChart>

Candlestick - Horizontal

Candlestick charts can be rendered horizontally by setting the horizontal prop to true. This prop can be applied to either VictoryChart or VictoryBoxPlot.

Live View

Live Editor

<VictoryChart
  horizontal
  domainPadding={{ x: 25 }}
  theme={VictoryTheme.clean}
>
  <VictoryCandlestick
    data={[
      {
        x: "3/1/23",
        open: 5,
        close: 10,
        high: 15,
        low: 0,
      },
      {
        x: "3/2/23",
        open: 10,
        close: 15,
        high: 20,
        low: 5,
      },
      {
        x: "3/3/23",
        open: 15,
        close: 20,
        high: 22,
        low: 10,
      },
      {
        x: "3/4/23",
        open: 20,
        close: 10,
        high: 25,
        low: 7,
      },
      {
        x: "3/5/23",
        open: 10,
        close: 8,
        high: 15,
        low: 5,
      },
    ]}
  />
</VictoryChart>

Candlestick - Labels

Candlestick charts can be labeled by setting the labels prop to true. By default this will show all labels.

It's also possible to control each label individually by using the specific label properties defined in the VictoryCandlestick API.

Live View

Live Editor

<VictoryChart
  domainPadding={{ x: 25 }}
  theme={VictoryTheme.clean}
>
  <VictoryCandlestick
    labels
    data={[
      {
        x: "3/1/23",
        open: 5,
        close: 10,
        high: 15,
        low: 0,
      },
      {
        x: "3/2/23",
        open: 10,
        close: 15,
        high: 20,
        low: 5,
      },
      {
        x: "3/3/23",
        open: 15,
        close: 20,
        high: 22,
        low: 10,
      },
      {
        x: "3/4/23",
        open: 20,
        close: 10,
        high: 25,
        low: 7,
      },
      {
        x: "3/5/23",
        open: 10,
        close: 8,
        high: 15,
        low: 5,
      },
    ]}
  />
</VictoryChart>

Candlestick - Label Functions

The labels prop can also accept a function to customize the candlestick label. When using a function, the other labels will need to be set using their specific props in the VictoryCandlestick API.

Live View

Live Editor

<VictoryChart
  domainPadding={{ x: 25 }}
  theme={VictoryTheme.clean}
>
  <VictoryCandlestick
    labels={({ datum }) => datum.x}
    openLabels={({ datum }) =>
      `->${datum.open}`
    }
    data={[
      {
        x: "3/1/23",
        open: 5,
        close: 10,
        high: 15,
        low: 0,
      },
      {
        x: "3/2/23",
        open: 10,
        close: 15,
        high: 20,
        low: 5,
      },
      {
        x: "3/3/23",
        open: 15,
        close: 20,
        high: 22,
        low: 10,
      },
      {
        x: "3/4/23",
        open: 20,
        close: 10,
        high: 25,
        low: 7,
      },
      {
        x: "3/5/23",
        open: 15,
        close: 8,
        high: 15,
        low: 5,
      },
    ]}
  />
</VictoryChart>

Candlestick - Label Orientation

The labelOrientation prop can be used to control the orientation of the labels.

Live View

Live Editor

<VictoryCandlestick
  theme={VictoryTheme.clean}
  labels
  labelOrientation={{
    low: "bottom",
    high: "top",
  }}
  data={[
    {
      x: "3/1/23",
      open: 5,
      close: 10,
      high: 15,
      low: 0,
    },
    {
      x: "3/2/23",
      open: 10,
      close: 15,
      high: 20,
      low: 5,
    },
    {
      x: "3/3/23",
      open: 15,
      close: 20,
      high: 22,
      low: 10,
    },
    {
      x: "3/4/23",
      open: 20,
      close: 10,
      high: 25,
      low: 7,
    },
    {
      x: "3/5/23",
      open: 10,
      close: 8,
      high: 15,
      low: 5,
    },
  ]}
/>

Candlestick - Time Scales

Candlestick charts can leverage d3-scale to handle time scales. The x prop can be set to a Date Object.

Live View

Live Editor

<VictoryChart
  domainPadding={{ x: 25 }}
  theme={VictoryTheme.clean}
  scale={{ x: "time" }}
>
  <VictoryAxis
    tickFormat={(t) =>
      `${t.getDate()}/${t.getMonth()}`
    }
  />
  <VictoryAxis dependentAxis />
  <VictoryCandlestick
    data={[
      {
        x: new Date(2016, 6, 1),
        open: 5,
        close: 10,
        high: 15,
        low: 0,
      },
      {
        x: new Date(2016, 6, 2),
        open: 10,
        close: 15,
        high: 20,
        low: 5,
      },
      {
        x: new Date(2016, 6, 3),
        open: 15,
        close: 20,
        high: 22,
        low: 10,
      },
      {
        x: new Date(2016, 6, 4),
        open: 20,
        close: 10,
        high: 25,
        low: 7,
      },
      {
        x: new Date(2016, 6, 5),
        open: 10,
        close: 8,
        high: 15,
        low: 5,
      },
    ]}
  />
</VictoryChart>

Candlestick - Animation

Candlestick charts can be animated with the animate prop.

Live View

Live Editor

function App() {
  const [data, setData] =
    React.useState(getData());

  React.useState(() => {
    const setStateInterval =
      window.setInterval(() => {
        setData(getData());
      }, 4000);

    return () => {
      window.clearInterval(
        setStateInterval,
      );
    };
  }, []);

  return (
    <VictoryChart
      domainPadding={{ x: 25 }}
      theme={VictoryTheme.clean}
    >
      <VictoryCandlestick
        animate={{ duration: 1000 }}
        data={data}
      />
    </VictoryChart>
  );
}

function getData() {
  return _.range(5).map((i) => {
    return {
      x: `3/${i + 1}/23`,
      open: _.random(5, 10),
      close: _.random(10, 20),
      high: _.random(20, 25),
      low: _.random(1, 5),
    };
  });
}

render(<App />);

Candlestick - Styles

Chart styling can be customized by using the theme or overriding the style prop on the component.

Live View

Live Editor

<VictoryChart
  domainPadding={{ x: 25 }}
  theme={VictoryTheme.clean}
>
  <VictoryCandlestick
    labels={() => "labels"}
    closeLabels={() => "close"}
    highLabels={() => "high"}
    lowLabels={() => "low"}
    openLabels={() => "open"}
    data={[
      {
        x: "3/1/23",
        open: 5,
        close: 10,
        high: 15,
        low: 0,
      },
      {
        x: "3/2/23",
        open: 10,
        close: 15,
        high: 20,
        low: 5,
      },
      {
        x: "3/3/23",
        open: 15,
        close: 20,
        high: 22,
        low: 10,
      },
      {
        x: "3/4/23",
        open: 20,
        close: 10,
        high: 25,
        low: 7,
      },
      {
        x: "3/5/23",
        open: 10,
        close: 8,
        high: 15,
        low: 5,
      },
    ]}
    style={{
      data: {
        fill: "#c43a31",
        fillOpacity: 0.7,
        stroke: "#c43a31",
        strokeWidth: 3,
      },
      labels: {
        fill: "tomato",
        padding: 2,
      },
      closeLabels: {
        fill: "orange",
        padding: 2,
      },
      highLabels: {
        fill: "blue",
        padding: 2,
      },
      lowLabels: {
        fill: "teal",
        padding: 2,
      },
      openLabels: {
        fill: "green",
        padding: 2,
      },
    }}
  />
</VictoryChart>

Candlestick - Events

Events can be handled by passing an array of event objects to the events prop on the component. Each event object should specify a target and an eventHandlers object. See the events guide for more information.

Live View

Live Editor

<VictoryChart
  domainPadding={{ x: 25 }}
  theme={VictoryTheme.clean}
>
  <VictoryCandlestick
    events={[
      {
        target: "data",
        eventHandlers: {
          onClick: () => {
            return [
              {
                target: "data",
                mutation: (props) => {
                  const fill =
                    props.style &&
                    props.style.fill;
                  return fill ===
                    "#c43a31"
                    ? null
                    : {
                        style: {
                          fill: "#c43a31",
                        },
                      };
                },
              },
            ];
          },
        },
      },
    ]}
    data={sampleDataDates}
  />
</VictoryChart>

Candlestick - Brush and Zoom

Candlestick charts support zoom and pan behavior by using the VictoryZoomContainer and VictoryBrushContainer components. See the Pan & Zoom and Data Selection guides for more information.

Live View

Live Editor

function App() {
  const sampleData = [
    {
      x: 5,
      open: 5,
      close: 10,
      high: 15,
      low: 0,
    },
    {
      x: 10,
      open: 10,
      close: 15,
      high: 20,
      low: 5,
    },
    {
      x: 15,
      open: 15,
      close: 20,
      high: 22,
      low: 10,
    },
    {
      x: 20,
      open: 20,
      close: 10,
      high: 25,
      low: 7,
    },
    {
      x: 25,
      open: 10,
      close: 8,
      high: 15,
      low: 5,
    },
  ];
  const [state, setState] = React.useState({});

  const handleZoom = (domain) => {
    setState({ selectedDomain: domain });
  };

  const handleBrush = (domain) => {
    setState({ zoomDomain: domain });
  };

  return (
    <div>
      <VictoryChart
        theme={VictoryTheme.clean}
        domainPadding={{ x: 25 }}
        containerComponent={
          <VictoryZoomContainer
            zoomDimension="x"
            zoomDomain={state.zoomDomain}
            onZoomDomainChange={handleZoom}
          />
        }
      >
        <VictoryCandlestick
          data={sampleData}
        />
      </VictoryChart>

      <VictoryChart
        height={170}
        theme={VictoryTheme.clean}
        domainPadding={{ x: 25 }}
        padding={{top: 0, left: 50, right: 50, bottom: 30}}
        containerComponent={
          <VictoryBrushContainer
            brushDimension="x"
            brushDomain={state.selectedDomain}
            onBrushDomainChange={handleBrush}
          />
        }
      >
        <VictoryAxis />
        <VictoryCandlestick data={sampleData} />
      </VictoryChart>
    </div>
  )
}

render(<App />);

Standalone Rendering

Box Plot charts can be rendered outside a VictoryChart.

Live View

Live Editor

<VictoryCandlestick
  data={[
    {
      x: "3/1/23",
      open: 5,
      close: 10,
      high: 15,
      low: 0,
    },
    {
      x: "3/2/23",
      open: 10,
      close: 15,
      high: 20,
      low: 5,
    },
    {
      x: "3/3/23",
      open: 15,
      close: 20,
      high: 22,
      low: 10,
    },
    {
      x: "3/4/23",
      open: 20,
      close: 10,
      high: 25,
      low: 7,
    },
    {
      x: "3/5/23",
      open: 10,
      close: 8,
      high: 15,
      low: 5,
    },
  ]}
  theme={VictoryTheme.clean}
/>

They can also be embeded in other SVG components by using the standalone prop.

Live View

Live Editor

<svg
  width={300}
  height={300}
  style={{
    display: "block",
    margin: "0 auto",
  }}
>
  <circle
    cx={150}
    cy={150}
    r={150}
    fill="#9ded91"
  />
  <VictoryCandlestick
    standalone={false}
    width={300}
    height={300}
    padding={{ left: 10, right: 10 }}
    data={[
      {
        x: "3/1/23",
        open: 5,
        close: 10,
        high: 15,
        low: 0,
      },
      {
        x: "3/2/23",
        open: 10,
        close: 15,
        high: 20,
        low: 5,
      },
      {
        x: "3/3/23",
        open: 15,
        close: 20,
        high: 22,
        low: 10,
      },
      {
        x: "3/4/23",
        open: 20,
        close: 10,
        high: 25,
        low: 7,
      },
      {
        x: "3/5/23",
        open: 10,
        close: 8,
        high: 15,
        low: 5,
      },
    ]}
    theme={VictoryTheme.clean}
  />
</svg>

Basic​

Candlestick - Horizontal​

Candlestick - Labels​

Candlestick - Label Functions​

Candlestick - Label Orientation​

Candlestick - Time Scales​

Candlestick - Animation​

Candlestick - Styles​

Candlestick - Events​

Candlestick - Brush and Zoom​

Standalone Rendering​

Basic

Candlestick - Horizontal

Candlestick - Labels

Candlestick - Label Functions

Candlestick - Label Orientation

Candlestick - Time Scales

Candlestick - Animation

Candlestick - Styles

Candlestick - Events

Candlestick - Brush and Zoom

Standalone Rendering