diff --git a/src/app/custom/translations.tsv b/src/app/custom/translations.tsv
index 45400276be..b4547071a0 100644
--- a/src/app/custom/translations.tsv
+++ b/src/app/custom/translations.tsv
@@ -1074,3 +1074,4 @@
 "import_error"	"Error during import"	"Erreur lors de l'import"
 "aspect_ratio"	"Aspect ratio (caution: if used incorrectly, this may cause page layout problems)"	"Format d'image (attention : si mal utilisé cela peut causer des problèmes de mise en page)"
 "aspect_ratio_none"	"No aspect ratio"	"Aucun format d'image"
+"fullscreen"	"View in full screen"	"Mettre en plein écran"
diff --git a/src/app/js/formats/chart/bubbleChart/BubbleView.js b/src/app/js/formats/chart/bubbleChart/BubbleView.js
index 5209add4cc..d4f5f268c3 100644
--- a/src/app/js/formats/chart/bubbleChart/BubbleView.js
+++ b/src/app/js/formats/chart/bubbleChart/BubbleView.js
@@ -8,6 +8,7 @@ import memoize from 'lodash/memoize';
 import injectData from '../../injectData';
 import Bubble from './Bubble';
 import { getColor } from '../../utils/colorUtils';
+import ZoomableFormat from '../../utils/components/ZoomableFormat';
 
 const styles = {
     container: memoize(({ diameter }) => ({
@@ -19,19 +20,21 @@ const styles = {
 };
 
 export const BubbleView = ({ data, diameter, colorSet }) => (
-    <div style={styles.container({ diameter })}>
-        {data.map(({ data: { _id: key }, r, x, y, value }, index) => (
-            <Bubble
-                key={key}
-                r={r}
-                x={x}
-                y={y}
-                name={key}
-                value={value}
-                color={getColor(colorSet, index)}
-            />
-        ))}
-    </div>
+    <ZoomableFormat>
+        <div style={styles.container({ diameter })}>
+            {data.map(({ data: { _id: key }, r, x, y, value }, index) => (
+                <Bubble
+                    key={key}
+                    r={r}
+                    x={x}
+                    y={y}
+                    name={key}
+                    value={value}
+                    color={getColor(colorSet, index)}
+                />
+            ))}
+        </div>
+    </ZoomableFormat>
 );
 
 BubbleView.propTypes = {
@@ -52,12 +55,10 @@ const mapStateToProps = (_, { formatData, diameter: stringDiameter }) => {
         };
     }
 
-    const packingFunction = pack()
-        .size([diameter, diameter])
-        .padding(5);
+    const packingFunction = pack().size([diameter, diameter]).padding(5);
 
     const root = hierarchy({ name: 'root', children: formatData })
-        .sum(d => d.value)
+        .sum((d) => d.value)
         .sort((a, b) => b.value - a.value);
     const data = packingFunction(root).leaves();
 
diff --git a/src/app/js/formats/chart/network/NetworkView.js b/src/app/js/formats/chart/network/NetworkView.js
index 0fccd512e3..4c67605fe5 100644
--- a/src/app/js/formats/chart/network/NetworkView.js
+++ b/src/app/js/formats/chart/network/NetworkView.js
@@ -12,12 +12,16 @@ import compose from 'recompose/compose';
 import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
 import { scaleLinear } from 'd3-scale';
+import { StyleSheet, css } from 'aphrodite/no-important';
 
 import injectData from '../../injectData';
 import MouseIcon from '../../utils/components/MouseIcon';
+import ZoomableFormat from '../../utils/components/ZoomableFormat';
 
 const simulationOptions = {
     animate: true,
+    width: '100%',
+    height: '100%',
     strength: {
         charge: ({ radius }) => -radius * 100,
     },
@@ -28,18 +32,23 @@ const labelOffset = {
     y: ({ radius }) => radius * Math.sin(Math.PI / 4) + 6,
 };
 
-const styles = {
+const styles = StyleSheet.create({
     container: {
         overflow: 'hidden',
         userSelect: 'none',
+        height: '100%',
+        minHeight: '600px',
     },
-};
+    network: {
+        minHeight: '600px',
+    },
+});
 
 const zoomOptions = { minScale: 0.25, maxScale: 16 };
 
 class Network extends Component {
     mouseIcon = '';
-    createSimulation = options => {
+    createSimulation = (options) => {
         // extends react-vis-force createSimulation to get a reference on the simulation
         this.simulation = createSimulation(options);
 
@@ -63,34 +72,37 @@ class Network extends Component {
         const { nodes, links, colorSet } = this.props;
 
         return (
-            <div style={styles.container}>
-                <InteractiveForceGraph
-                    simulationOptions={simulationOptions}
-                    zoom
-                    showLabels
-                    zoomOptions={zoomOptions}
-                    labelAttr="label"
-                    labelOffset={labelOffset}
-                    highlightDependencies
-                    createSimulation={this.createSimulation}
-                >
-                    {nodes.map(node => (
-                        <ForceGraphNode
-                            key={node.id}
-                            node={node}
-                            fill={colorSet[0]}
-                        />
-                    ))}
-                    {links.map((link, index) => (
-                        <ForceGraphLink
-                            key={`${link.source}_${link.target}_${index}`}
-                            link={link}
-                        />
-                    ))}
-                </InteractiveForceGraph>
-
-                <div>{this.mouseIcon}</div>
-            </div>
+            <ZoomableFormat>
+                <div className={css(styles.container)}>
+                    <InteractiveForceGraph
+                        simulationOptions={simulationOptions}
+                        zoom
+                        showLabels
+                        zoomOptions={zoomOptions}
+                        labelAttr="label"
+                        labelOffset={labelOffset}
+                        highlightDependencies
+                        createSimulation={this.createSimulation}
+                        className={css(styles.network)}
+                    >
+                        {nodes.map((node) => (
+                            <ForceGraphNode
+                                key={node.id}
+                                node={node}
+                                fill={colorSet[0]}
+                            />
+                        ))}
+                        {links.map((link, index) => (
+                            <ForceGraphLink
+                                key={`${link.source}_${link.target}_${index}`}
+                                link={link}
+                            />
+                        ))}
+                    </InteractiveForceGraph>
+
+                    <div>{this.mouseIcon}</div>
+                </div>
+            </ZoomableFormat>
         );
     }
 }
@@ -161,7 +173,7 @@ const mapStateToProps = (state, { formatData }) => {
         .range([1, 20]);
 
     return {
-        nodes: nodes.map(node => ({
+        nodes: nodes.map((node) => ({
             ...node,
             radius: nodeScale(node.radius),
         })),
diff --git a/src/app/js/formats/chart/streamgraph/Streamgraph.js b/src/app/js/formats/chart/streamgraph/Streamgraph.js
index 87cec9e5ed..ca0d2596b4 100644
--- a/src/app/js/formats/chart/streamgraph/Streamgraph.js
+++ b/src/app/js/formats/chart/streamgraph/Streamgraph.js
@@ -22,6 +22,7 @@ import MouseIcon from '../../utils/components/MouseIcon';
 
 import CenterIcon from '../../utils/components/CenterIcon';
 import stylesToClassname from '../../../lib/stylesToClassName';
+import ZoomableFormat from '../../utils/components/ZoomableFormat';
 
 const styles = StyleSheet.create({
     divContainer: {
@@ -265,13 +266,13 @@ class Streamgraph extends PureComponent {
             }
             const area = d3
                 .area()
-                .x(d => {
+                .x((d) => {
                     return this.xAxisScale(d.data.date);
                 })
-                .y0(d => {
+                .y0((d) => {
                     return this.yAxisScale(d[0]);
                 })
-                .y1(d => {
+                .y1((d) => {
                     return this.yAxisScale(d[1]);
                 });
 
@@ -280,7 +281,7 @@ class Streamgraph extends PureComponent {
                 .data(stackedData)
                 .enter()
                 .append('path')
-                .attr('d', d => (d ? area(d) : []))
+                .attr('d', (d) => (d ? area(d) : []))
                 .attr('name', (d, i) => {
                     const currentName = nameList[i];
                     const currentColor = z[i];
@@ -453,11 +454,12 @@ class Streamgraph extends PureComponent {
                     this.hoveredKey = d3.select(nodes[i]).attr('name');
 
                     this.hoveredValue = d.find(
-                        elem => elem.data.date.getFullYear() === parseInt(date),
+                        (elem) =>
+                            elem.data.date.getFullYear() === parseInt(date),
                     ).data[this.hoveredKey];
 
                     this.hoveredColor = colorNameList.find(
-                        elem => elem.name === this.hoveredKey,
+                        (elem) => elem.name === this.hoveredKey,
                     ).color;
 
                     d3.select(nodes[i]).classed('hover', true);
@@ -501,7 +503,7 @@ class Streamgraph extends PureComponent {
     setMouseOutStreams(tooltip, colorNameList) {
         const componentContext = this;
         if (this.streams) {
-            this.streams.on('mouseout', function() {
+            this.streams.on('mouseout', function () {
                 componentContext.mouseIsOverStream = false;
                 componentContext.streams
                     .transition()
@@ -539,13 +541,8 @@ class Streamgraph extends PureComponent {
     }
 
     setGraph() {
-        const {
-            valuesObjectsArray,
-            valuesArray,
-            dateMin,
-            dateMax,
-            namesList,
-        } = transformDataIntoMapArray(this.props.formatData);
+        const { valuesObjectsArray, valuesArray, dateMin, dateMax, namesList } =
+            transformDataIntoMapArray(this.props.formatData);
 
         const svgWidth = this.divContainer.current.clientWidth;
         const { margin, height: svgHeight } = this.state;
@@ -614,21 +611,13 @@ class Streamgraph extends PureComponent {
             .selectAll('#d3DivContainer')
             .remove();
 
-        d3.select(this.divContainer.current)
-            .selectAll('#vertical')
-            .remove();
+        d3.select(this.divContainer.current).selectAll('#vertical').remove();
 
-        d3.select(this.divContainer.current)
-            .selectAll('#tooltip')
-            .remove();
+        d3.select(this.divContainer.current).selectAll('#tooltip').remove();
 
-        d3.select(this.anchor.current)
-            .selectAll('g')
-            .remove();
+        d3.select(this.anchor.current).selectAll('g').remove();
 
-        d3.select(this.anchor.current)
-            .selectAll('defs')
-            .remove();
+        d3.select(this.anchor.current).selectAll('defs').remove();
     }
 
     componentDidMount() {
@@ -665,52 +654,54 @@ class Streamgraph extends PureComponent {
             loading = '';
         }
         return (
-            <div
-                ref={this.divContainer}
-                style={styles.divContainer}
-                id={`divContainer${this.uniqueId}`}
-            >
+            <ZoomableFormat>
                 <div
-                    style={{
-                        textAlign: 'center',
-                        fontSize: '24px',
-                        paddingTop: '5px',
-                    }}
+                    ref={this.divContainer}
+                    style={styles.divContainer}
+                    id={`divContainer${this.uniqueId}`}
                 >
-                    {loading}
+                    <div
+                        style={{
+                            textAlign: 'center',
+                            fontSize: '24px',
+                            paddingTop: '5px',
+                        }}
+                    >
+                        {loading}
+                    </div>
+
+                    <div
+                        style={{
+                            position: 'absolute',
+                            top: 150 + (height - defaultArgs.height) + 'px',
+                            left: '5px',
+                        }}
+                    >
+                        {this.mouseIcon}
+                    </div>
+
+                    <div
+                        style={{
+                            position: 'absolute',
+                            top: 210 + (height - defaultArgs.height) + 'px',
+                            left: '12px',
+                        }}
+                        onClick={this.centerGraphClick}
+                        className={stylesWithClassnames.icon}
+                    >
+                        {this.centerIcon}
+                    </div>
+
+                    <svg
+                        id={`svgContainer${this.uniqueId}`}
+                        ref={this.svgContainer}
+                        width={width}
+                        height={height}
+                    >
+                        <g id="anchor" ref={this.anchor} />
+                    </svg>
                 </div>
-
-                <div
-                    style={{
-                        position: 'absolute',
-                        top: 150 + (height - defaultArgs.height) + 'px',
-                        left: '5px',
-                    }}
-                >
-                    {this.mouseIcon}
-                </div>
-
-                <div
-                    style={{
-                        position: 'absolute',
-                        top: 210 + (height - defaultArgs.height) + 'px',
-                        left: '12px',
-                    }}
-                    onClick={this.centerGraphClick}
-                    className={stylesWithClassnames.icon}
-                >
-                    {this.centerIcon}
-                </div>
-
-                <svg
-                    id={`svgContainer${this.uniqueId}`}
-                    ref={this.svgContainer}
-                    width={width}
-                    height={height}
-                >
-                    <g id="anchor" ref={this.anchor} />
-                </svg>
-            </div>
+            </ZoomableFormat>
         );
     }
 }
diff --git a/src/app/js/formats/utils/components/ZoomableFormat.js b/src/app/js/formats/utils/components/ZoomableFormat.js
new file mode 100644
index 0000000000..816c04a432
--- /dev/null
+++ b/src/app/js/formats/utils/components/ZoomableFormat.js
@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Dialog from '@mui/material/Dialog';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import DialogContent from '@mui/material/DialogContent';
+import OpenInFullIcon from '@mui/icons-material/OpenInFull';
+import Tooltip from '@mui/material/Tooltip';
+import translate from 'redux-polyglot/translate';
+import { polyglot as polyglotPropTypes } from '../../../propTypes';
+
+const ZoomableFormat = ({ children, p }) => {
+    const [open, setOpen] = useState(false);
+
+    const handleClickOpen = () => {
+        setOpen(true);
+    };
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    return (
+        <>
+            <div>
+                {!open ? children : null}
+
+                <Tooltip title={p.t('fullscreen')} placement="left">
+                    <IconButton
+                        onClick={handleClickOpen}
+                        sx={{
+                            position: 'absolute',
+                            right: 8,
+                            bottom: 8,
+                        }}
+                    >
+                        <OpenInFullIcon />
+                    </IconButton>
+                </Tooltip>
+            </div>
+
+            <Dialog fullScreen={true} open={open} onClose={handleClose}>
+                <IconButton
+                    aria-label="close"
+                    onClick={handleClose}
+                    sx={{
+                        position: 'absolute',
+                        right: 8,
+                        top: 8,
+                        color: 'var(--text-main)',
+                        backgroundColor: 'rgba(0,0,0,0.025)',
+                        zIndex: 99999,
+                    }}
+                >
+                    <CloseIcon />
+                </IconButton>
+                <DialogContent dividers>
+                    <fieldset
+                        style={{
+                            borderRadius: '5px',
+                            margin: '24px',
+                            height: '100%',
+                            maxHeight: 'calc(100% - 48px)',
+                            overflow: 'scroll',
+                        }}
+                    >
+                        {open ? children : null}
+                    </fieldset>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+};
+
+ZoomableFormat.propTypes = {
+    children: PropTypes.node.isRequired,
+    p: polyglotPropTypes.isRequired,
+};
+
+export default translate(ZoomableFormat);
diff --git a/src/app/js/formats/utils/components/vega-component/VegaComponent.js b/src/app/js/formats/utils/components/vega-component/VegaComponent.js
index 4906e8e47a..dd921b0b68 100644
--- a/src/app/js/formats/utils/components/vega-component/VegaComponent.js
+++ b/src/app/js/formats/utils/components/vega-component/VegaComponent.js
@@ -9,6 +9,7 @@ import {
     VEGA_DATA_INJECT_TYPE_B,
 } from '../../chartsUtils';
 import { ASPECT_RATIO_NONE, ASPECT_RATIOS } from '../../aspectRatio';
+import ZoomableFormat from '../ZoomableFormat';
 
 /**
  * small component use to handle vega lite display
@@ -73,16 +74,19 @@ function CustomActionVega(props) {
     }
 
     return (
-        <Vega
-            style={
-                props.aspectRatio === ASPECT_RATIO_NONE
-                    ? { width: '100%' }
-                    : { width: '100%', aspectRatio: props.aspectRatio }
-            }
-            spec={deepClone(props.spec)}
-            actions={actions}
-            mode="vega"
-        />
+        <ZoomableFormat>
+            <style>{'#vg-tooltip-element {z-index:99999}'}</style>
+            <Vega
+                style={
+                    props.aspectRatio === ASPECT_RATIO_NONE
+                        ? { width: '100%' }
+                        : { width: '100%', aspectRatio: props.aspectRatio }
+                }
+                spec={deepClone(props.spec)}
+                actions={actions}
+                mode="vega"
+            />
+        </ZoomableFormat>
     );
 }
 
diff --git a/src/app/js/formats/utils/components/vega-lite-component/VegaLiteComponent.js b/src/app/js/formats/utils/components/vega-lite-component/VegaLiteComponent.js
index cdccbcf85a..e0142da698 100644
--- a/src/app/js/formats/utils/components/vega-lite-component/VegaLiteComponent.js
+++ b/src/app/js/formats/utils/components/vega-lite-component/VegaLiteComponent.js
@@ -10,6 +10,7 @@ import {
     VEGA_LITE_DATA_INJECT_TYPE_C,
 } from '../../chartsUtils';
 import { ASPECT_RATIO_NONE, ASPECT_RATIOS } from '../../aspectRatio';
+import ZoomableFormat from '../ZoomableFormat';
 
 /**
  * small component use to handle vega lite display
@@ -65,16 +66,19 @@ function CustomActionVegaLite({ aspectRatio, user, spec, data, injectType }) {
     }
 
     return (
-        <Vega
-            style={
-                aspectRatio === ASPECT_RATIO_NONE
-                    ? { width: '100%' }
-                    : { width: '100%', aspectRatio }
-            }
-            spec={deepClone(specWithData)}
-            actions={actions}
-            mode="vega-lite"
-        />
+        <ZoomableFormat>
+            <style>{'#vg-tooltip-element {z-index:99999}'}</style>
+            <Vega
+                style={
+                    aspectRatio === ASPECT_RATIO_NONE
+                        ? { width: '100%' }
+                        : { width: '100%', aspectRatio }
+                }
+                spec={deepClone(specWithData)}
+                actions={actions}
+                mode="vega-lite"
+            />
+        </ZoomableFormat>
     );
 }