Crypto Price Chart Widget
Discover a powerful crypto chart that you can seamlessly embed onto any website. Customize it extensively to make it uniquely yours with a variety of options.
Charts powered by TradingView.
Do you want to remove the Moralis badge? Upgrade to Business.
Live Preview
Embed Code
<id="price-chart-widget-container" style="width: 100%; height:100%">
<script type="text/javascript">
(function() {
function loadWidget() {
if (typeof window.createMyWidget === 'function') {
window.createMyWidget('price-chart-widget-container', {
autoSize: true,
chainId: '0x1',
pairAddress: '0x56534741cd8b152df6d48adf7ac51f75169a83b2',
showHoldersChart: true,
defaultInterval: '1D',
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone ?? 'Etc/UTC',
theme: 'moralis',
locale: 'en',
showCurrencyToggle: true,
hideLeftToolbar: false,
hideTopToolbar: false,
hideBottomToolbar: false
});
} else {
console.error('createMyWidget function is not defined.');
}
}
if (!document.getElementById('moralis-chart-widget')) {
var script = document.createElement('script');
script.id = 'moralis-chart-widget';
script.src = 'https://moralis.com/static/embed/chart.js';
script.type = 'text/javascript';
script.async = true;
script.onload = loadWidget;
document.body.appendChild(script);
} else {
loadWidget();
}
})();
</script>
</div>
import React, { useEffect, useRef } from 'react';
const PRICE_CHART_ID = 'price-chart-widget-container';
export const PriceChartWidget = () => {
const containerRef = useRef(null);
useEffect(() => {
if (typeof window === 'undefined') return;
const loadWidget = () => {
if (typeof window.createMyWidget === 'function') {
window.createMyWidget(PRICE_CHART_ID, {
autoSize: true,
chainId: '0x1',
pairAddress: '0x56534741cd8b152df6d48adf7ac51f75169a83b2',
showHoldersChart: true,
defaultInterval: '1D',
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone ?? 'Etc/UTC',
theme: 'moralis',
locale: 'en',
showCurrencyToggle: true,
hideLeftToolbar: false,
hideTopToolbar: false,
hideBottomToolbar: false
});
} else {
console.error('createMyWidget function is not defined.');
}
};
if (!document.getElementById('moralis-chart-widget')) {
const script = document.createElement('script');
script.id = 'moralis-chart-widget';
script.src = 'https://moralis.com/static/embed/chart.js';
script.type = 'text/javascript';
script.async = true;
script.onload = loadWidget;
script.onerror = () => {
console.error('Failed to load the chart widget script.');
};
document.body.appendChild(script);
} else {
loadWidget();
}
}, []);
return (
<div style={{ width: "100%", height: "100%" }}>
<div
id={PRICE_CHART_ID}
ref={containerRef}
style={{ width: "100%", height: "100%" }}
/>
</div>
);
};
