<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4"></script>
<script type="text/babel">
const { useRef,useEffect } = React;
const chartRef = useRef(null);
const generateRandomColor = () => {
const randomColor = Math.floor(Math.random() * 16777215).toString(16);
return `#${randomColor}`;
const generateRandomColors = (count) => {
return Array.from({ length: count }, () => generateRandomColor());
{ name: 'Amazon', valuation: 1900 },
{ name: 'Tesla', valuation: 800 },
{ name: 'Alphabet', valuation: 1500 },
{ name: 'Meta Platforms', valuation: 900 },
{ name: 'Walmart', valuation: 400 },
{ name: 'Intel', valuation: 250 },
{ name: 'NVIDIA', valuation: 500 },
{ name: 'Netflix', valuation: 300 },
{ name: 'Salesforce', valuation: 250 },
{ name: 'Oracle', valuation: 350 },
{ name: 'Adobe', valuation: 250 },
{ name: 'IBM', valuation: 150 },
{ name: 'Cisco', valuation: 200 },
{ name: 'Sony', valuation: 100 },
{ name: 'Samsung', valuation: 350 },
{ name: 'General Electric', valuation: 100 }
const ctx = chartRef.current.getContext('2d');
const randomColors = generateRandomColors(companies.length);
labels: companies.map(company => company.name),
label: 'Company Valuation',
data: companies.map(company => company.valuation),
backgroundColor: randomColors,
<div className='container'>
<h3>Chart React Random Background Color</h3>
<canvas id="random-background-color-chart" ref={chartRef}></canvas>
ReactDOM.render(<App />, document.getElementById("app"));
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);