title: How to rename the Apex donut chart labels
body: <p>I am a beginner at react. I am trying to get the number of Open, Handled, and Pending tickets in the database. Therefore I have used the Axios and am obtaining the data from the database from which I am calculating the number of Open, Pending, and Handled tickets. These are based on values to the donut chart.  I am trying to rename the donut chat legend labels into &quot;Open&quot;, &quot;Handled&quot; and &quot;Pending&quot;, but it isn't getting renamed. The output that I get is:
  <a href="https://i.stack.imgur.com/32avG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/32avG.png" alt="chart" /></a>
  That is the default names such as &quot;series 1, series 2, series 3&quot; are only getting displayed. How to rename the legend labels as above.</p>
  <pre><code>import React, {Component} from &quot;react&quot;;
  import GridWrapper from &quot;../helpers/gridWrapper&quot;;
  import Chart from 'react-apexcharts'
  import ContentWrapper from &quot;../helpers/contentWrapper&quot;;
  import GridWrapperL from &quot;../helpers/twoSideBySideWrapper/gridWrapperL&quot;;
  import axios from &quot;axios&quot;;
  
  
  export default class Charts extends Component{
   
  
  
    constructor(props) {
      super(props);
  
      this.state = {
        options: {
          chart: {
            id: 'apexchart-example'
          },
        },
        series: [10,20,30]
      }
    }
    async componentDidMount(){
      const salary=[]; const age=[]; var Pending=0; var Open=0; var Handled=0;
      await axios.get('http://localhost:5000/tickets').then (Response=&gt;{
       console.log(&quot;Response&quot; , Response.data.ticket);
       const data=[] = Response.data.ticket;
       const emp_name=[];
       const OpenArr=[] , HandleArr=[] , PendingArr=[];
        data.forEach(element =&gt; {
    
           
          if(element.ticketStatus == &quot;Pending&quot;){
           
            Pending = Pending+1;
          }
          if(element.ticketStatus==&quot;Open&quot;){
            Open =Open+1;
          }
  
          if(element.ticketStatus ==&quot;Handled&quot;){
            Handled=Handled+1;
          }
        });
       
     
        this.setState({
          options: {
            chart: {
              id: 'apexchart-example'
            },
            xaxis:{
              categories:emp_name
            },
        
          },
  
        series:[Open,Handled,Pending],
        chartOptions: {
          labels: ['Open', 'Handled', 'Pending']
        }
        
        })
      })
      .catch(err =&gt;{
        console.log(&quot;error&quot;, err)
      })
  
    }
   
    render(){
    return(
   
          &lt;center&gt;
      &lt;div&gt;
        Apex
        {/* We can change the type by simply typing &quot;line&quot; */}
        &lt;Chart options={this.state.options} series={this.state.series} chartOptions={this.state.chartOptions} type=&quot;donut&quot; width={1000} height={520} /&gt;
      &lt;/div&gt;
      &lt;/center&gt;
   
    );
    }
  };
  </code></pre>