[REACT] To display an html chart in the tbar

[umeshaithu]

Hey support,

I have to display a bar chart in the tbar of the grid

 tbar: [
        {
          type: 'container',
          style: 'margin-top:auto',
          width: 'min-content',
          items: [
           {
              style: 'margin-left:auto', 
              html: (
                <BarChart
                  series={[
                    { data: [35, 44, 24, 34] },
                    { data: [51, 6, 49, 30] },
                    { data: [15, 25, 30, 50] },
                    { data: [60, 50, 15, 25] },
                  ]}
                  height={290}
                  xAxis={[{ data: ['Q1', 'Q2', 'Q3', 'Q4'], scaleType: 'band' }]}
                  margin={{ top: 10, bottom: 30, left: 40, right: 10 }}
                />
              ),
            },
          ]
        }
 

But the above is not rendering the chart in my UI. What could be the reason?

[tasnim]

Hi,

You'd need to use it inside of a widget
Docs https://bryntum.com/products/grid/docs/guide/Grid/integration/react/guide#react-component-in-widget

    tbar : [
        {
            type : 'container',
            items : {
                chart : {
                    type : 'widget',
                    html :  <BarChart
                        xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
                        series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
                        width={500}
                        height={300}
                    />
                }
            }
        }
    ]

This should help.

Best of luck ,
Tasnim

[umeshaithu]

This is not helpful. It is taking an empty white place instead of chart..

[tasnim]

Hi,

Please check the attached demo app below that shows how to display the chart in the toolbar

You can run the demo with npm i && npm start

I added style for the toolbar

.b-toolbar {
	height : auto;
}