JSX

<LineChart
  axis={{
    x: {
      scale: 'LINEAR'
    },
    y: {
      ticks: 3
    }
  }}
  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: {
        fill: '#000',
        opacity: 1,
        'shape-rendering': 'auto',
        stroke: '#ccc',
        'stroke-opacity': 0.4,
        'stroke-width': 1,
        visible: true
      },
      ticks: 5
    },
    y: {
      style: {
        fill: '#000',
        opacity: 1,
        'shape-rendering': 'auto',
        stroke: '#ccc',
        'stroke-opacity': 0.4,
        'stroke-width': 1,
        visible: true
      },
      ticks: 5
    }
  }}
  width="100%"
/>