JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container_good" style="width:500px;height: 300px"></div>

<div id="bellCurveContainer" style="width:500px;height: 400px"></div>

JavaScript

var chartValues =  [-5,-4,-3,0,2,4,5];
        var chart = new Highcharts.Chart({
            chart: {
                //SET THIS TO 'container_good' || 'container_bad'
                renderTo: 'container_good',
                type: 'area'

            },


            series: [{
                type:'area',
                data:chartValues,
                color: "#FF0000",
                threshold: 0,
		        negativeColor: '#00FFFF',
                
                marker : {
                    enabled: true
                }
            }]
        });
        
        
         document.addEventListener("DOMContentLoaded", function () {
    // Function to calculate normal distribution values
    function normalDistribution(x, mean, deviation) {
      return (
        (1 / (deviation * Math.sqrt(2 * Math.PI))) *
        Math.exp(-((x - mean) ** 2) / (2 * deviation ** 2))
      );
    }

    // Calculate data points for the bell curve
    function calculateBellCurveData(mean, deviation, points) {
      const step = (4 * deviation) / points;
      const data = [];

      for (let i = mean - 2 * deviation; i <= mean + 2 * deviation; i += step) {
        data.push([i, normalDistribution(i, mean, deviation)]);
      }

      return data;
    }

    // Set your mean, deviation, and volatility values
    const mean = 0; // Mean value
    const deviation = 1; // Standard deviation
    const volatility = 0.2; // Volatility

    // Calculate data points for the bell curve
    const bellCurveData = calculateBellCurveData(mean, deviation, 100);

    // Create Highcharts chart
    Highcharts.chart("bellCurveContainer", {
      title: {
        text: "Bell Curve",
      },
      series: [
        {
          type: "line",
          name: "Bell Curve",
          data: bellCurveData,
        },
      ],
      yAxis: {
        title: {
          text: "Probability Density",
        },
      },
      xAxis: {
        title: {
          text: "Value",
        },
      },
...