---
title: Simple Usage
order: 1
---

本 Demo 演示一行文字的用法。

````jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@alifd/next';
import useCustTooltip from 'bx-tooltip';
import { Chart, Geom, Axis, Tooltip } from 'bizcharts';

const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 },
];

const Basic = () => {
  const [BxChart, CustTooltip] = useCustTooltip.create(Chart, Tooltip);
  return (
    <div>
      <BxChart height={150} padding='auto' data={data} forceFit>
        <Axis name='year' />
        <Axis name='value' />
        <Geom type='line' position='year*value' />
        <Geom type='point' position='year*value' />
        <CustTooltip enterable>
          {(title, items) => {
            return (
              <>
                自定义tooltip <br />
                title: {title}
                {items.map((it, idx) => (
                  <div key={idx}>
                    color: {it.color}
                    <br />
                    数据: {it.point._origin.value}
                    <br />
                    <Button type='primary'>详细信息</Button>
                  </div>
                ))}
              </>
            );
          }}
        </CustTooltip>
      </BxChart>
    </div>
  );
};

const Demo = () => (
  <div>
    {[1, 2, 3, 4].map((v) => (
      <Basic key={v} />
    ))}
  </div>
);

ReactDOM.render(<Demo />, mountNode);
````