Line Chart


JSX
<LineChart
  axis={{
    x: {
      height: 20,
      label: 'X Axis',
      margin: 20,
      text: {
        style: {
          dy: '.35em',
          'text-anchor': 'start',
          transform: 'rotate(90)',
          x: 0,
          y: 0
        }
      },
      tickSize: 0
    },
    y: {
      label: 'Y Axis!',
      style: {
        fill: 'none',
        stroke: '#666'
      },
      text: {
        style: {
          fill: '#666'
        }
      },
      tickSize: 20,
      ticks: 3,
      width: 50
    }
  }}
  data={[
    {
      data: [
        {
          x: 1,
          y: 1
        },
        {
          x: 2,
          y: 12
        },
        {
          x: 3,
          y: 3
        },
        {
          x: 4,
          y: 4
        }
      ],
      label: 'test data',
      line: {
        curveType: function noRefCheck() {},
        fill: {
          fill: 'rgba(54, 174, 141, 0.28)',
          show: true
        },
        show: true,
        stroke: '#00a97b',
        strokeDashArray: '10 5',
        strokeDashOffset: 0
      },
      point: {
        fill: '#08697F',
        radius: 10,
        show: true,
        stroke: '#483A3A'
      }
    }
  ]}
  grid={{
    x: {
      style: {
        stroke: '#ccc',
        'stroke-opacity': 0.4
      },
      ticks: 5
    },
    y: {
      height: 20,
      style: {
        stroke: '#ccc',
        'stroke-opacity': 0.4
      },
      ticks: 5
    }
  }}
  width="100%"
/>
xy
11
212
33
44