Combine Highcharts and Intro.JS (or similar)

229 Views Asked by At

I have a lot of charts in Highcharts. Now I want to point out some interesting developments in some of these charts. This can be done with Intro.JS, for example.

How can I implement this library or something similar inside my Highcharts? An example of a Highcharts chart here.

    chart = new Highcharts.Chart({
        exporting: {
        enabled: false
        },
        chart: {
            renderTo: 'container',
            type: 'spline',
            marginRight: 20
        },
        title: {
            text: 'Kortetermijnraming CPB'
        },
        subtitle: {
            text: 'Werkloosheid stijgt tot 6%'
        },
        xAxis: {
    max: Date.UTC(2000,1,0),
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%Y',
                year: '%Y'
            }
        },
        yAxis: {
    min: 0,
            title: {
                text: 'Werkloosheid (%)'
            },

                         plotLines: [{
                value: 0,
                width: 2,
                color: '#000000',
                zIndex: 5
            },                {
                label: {
        text: 'Werkloosheid',
        x: 0,
        align: 'right'
        },
        value: 6,
                width: 0.5,
                color: '#ffffff',
                zIndex: 1
            }]
        },
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'<br/>'+
                    Highcharts.dateFormat('%Y', this.x) +':</b> '+ this.y +'%';
            }
        },

         plotOptions: {
     series: {
            animation: {
                duration: 5000
            }
        },
        spline: {
            lineWidth: 3,
            states: {
                hover: {
                    lineWidth: 4
                }
            },
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: true,
                        symbol: 'circle',
                        radius: 4,
                        lineWidth: 1
                    }
                }
            }
        }
    },
               legend: {
    enabled: false
    });
});
0

There are 0 best solutions below