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%"
/>