Question 241615 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Unable to render the chart with custom chart component

I am a newbie to react typescript and working on rendering charts with custom components. I have a component called StackedDonutChart which is created with Highcharts

`export interface StackedDonutChartProps  {
  data: any[];
  colors: any[];
  size?: number;
};`



 

Object.keys(this.colors).forEach(key => {
         if (this.dashboardStore.systemHealthValueTotals.hasOwnProperty(key)) {
           gaugeData.push({
             name: key,
             value: this.dashboardStore.systemHealthValueTotals[key],
             color: this.colors[key]
           });
         }
       });

and passing to my stackedDoutChart component as

 <StackedDonutChart 
      data={gaugeData} 
      colors={[this.colors]} />

but I could only see the below attached image instead of chart. In the console I could see everything is passing fine like below, and this.colors is having the value of

    availability
: 
"#A78D34"
lifecycle
: 
"#E0E0E0"
maintenance
: 
"#00D7D5"
performance
: 
"#0071B8"

: 0 {y: 97, color: ‘#0071B8’} 1 : {y: 81, color: ‘#A78D34’} length :
2 [[Prototype]] : Array(0)

enter image description here

It is giving the chart like this, even though the data is showing in the console. Please help me with this.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    let chartData: any[] = [];  
let chartColors: string[] = [];          
Object.keys(this.colors).forEach(key => {       
if(this.dashboardStore.systemHealthValueTotals.hasOwnProperty(key)) {  
const value = this.dashboardStore.systemHealthValueTotals[key];         
const color = this.colors[key];          
chartData.push(value);         
chartColors.push(color);         
gaugeData.push({name: key, value: value, color: color });

  2. 0

    Here is an example of how to correctly pass colors or other options to the chart using props:

    Demo: https://codesandbox.io/s/highcharts-react-typescript-pass-options-using-props-rzgc58?file=/index.tsx

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search