import { Axis, Candlestick, Canvas, Chart, jsx } from '@antv/f2';

const data = [
  {
    time: '2017-10-24',
    // 格式为：[open, close, lowest, highest]
    value: [20, 34, 10, 38],
  },
  {
    time: '2017-10-25',
    value: [40, 35, 30, 50],
  },
  {
    time: '2017-10-26',
    value: [31, 38, 33, 44],
  },
  {
    time: '2017-10-27',
    value: [38, 15, 5, 42],
  },
];

const { props } = (
  <Canvas context={context}>
    <Chart data={data}>
      <Axis field="time" />
      <Axis field="value" />
      <Candlestick x="time" y="value" />
    </Chart>
  </Canvas>
);

<Candlestick x="time" y="value" color={{ range: ['#E62C3B', '#0E9976', '#999999'] }} />

<Candlestick x="time" y="value" sizeRatio={0.8} />