<div id="quotesWidgetOverview"></div>
<div class="qw-copyright"><a href="https://www.mql5.com/?utm_source=quotes.widget&utm_medium=link&utm_term=quotes.overview&utm_content=visit.mql5.quotes&utm_campaign=quotes.overview.widget" rel="noopener nofollow" target="_blank">MQL5 Algo Trading Community</a></div>
<script async type="text/javascript" data-type="quotes-widget" src="https://c.mql5.com/js/widgets/quotes/widget.js?v=3">
{"type":"overview","style":"table","filter":["EURUSD","USDJPY","GBPUSD","AUDUSD","USDCAD","USDCHF","NZDUSD"],"width":700,"height":420,"period":"D1","id":"quotesWidgetOverview","fw":"html"}
</script>
// QuotesWidgetOverview.jsx
import { useEffect, useRef, memo } from 'react';
function QuotesWidgetOverview() {
const container = useRef();
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://c.mql5.com/js/widgets/quotes/widget.js?v=3';
script.type = 'text/javascript';
script.async = true;
script.dataset.type = 'quotes-widget';
script.innerHTML = `{"type":"overview","style":"table","filter":["EURUSD","USDJPY","GBPUSD","AUDUSD","USDCAD","USDCHF","NZDUSD"],"width":700,"height":420,"period":"D1","id":"quotesWidgetOverview","fw":"react"}`;
container.current?.appendChild(script);
}, []);
return (
<div ref={container}>
<div id="quotesWidgetOverview"></div>
<div className="qw-copyright"><a href="https://www.mql5.com/?utm_source=quotes.widget&utm_medium=link&utm_term=quotes.overview&utm_content=visit.mql5.quotes&utm_campaign=quotes.overview.widget" rel="noopener nofollow" target="_blank">MQL5 Algo Trading Community</a></div>
</div>
);
}
export default memo(QuotesWidgetOverview);
<!-- QuotesWidgetOverview.svelte -->
<script>
import { onMount } from 'svelte';
let container;
onMount(() => {
const script = document.createElement('script');
script.src = 'https://c.mql5.com/js/widgets/quotes/widget.js?v=3';
script.type = 'text/javascript';
script.async = true;
script.dataset.type = 'quotes-widget';
script.innerHTML = `{"type":"overview","style":"table","filter":["EURUSD","USDJPY","GBPUSD","AUDUSD","USDCAD","USDCHF","NZDUSD"],"width":700,"height":420,"period":"D1","id":"quotesWidgetOverview","fw":"svelte"}`;
container.appendChild(script);
return () => {
if (script.parentNode) {
script.remove();
}
};
});
</script>
<div bind:this={container}>
<div id="quotesWidgetOverview"></div>
<div class="qw-copyright"><a href="https://www.mql5.com/?utm_source=quotes.widget&utm_medium=link&utm_term=quotes.overview&utm_content=visit.mql5.quotes&utm_campaign=quotes.overview.widget" rel="noopener nofollow" target="_blank">MQL5 Algo Trading Community</a></div>
</div>
<!-- QuotesWidgetOverview.vue -->
<script setup>
import { onMounted, ref } from 'vue';
const container = ref(null);
onMounted(() => {
if (!container.value) return;
const script = document.createElement('script');
script.src = 'https://c.mql5.com/js/widgets/quotes/widget.js?v=3';
script.type = 'text/javascript';
script.async = true;
script.dataset.type = 'quotes-widget';
script.innerHTML = `{"type":"overview","style":"table","filter":["EURUSD","USDJPY","GBPUSD","AUDUSD","USDCAD","USDCHF","NZDUSD"],"width":700,"height":420,"period":"D1","id":"quotesWidgetOverview","fw":"vue"}`;
container.value.appendChild(script);
});
</script>
<template>
<div ref="container">
<div id="quotesWidgetOverview"></div>
<div class="qw-copyright"><a href="https://www.mql5.com/?utm_source=quotes.widget&utm_medium=link&utm_term=quotes.overview&utm_content=visit.mql5.quotes&utm_campaign=quotes.overview.widget" rel="noopener nofollow" target="_blank">MQL5 Algo Trading Community</a></div>
</div>
</template>
