AnyChart / AnyChart-React

Intuitive and easy to use React plugin that allows you to create and work with AnyChart JavaScript Charts
https://www.anychart.com
Apache License 2.0
39 stars 30 forks source link

How i can do multiline line chart with react version ? #1

Closed lawlessnut closed 7 years ago

lawlessnut commented 7 years ago

const lineData = [ { name : "mon" , x:20, y:20}, { name : "tue" , x:10, y:20}, { name : "wed" , x:10, y:20}, { name : "thu" , x:10, y:20}, { name : "fri" , x:10, y:20}, { name : "sat" , x:10, y:20}, { name : "sun" , x:10, y:20}, ] <AnyChart height={400} id="pvtId" data={lineData} type="line" title="P v T" />

chidori commented 7 years ago

First of all you should prepare your data for series.

const multilineData = [
  ["Point 1", 4, 2],
  ["Point 2", 5, 3],
  ["Point 3", 3, 5]
];

or as object

const multilineData = [
  {x: "Point 1", value1: 4, value2: 2},
  {x: "Point 2", value1: 5, value2: 3},
  {x: "Point 3", value1: 3, value2: 5}
];

This data describes 2 series with 3 categories. After that render chart with your settings: <AnyChart height={400} id="pvtId" type="line" title="P v T" /> And re-render it with your data: <AnyChart data={multilineData} />