Highcharts Demo

by maritavindedal

HTML

<!-- Load the Highcharts scripts. Please note that the Chatbot loads all scripts
    because we do not know what is being used in the configuration previews. In
    production, unused scripts should be removed. --> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/highcharts-3d.js"></script> <script src="https://code.highcharts.com/modules/stock.js"></script> <script src="https://code.highcharts.com/maps/modules/map.js"></script> <script src="https://code.highcharts.com/modules/gantt.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/parallel-coordinates.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script> <script src="https://code.highcharts.com/modules/annotations-advanced.js"></script> <script src="https://code.highcharts.com/modules/data.js"></script> <script src="https://code.highcharts.com/modules/draggable-points.js"></script> <script src="https://code.highcharts.com/modules/static-scale.js"></script> <script src="https://code.highcharts.com/modules/broken-axis.js"></script> <script src="https://code.highcharts.com/modules/heatmap.js"></script> <script src="https://code.highcharts.com/modules/tilemap.js"></script> <script src="https://code.highcharts.com/modules/timeline.js"></script> <script src="https://code.highcharts.com/modules/treemap.js"></script> <script src="https://code.highcharts.com/modules/treegraph.js"></script> <script src="https://code.highcharts.com/modules/item-series.js"></script> <script src="https://code.highcharts.com/modules/drilldown.js"></script> <script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script> <script src="https://code.highcharts.com/modules/bullet.js"></script> <script src="https://code.highcharts.com/modules/funnel.js"></script> <script...

JavaScript

Highcharts.chart('container', {
    exporting: {
        buttons: {
            contextButton: {
                // Default exporting button
                menuItems: ['printChart', 'downloadPNG', 'downloadJPEG']
            },
            customButton: {
                text: '<span style="font-family: Arial, sans-serif;">⚙ Custom Button</span>',
                onclick: function () {
                    alert('Custom button clicked!');
                },
                style: {
                    background: '#f7f7f7',
                    border: '1px solid #ccc',
                    color: '#333',
                    padding: '5px 10px'
                },
                // Make sure to add a custom class for styling
                className: 'custom-button'
            }
        }
    },
    series: [{
        data: [1, 3, 2, 4]
    }]
});

// Add CSS to ensure the custom button is displayed correctly
const style = document.createElement('style');
style.innerHTML = `
    .custom-button {
        display: inline-block;
        margin-left: 10px;
        cursor: pointer;
        vertical-align: top; /* Aligns the button with the exporting menu */
    }
`;
document.head.appendChild(style);