Is it Possible to display a chart inside a cell of the FlexGrid in React?

Is it Possible to display a chart inside a cell of the FlexGrid in React?

Posted by: abhatt on 25 July 2019, 6:00 pm EST

• 

  abhatt

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 25 July 2019, 6:00 pm EST

• 

  abhatt

  • Post Options:
  • Link
    Copy

  Posted 25 July 2019, 6:17 pm EST

  Using the FlexChart inside a FlexGrid Cell, is it possible to perform

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 26 July 2019, 1:49 am EST

  Hi Aishwariya,

  Yes, you can create a FlexChart inside a FlexGrid cell by handling the formatItem event. Please refer to the sample below:

  https://stackblitz.com/edit/react-3qqzsm

  Regards,
  
  Ashwin

• 

  abhatt

  • Post Options:
  • Link
    Copy

  Posted 26 July 2019, 2:20 pm EST

  Hey Ashwin,

  In the sample the grid cell has width=515 and height =300, but for a smaller space when I changed those parameters the chart gets crop. How do I achieve that even in smaller space the chart remains the space.

  Thanks

• 

  abhatt

  • Post Options:
  • Link
    Copy

  Posted 26 July 2019, 2:21 pm EST - Updated 3 October 2022, 7:48 pm EST

  

  716×492 5.96 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 28 July 2019, 11:55 pm EST

  Hi Aishwariya,

  You will also need to set the width and height of the chart to a smaller value using CSS. Please refer to the code snippet below:

  .wj-flexchart {
    height: 200px;
    width: 300px
  }
  

  You may also refer to the sample below:

  https://stackblitz.com/edit/react-qavpbd

  PS: If the dimensions of the FlexChart go below a certain value, the series will start to overlap and it will not be visible properly.