Are there scroll bars in embedded charts?

Hello there. Currently, I’m just playing with embedded Atlas charts.

One simple example: I have an embedded chart size of 300x300 pixels. If my bar chart grows, can I add scroll bars to my chart and see the complete chart?

Or what’s the best way to resolve it?

Hi @Orlando_Herrera. An embedded chart always scales to fit in an iframe. But it should be possible to use custom CSS to enable scrolling.

Another option is using an embedded dashboard to maintain the size of a chart inside it and introduce scrolling using the fixed height and width options.

Hi Avinash, thank you for your answer.

Currently I’m using JavaScript SDK (not IFrame)
But if an embedded dashboard is used, what about filters?
Can I use custom filters in the same way I use charts ? Example:

<Chart height={'200px'} width={'500px'} filter={{"createdAt": {$gte: new Date(MyDate1)}} chartId={'MyId'}  /> 

You have two options on using filtering inside a dashboard.

  1. We have just released dashboard filtering on embedded dashboards. So if all your charts in the dashboard use a single data source, then you can easily use dashboard filtering to filter all charts. See the attached gif to switch it on.
    You can start using this feature in SDK from Monday onwards. We are updating the SDK on Monday.

  2. You can individually filter each chart in a dashboard by using the below method.


    More details here @mongodb-js/charts-embed-dom - npm (npmjs.com)

Let me know if you face any more hurdles

Dashboard FIlter

@Orlando_Herrera We have updated the SDK today. You can use the embed dashboard filters in the UI and SDK now.

Hi @Avinash_Prasad !! thanks again for your answer.
I wanna share with you, please tell me If I’m using correctly the “dashboard filters” (with JS SDK).

Right, I allowed all fields:

I’m working with React JS, this is my code, as you can see, I’m using “Filter: {}” option

const MyDashboard = ({dashboardId, height, width}) =>{
    const date1 = new Date('2024-02-20')
    const sdk = new ChartsEmbedSDK({baseUrl: 'https://charts.mongodb.com/MybaseurlXXXX'});
    const chartDiv = useRef(null);
    const [rendered, setRendered] = useState(false);
    const [chart] = useState(
        sdk.createDashboard({
            dashboardId: dashboardId, 
            height: height, 
            width: width, 
            filter: { "createdAt": {$gte: date1} },
        }));

So, I can see my dashboard embedded in my webpage, but my Filter is not working, dashboard is showing me all the data without my date filter.

Thanks in advance.

@Avinash_Prasad
Update
It’s working right now.
I just moved the “new Date”, I dont know why, but it works for me:

filter: {"createdAt": {$gte: new Date(date1)}}
1 Like

Glad you got it working

This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.