Apex charts, setting series data from array in state

Question

In my react app, I'm getting results from pouchDB that I want to use as the data points in my series for apexCharts.

I'm getting the results and putting them in state, called maxCalories, and when logging in the console they are in this format:

So I want those 7 numbers (all with the index name of caloriesBurned to be my data in the series for the chart but I'm currently getting NaN on the graph.

Here's the full code, how can I set these to the correct format to use them in the chart data?

import React, { Component } from "react";
import Chart from "react-apexcharts";
import DB from '../../db';
import * as moment from 'moment';

class TrendsComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      maxCalories: '',
      calorieRecord: {
            caloriesConsumed: '',
            caloriesBurned: '',
            createdAt: this.newestDate,
            updatedAt: undefined
      },
      caloriesDB: new DB('calorie-records'),
      calories: {},
      calorieElements: null,
      options: {
        },
        chart: {
          toolbar: {
            show:false
          },
          id: "basic-bar"
        },
        xaxis: {
          categories: ['3/20', '3/21', '3/22', '3/23', '3/24', '3/25','3/26']
        }
      },
      series: [
        {
          name: "Trend (tracked)",
          data: {this.maxCalories}
        }
      ]
    };
  }


   componentDidMount(){
        this.setMax();
    }


      setMax = () => {
        this.state.caloriesDB.db.find({
          selector: {
            $and: [
              {_id: {"$gte": null}},
              {caloriesBurned: {$exists: true}},
              {createdAt: {$exists: true}}
            ]
          },
          fields: ['caloriesBurned', 'createdAt'],
          sort: [{'_id':'desc'}],
          limit: 7
        }).then(result => {
          console.log('max');
          console.log(result);
          const newDocs = result.docs;
          this.setState({
            maxCalories: newDocs.map(docs => docs)
          });
          console.log('maxCalories');
          console.log(this.state.maxCalories);

        }).catch((err) =>{
          console.log(err);
        });
      }

  render() {


    return (

          <div className="mixed-chart">

            <Chart

              options={this.state.options}
              series={this.state.series}
              type="area"
              stacked="true"
              width="700"
            />
          </div>



    );
  }
}

export default TrendsComponent;

Answer 1

I had the same problem in my project. And I spent a lot of time in looking for solution. So here what I get:

const FinacialResultChart = (props) => {

  const options = {
    chart: {
      toolbar: {
        show: false
      },
      animations: {
        enabled: false
      }
    },
    stroke: {
      curve: "smooth",
      dashArray: [0, 8],
      width: [4, 2]
    },
    grid: {
      borderColor: props.labelColor
    },
    legend: {
      show: false
    },
    colors: [props.dangerLight, props.strokeColor],
    fill: {
      type: "gradient",
      gradient: {
        shade: "dark",
        inverseColors: false,
        gradientToColors: [props.primary, props.strokeColor],
        shadeIntensity: 1,
        type: "horizontal",
        opacityFrom: 1,
        opacityTo: 1,
        stops: [0, 100, 100, 100]
      }
    },
    markers: {
      size: 0,
      hover: {
        size: 5
      }
    },
    xaxis: {
      labels: {
        style: {
          colors: props.strokeColor
        }
      },
      axisTicks: {
        show: false
      },
      categories: [
        "Январь",
        "Февраль",
        "Март",
        "Апрель",
        "Май",
        "Июнь",
        "Июль",
        "Август",
        "Сентябрь",
        "Октябрь",
        "Ноябрь",
        "Декабрь"
      ],
      axisBorder: {
        show: false
      },
      tickPlacement: "on"
    },
    yaxis: {
      tickAmount: 5,
      labels: {
        style: {
          color: props.strokeColor
        }
      }
    },
    tooltip: {
      x: { show: false }
    }
  }

  const data = [
    {
      name: "Итоговый результат",
      data: props.userData.traidingMonth
    }
  ]

  return (
        <Chart
          options={options}
          series={data}
          type="line"
          height={280}
        />
  )
}

export default FinacialResultChart

So you need to change your class to const, and push all your props (api data for example) into your children chart component. In chart options you can get the chart data with props.data