Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 300px"></div>
<button id="title" class="autocompare">Set title</button>
<button id="subtitle" class="autocompare">Set subtitle</button>
<button id="color" class="autocompare">New color</button>

JavaScript

const chart = Highcharts.chart('container', {
		title:{
    	text:'ftest'
    },
    subtitle: {
        text: 'Subtitle'
    },
    tooltip:{
    enabled: true,
                        borderRadius: 0,
                        borderWidth: 0,
                        shadow: false,
                        shared: true,
                        useHTML: true,
                        zIndex: 99999,
                        
                        formatter() {
                            // ToolTip Built Here
                            const { x , y } = this; 

                        
                            let tooltipString = `<div > ${y}
                                                 </div>`;

                                                //  that.props.updateDates( this.points[0].series.userOptions.dates[this.points[0].key] );
                                return tooltipString;
                        }
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

let i = 1;

document.getElementById('title').addEventListener('click', () => {
    chart.setTitle({ text: 'New title ' + i });
    i += 1;
});

document.getElementById('subtitle').addEventListener('click', () => {
    chart.setTitle(null, { text: 'New title ' + i });
    i += 1;
});

document.getElementById('title').addEventListener('click', () => {
    chart.setTitle(
        { style: { color: 'red' } },
        { style: { color: 'green' } }
    );
});