chart

<script>
Highcharts.chart('chart-container', {
    chart: {
        type: 'spline',
backgroundColor: null, // Remove background color
    },
legend: {
    enabled: false
},
    title: {
        text: ''
    },
    xAxis: {
        type: 'datetime',
        labels: {
            format: '{value:%b-%Y}', // Format as Jan-2015
            style: {
                color: '#877A55', // Pinkish label color
                fontSize: '14px'
            },
            rotation: -45 // Slant the labels
        },
        tickPositions: [
            Date.UTC(2015, 0, 31), Date.UTC(2016, 0, 31), Date.UTC(2017, 0, 31),
            Date.UTC(2018, 0, 31), Date.UTC(2019, 0, 31), Date.UTC(2020, 0, 31),
            Date.UTC(2021, 0, 31), Date.UTC(2022, 0, 31), Date.UTC(2023, 0, 31),
            Date.UTC(2024, 0, 31), Date.UTC(2024, 5, 30) // Jan-2024 and Jun-2024
        ],
gridLineColor: "#A0522D",
    gridLineDashStyle: "dot",
plotBands: [{
    color: 'rgba(220, 122, 0, 0.25)', // Color of the highlight
    from: Date.UTC(2020, 4, 31), // Start date
    to: Date.UTC(2024, 4, 31), // End date
    label: {
        text: '<div class="text-overchart" style="text-align:center;">+21%<span style="font-size:12px; color:white;">(over 4 years)</span></div>',
        align: 'center',
        x: 0, // Center horizontally within the plot band
        y: 150, // Adjust to position the text vertically
        style: {
                color: '#fff',
                fontSize: '25px', // Big text size
                fontWeight: 'normal',
                fontFamily: 'Assistant' // Font family
            },
            useHTML: true // Ensure HTML tags are rendered correctly
    }
}],
plotLines: [{
        color: 'transparent', // Hide the line
        width: 0,
        value: Date.UTC(2020, 4, 31),
        label: {
            text: '<strong>$2,018</strong><br />5/31/2020',
            align: 'center',
            verticalAlign: 'top', // Position above the x-axis
            y: 30, // Adjust vertical position to be above the line
            x: 0, // Center horizontally
            style: {
                color: '#606060',
                fontSize: '14px', // Font size for start label
                fontFamily: 'Assistant', // Font family
                textAlign: 'center', // Center the text horizontally
rotation: 0 // Ensure text is not rotated
            },
            useHTML: true // Ensure HTML tags are rendered correctly
        }
    }, {
        color: 'transparent', // Hide the line
        width: 0,
        value: Date.UTC(2024, 4, 31),
        label: {
            text: 'End',
            align: 'center',
            verticalAlign: 'bottom', // Position above the x-axis
            y: -200, // Adjust vertical position to be above the line
            x: 0, // Center horizontally
            style: {
                color: '#606060',
                fontSize: '14px', // Font size for end label
                fontFamily: 'Assistant', // Font family
                textAlign: 'center', // Center the text horizontally
rotation: 0 // Ensure text is not rotated
            },
            useHTML: true // Ensure HTML tags are rendered correctly
        }
    }],
    },
    yAxis: {
        title: {
            text: ''
        },
        min: 0,
        max: 2500,
        tickPositions: [0, 1250, 2500], // Y-axis labels: 0, 1250, 2500
        labels: {
            format: '${value}',
style: {
                color: '#877A55', // Pinkish label color
                fontSize: '14px'
            },
        },
gridLineColor: "#A0522D",
    gridLineDashStyle: "dot",
plotOptions: {
      spline: {
        marker: {
          enabled: false,
          states: {
            hover: {
              enabled: true,
              radius: 6,
            },
          },
        },
         enableMouseTracking: true,
            lineWidth: 4, // Line thickness
            color: '#DC7A00', // Orange color for the line
      },
    },
    },
    series: [{
        name: 'Price',
        data: [
[Date.UTC(2015, 0, 31), 1778], [Date.UTC(2015, 1, 28), 1784],
            [Date.UTC(2015, 2, 31), 1797], [Date.UTC(2015, 3, 30), 1805],
            [Date.UTC(2015, 4, 31), 1816], [Date.UTC(2015, 5, 30), 1823],
            [Date.UTC(2015, 6, 31), 1827], [Date.UTC(2015, 7, 31), 1824],
            [Date.UTC(2015, 8, 30), 1823], [Date.UTC(2015, 9, 31), 1819],
            [Date.UTC(2015, 10, 30), 1818], [Date.UTC(2015, 11, 31), 1814],
            [Date.UTC(2016, 0, 31), 1818], [Date.UTC(2016, 1, 29), 1821],
            [Date.UTC(2016, 2, 31), 1829], [Date.UTC(2016, 3, 30), 1837],
            [Date.UTC(2016, 4, 31), 1846], [Date.UTC(2016, 5, 30), 1854],
            [Date.UTC(2016, 6, 31), 1858], [Date.UTC(2016, 7, 31), 1859],
            [Date.UTC(2016, 8, 30), 1855], [Date.UTC(2016, 9, 31), 1849],
            [Date.UTC(2016, 10, 30), 1844], [Date.UTC(2016, 11, 31), 1841],
            [Date.UTC(2017, 0, 31), 1846], [Date.UTC(2017, 1, 28), 1858],
            [Date.UTC(2017, 2, 31), 1873], [Date.UTC(2017, 3, 30), 1884],
            [Date.UTC(2017, 4, 31), 1890], [Date.UTC(2017, 5, 30), 1898],
            [Date.UTC(2017, 6, 31), 1901], [Date.UTC(2017, 7, 31), 1900],
            [Date.UTC(2017, 8, 30), 1898], [Date.UTC(2017, 9, 31), 1893],
            [Date.UTC(2017, 10, 30), 1887], [Date.UTC(2017, 11, 31), 1883],
            [Date.UTC(2018, 0, 31), 1886], [Date.UTC(2018, 1, 28), 1893],
            [Date.UTC(2018, 2, 31), 1905], [Date.UTC(2018, 3, 30), 1917],
            [Date.UTC(2018, 4, 31), 1929], [Date.UTC(2018, 5, 30), 1938],
            [Date.UTC(2018, 6, 31), 1944], [Date.UTC(2018, 7, 31), 1948],
            [Date.UTC(2018, 8, 30), 1943], [Date.UTC(2018, 9, 31), 1940],
            [Date.UTC(2018, 10, 30), 1941], [Date.UTC(2018, 11, 31), 1946],
            [Date.UTC(2019, 0, 31), 1951], [Date.UTC(2019, 1, 28), 1957],
            [Date.UTC(2019, 2, 31), 1967], [Date.UTC(2019, 3, 30), 1978],
            [Date.UTC(2019, 4, 31), 1990], [Date.UTC(2019, 5, 30), 2000],
            [Date.UTC(2019, 6, 31), 2006], [Date.UTC(2019, 7, 31), 2007],
            [Date.UTC(2019, 8, 30), 2007], [Date.UTC(2019, 9, 31), 2001],
            [Date.UTC(2019, 10, 30), 1995], [Date.UTC(2019, 11, 31), 1995],
            [Date.UTC(2020, 0, 31), 2004], [Date.UTC(2020, 1, 29), 2013],
            [Date.UTC(2020, 2, 31), 2023], [Date.UTC(2020, 3, 30), 2021],
            [Date.UTC(2020, 4, 31), 2018], [Date.UTC(2020, 5, 30), 2011],
            [Date.UTC(2020, 6, 31), 2009], [Date.UTC(2020, 7, 31), 2005],
            [Date.UTC(2020, 8, 30), 1991], [Date.UTC(2020, 9, 31), 1973],
            [Date.UTC(2020, 10, 30), 1952], [Date.UTC(2020, 11, 31), 1940],
            [Date.UTC(2021, 0, 31), 1942], [Date.UTC(2021, 1, 28), 1950],
            [Date.UTC(2021, 2, 31), 1960], [Date.UTC(2021, 3, 30), 1976],
            [Date.UTC(2021, 4, 31), 1992], [Date.UTC(2021, 5, 30), 2001],
            [Date.UTC(2021, 6, 31), 2005], [Date.UTC(2021, 7, 31), 2008],
            [Date.UTC(2021, 8, 30), 2009], [Date.UTC(2021, 9, 31), 2003],
            [Date.UTC(2021, 10, 30), 1997], [Date.UTC(2021, 11, 31), 1988],
            [Date.UTC(2022, 0, 31), 1993], [Date.UTC(2022, 1, 28), 2002],
            [Date.UTC(2022, 2, 31), 2015], [Date.UTC(2022, 3, 30), 2030],
            [Date.UTC(2022, 4, 31), 2046], [Date.UTC(2022, 5, 30), 2060],
            [Date.UTC(2022, 6, 31), 2071], [Date.UTC(2022, 7, 31), 2081],
            [Date.UTC(2022, 8, 30), 2091], [Date.UTC(2022, 9, 31), 2100],
            [Date.UTC(2022, 10, 30), 2110], [Date.UTC(2022, 11, 31), 2120],
            [Date.UTC(2023, 0, 31), 2130], [Date.UTC(2023, 1, 28), 2140],
            [Date.UTC(2023, 2, 31), 2150], [Date.UTC(2023, 3, 30), 2160],
            [Date.UTC(2023, 4, 31), 2170], [Date.UTC(2023, 5, 30), 2180],
            [Date.UTC(2023, 6, 31), 2190], [Date.UTC(2023, 7, 31), 2200],
            [Date.UTC(2023, 8, 30), 2210], [Date.UTC(2023, 9, 31), 2220],
            [Date.UTC(2023, 10, 30), 2230], [Date.UTC(2023, 11, 31), 2240],
            [Date.UTC(2024, 0, 31), 2250], [Date.UTC(2024, 1, 29), 2260],
            [Date.UTC(2024, 2, 31), 2270], [Date.UTC(2024, 3, 30), 2280],
            [Date.UTC(2024, 4, 31), 2290], [Date.UTC(2024, 5, 30), 2300]
        ],

        lineWidth: 4, // Line thickness
        color: '#DC7A00',
    }],
annotations: [{
        shapes: [{
            type: 'circle',
            point: {
                xAxis: 0,
                yAxis: 0,
                x: Date.UTC(2020, 4, 31),
                y: null // Adjust if needed
            },
            radius: 5,
            fillColor: '#FF0000', // Red color for the marker
            lineWidth: 1,
            lineColor: '#FF0000'
        }, {
            type: 'circle',
            point: {
                xAxis: 0,
                yAxis: 0,
                x: Date.UTC(2024, 4, 31),
                y: null // Adjust if needed
            },
            radius: 5,
            fillColor: '#FF0000', // Red color for the marker
            lineWidth: 1,
            lineColor: '#FF0000'
        }]
    }]
});
</script>