<div id="quotesWidgetMatrix"></div>
<div class="qw-copyright"><a href="https://www.mql5.com/?utm_source=quotes.widget&utm_medium=link&utm_term=quotes.matrix&utm_content=visit.mql5.quotes&utm_campaign=quotes.matrix.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":"matrix","filter":["EUR","USD","JPY","GBP","AUD","CAD","CHF","NZD"],"width":700,"height":420,"id":"quotesWidgetMatrix","fw":"html"}
</script>
// QuotesWidgetMatrix.jsx
import { useEffect, useRef, memo } from 'react';
function QuotesWidgetMatrix() {
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":"matrix","filter":["EUR","USD","JPY","GBP","AUD","CAD","CHF","NZD"],"width":700,"height":420,"id":"quotesWidgetMatrix","fw":"react"}`;
container.current?.appendChild(script);
}, []);
return (
<div ref={container}>
<div id="quotesWidgetMatrix"></div>
<div className="qw-copyright"><a href="https://www.mql5.com/?utm_source=quotes.widget&utm_medium=link&utm_term=quotes.matrix&utm_content=visit.mql5.quotes&utm_campaign=quotes.matrix.widget" rel="noopener nofollow" target="_blank">MQL5 Algo Trading Community</a></div>
</div>
);
}
export default memo(QuotesWidgetMatrix);
<!-- QuotesWidgetMatrix.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":"matrix","filter":["EUR","USD","JPY","GBP","AUD","CAD","CHF","NZD"],"width":700,"height":420,"id":"quotesWidgetMatrix","fw":"svelte"}`;
container.appendChild(script);
return () => {
if (script.parentNode) {
script.remove();
}
};
});
</script>
<div bind:this={container}>
<div id="quotesWidgetMatrix"></div>
<div class="qw-copyright"><a href="https://www.mql5.com/?utm_source=quotes.widget&utm_medium=link&utm_term=quotes.matrix&utm_content=visit.mql5.quotes&utm_campaign=quotes.matrix.widget" rel="noopener nofollow" target="_blank">MQL5 Algo Trading Community</a></div>
</div>
<!-- QuotesWidgetMatrix.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":"matrix","filter":["EUR","USD","JPY","GBP","AUD","CAD","CHF","NZD"],"width":700,"height":420,"id":"quotesWidgetMatrix","fw":"vue"}`;
container.value.appendChild(script);
});
</script>
<template>
<div ref="container">
<div id="quotesWidgetMatrix"></div>
<div class="qw-copyright"><a href="https://www.mql5.com/?utm_source=quotes.widget&utm_medium=link&utm_term=quotes.matrix&utm_content=visit.mql5.quotes&utm_campaign=quotes.matrix.widget" rel="noopener nofollow" target="_blank">MQL5 Algo Trading Community</a></div>
</div>
</template>
