AnyChart-React icon indicating copy to clipboard operation
AnyChart-React copied to clipboard

Setting Series name

Open mbugbee opened this issue 7 years ago • 3 comments

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

mbugbee avatar Mar 06 '18 23:03 mbugbee

@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
  }

Shestac92 avatar Mar 07 '18 08:03 Shestac92

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.

mbugbee avatar Mar 07 '18 15:03 mbugbee

@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

Shestac92 avatar Mar 08 '18 04:03 Shestac92