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

Setting Series name #5

Open mbugbee opened 6 years ago

mbugbee commented 6 years ago

What's the proper way to set the name of a series with anychart-react?

Shestac92 commented 6 years ago

@mbugbee You can achieve it with customizing anychart-react.jsx file. Find createAndDraw(prevProps) {} function and customize it like this:

createAndDraw(prevProps) {
    var props = Object.assign(prevProps, this.props);
    this.createInstance(props);
    this.drawInstance(props);
    this.instance.getSeries(0).name('Series name');   //set name to the first series
  }
mbugbee commented 6 years ago

ah, editing files in an npm module doesn't seem like a great long term solution as the edit would be reverted anytime the dependency was updated or pulled in other environments. This would also force every chart using anychart-react to have the same series 0 name.

Shestac92 commented 6 years ago

@mbugbee I have a better solution for how you can set a series name and customize deeply your chart. If you do not use an instance property of a component, properties go exactly as they go in AnyChart JavaScript API. An example of such chart configuration below:

// create data
    var data = [
      ["January", 10000],
      ["February", 12000],
      ["March", 18000],
      ["April", 11000],
      ["May", 9000]
    ];

    // create a chart
    var chart = anychart.line();
    // create a line series and set the data
    var series = chart.line(data);
    //set series name
    series.name('Series name');

ReactDOM.render(
  <AnyChart
    width='100%'
    height='100%' 
        instance={chart}
    title="Simple pie chart"
  />, document.getElementById('root'));

This allow setting names to series: seriesname