Plotly

<div id="myDiv" style="width: 600px; height: 400px;"></div>
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<script>
// 3D Scatter
const data3d = [{
  x: [1, 2, 3, 4, 5],
  y: [10, 15, 13, 17, 20],
  z: [5, 8, 6, 10, 7],
  mode: 'markers',
  marker: {
    size: 12,
    color: 'rgb(255, 100, 100)',
    line: { color: 'rgb(200, 0, 0)', width: 1 }
  },
  type: 'scatter3d'
}];

Plotly.newPlot('myDiv', data3d, {
  margin: { t: 0 },
  scene: {
    xaxis: { title: 'X' },
    yaxis: { title: 'Y' },
    zaxis: { title: 'Z' }
  }
});

// Candlestick (Stock)
const trace = [{
  x: ['2023-01-01', '2023-01-02', '2023-01-03', '2023-01-04'],
  open: [33, 30, 35, 33],
  high: [36, 35, 40, 37],
  low: [30, 28, 33, 31],
  close: [35, 33, 38, 35],
  type: 'candlestick'
}];

Plotly.newPlot('stockChart', trace, {
  title: 'أسعار السهم'
});

// Geographic scatter (Map)
const geoData = [{
  type: 'scattergeo',
  mode: 'markers',
  lat: [30.0444, 24.7136, 25.2048],
  lon: [31.2357, 46.6753, 55.2708],
  text: ['القاهرة', 'الرياض', 'دبي'],
  marker: { size: 10, color: 'red' }
}];

Plotly.newPlot('map', geoData, {
  geo: {
    projection: { type: 'natural earth' },
    showland: true,
    landcolor: 'rgb(243, 243, 243)',
    countrycolor: 'rgb(204, 204, 204)'
  }
});
</script>