Examples of performance chart since launch

Necessary parts

Chart container

The chart container is identified by the ID attribute. Be sure to use the same ID in HTML and the Highcharts script.

<div id="chartcontainer"></div>

Basic JS includes

The basic JS includes are JQuery and Highcharts.

<!-- move to closing body tag -->
<!-- use jQuery only in necessary -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<!-- Highstock is mandatory -->
<script src="https://code.highcharts.com/stock/highstock.js" crossorigin="anonymous"></script>

<!-- place the individual Highcharts code below as inline script or include -->

Highcharts options

There are some base Highcharts options which have to be set (e.g. language specific).

// Global options
Highcharts.setOptions({
    global: {
        timezoneOffset: 0 * 60
    },
    lang: {

        months: ["Januar", "Februar", "M\u00e4rz", "April", "Mai", "Juni",
            "Juli", "August", "September", "Oktober", "November",
            "Dezember"],
        shortMonths: ["Jan", "Feb", "M\u00e4r", "Apr", "Mai", "Jun",
            "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
        weekdays: ["Sonntag", "Montag", "Dienstag", "Mittwoch",
            "Donnerstag", "Freitag", "Samstag"],
        rangeSelectorZoom: '',
        rangeSelectorFrom: 'Von',
        rangeSelectorTo: 'Bis',
        thousandsSep: '.',
        decimalPoint: ',',
        downloadJPEG: 'als JPG herunterladen',
        downloadPDF: 'als PDF herunterladen',
        downloadPNG: 'als PNG herunterladen',
        downloadSVG: 'als SVG herunterladen',
        printChart: 'Chart drucken'

    },
    title: {
        style: {
            color: '#648caa'
        }
    },
    exporting: {
        buttons: {
            contextButton: {
                symbolStroke: '#648caa',
                symbolFill: '#fff',
                theme: {
                    'stroke-width': 1,
                    r: 0,
                    states: {
                        hover: {
                            fill: '#fff',
                            stroke: '#648caa'
                        },
                        select: {
                            fill: '#fff'
                        }
                    }
                }
            }
        },
        scale: 2,
        chartOptions: {
            events: {
                load: function () {
                    this.legend.render();
                }
            },
            rangeSelector: {
                buttons: []
            }
        }
    }
});

AJAX request to the HI-API and instantiating of the Highcharts chart

This is the central code for generating the chart.

// Get performance data for fund with ISIN DE0008479098
$.getJSON('https://api.hansainvest.com/api/v1/performance-launch/DE0008479098/', function (json_data) {

    var chart1 = new Highcharts.stockChart(
        {
            "title": {
                "text": json_data.fund.name + ' – ' + json_data.fund.isin
            },
            "chart": {
                "renderTo": "chart1"
            },
            "rangeSelector": {
                "buttons": [{
                    type: 'ytd',
                    text: 'lfd. Jahr'
                }, {
                    type: 'year',
                    count: 1,
                    text: '1 Jahr'
                }, {
                    type: 'year',
                    count: 3,
                    text: '3 Jahre'
                }, {
                    type: 'year',
                    count: 5,
                    text: '5 Jahre'
                }, {
                    type: 'year',
                    count: 10,
                    text: '10 Jahre'
                }, {
                    type: 'all',
                    text: 'seit Auflegung'
                }],
                "buttonTheme": {
                    "fill": "none",
                    "stroke": "none",
                    "r": 0,
                    "padding": 6,
                    "width": "auto",
                    "style": {
                        "color": "#648caa",
                        "fontWeight": "bold"
                    },
                    "states": {
                        "hover": {
                            "fill": "none"
                        },
                        "select": {
                            "fill": "#648caa",
                            "padding": 6,
                            "style": {
                                "color": "#fff"
                            }
                        }
                    }
                },
                "selected": 1
            },
            "legend": {
                "enabled": true,
                "layout": "horizontal",
                "verticalAlign": "bottom",
                "useHTML": false,
                "labelFormatter": function() {
                    var series = this;
                    var currentChart = series.chart;
                    var dates = series.processedXData !== undefined ? series.processedXData : series.xData;
                    var values = series.processedYData !== undefined ? series.processedYData : series.yData;
                    var minDate = currentChart.rangeSelector.minInput !== undefined ? currentChart.rangeSelector.minInput.HCTime : dates[0];
                    var maxDate = currentChart.rangeSelector.maxInput !== undefined && currentChart.rangeSelector.maxInput.HCTime <= dates[values.length - 1] ? currentChart.rangeSelector.maxInput.HCTime : dates[values.length - 1];
                    var firstValue = values[0];
                    var compareValue = series.compareValue;

                    if (isNaN(compareValue)) {
                        compareValue = firstValue;
                    }

                    var endValue = values[values.length - 1];
                    if (dates[values.length - 1] > maxDate) {
                        for (var j = values.length - 1; j > values.length - 10; j--) {
                            if (dates[j] <= maxDate) {
                                endValue = values[j];
                                break;
                            }
                        }
                    }

                    var change = Math.round(((endValue / compareValue * 100) - 100) * 100) / 100;

                    var legendText = series.name;
                    legendText = '<span style="color:' + series.color + '">' + legendText + '</span><br>' + (change > 0 ? '+' : '')  + Highcharts.numberFormat(change, 2, ',') + ' %';
                    return legendText;

                }
            },
            "credits": {
                "enabled": false
            },
            "exporting": {
                "chartOptions": {
                    "title": {
                        "text": json_data.fund.name + " - Wertentwicklung"
                    }
                },
                "filename": json_data.fund.isin + "_-_Wertentwicklung"
            },
            "tooltip": {
                "changeDecimals": 2,
                "valueDecimals": 1,
                "pointFormat": "<span style=\"color:{series.color}\">{series.name}<\/span>: <b>{point.y} %<\/b><br\/>"
            },
            "series": [{
                "name": json_data.fund.name + ' – ' + json_data.fund.isin,
                "data": json_data.performance,
                "turboThreshold": 0,
                "tooltip": {
                    "valueDecimals": 2
                },
                "color": "#648caa"
            }],
            "xAxis": {
                "startOnTick": true,
                "endOnTick": true,
                "ordinal": false,
                "events": {
                    "afterSetExtremes": function(e) {
                        var legend = this.chart.legend;
                        setTimeout(function () {
                            legend.render();
                        }, 100);

                        $('.highcharts-input-group').find('g:eq(1),g:eq(3)').trigger('change');

                        $('.rsbutton.is-active').removeClass('is-active');

                        setTimeout(function () {

                        }, 0);
                    }
                }
            },
            "yAxis": {
                "labels": {
                    "formatter": function() { return (this.value > 0 ? ' + ' : '') + this.value + '%'; }
                }
            },
            "plotOptions": {
                "series": {
                    "compare": "percent",
                    "dataGrouping": {
                        "enabled": false
                    }
                }
            },
            "tooltip": {
                "changeDecimals": 2,
                "valueDecimals": 2,
                "pointFormat": '<span style="color:{series.color}">{series.name}</span>: {point.change} %<br/>'
            }
        });
});

Optional parts

Exporting

The basic JS includes including the Highcharts exporting plugin

<!-- move to closing body tag -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/stock/highstock.js" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js" crossorigin="anonymous"></script>

<!-- place the individual Highcharts code below as inline script or include -->

Custom legend symbol for line

Override the normal symbol for the line chart in legend with SVG path

(function (H) {

    // Override the legend symbol creator function
    Highcharts.wrap(Highcharts.Series.prototype, 'drawLegendSymbol', function (proceed, legend) {
        proceed.call(this, legend);

        this.legendLine.attr({
            d: ['M', -0.42447477, 15.295743, 8.4290971, 7.2893553, 13.2928, 12.618887, 16.748548, 8.0565589]
        });
    });

}(Highcharts));

Resizing

Resizing of the chart if the viewport or the visibility of the chart changes.

/**
 * Adjust size for hidden charts
 * @param chart highcharts
 */
function adjustGraph(chart) {
    try {
        if (typeof (chart === 'undefined' || chart === null)
            && this instanceof jQuery) { // if no obj chart and the context is set
            this.find('.chart-container:visible').each(
                function () { // for only visible charts container in the curent context
                    $container = $(this); // context container
                    $container.find('div[id^="chart-"]').each(
                        function () { // for only chart
                            $chart = $(this).highcharts(); // cast from JQuery to highcharts obj
                            $chart.setSize($container.width(),
                                $chart.chartHeight,
                                doAnimation = true); // adjust chart size with animation transition
                        });
                });
        } else {
            chart.setSize($('.chart-container:visible').width(),
                chart.chartHeight, doAnimation = true); // if chart is set, adjust
        }
    } catch (err) {
        // do nothing
    }
}

$(function (H) {

    $(window).resize(function () {
        if (this.resizeTO)
            clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function () {
            // resizeEnd call function with pass context body
            adjustGraph.call($('body'));
        }, 500);
    });

});

Normal (HANSAINVEST) styling

<div id="chart1"></div>

<!-- move to closing body tag -->

<!-- use jQuery only in necessary -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<!-- Highcharts is mandatory -->
<script src="https://code.highcharts.com/highcharts.js" crossorigin="anonymous"></script>
<!-- use Highcharts exporting plugin only in necessary -->
<script src="https://code.highcharts.com/modules/exporting.js" crossorigin="anonymous"></script>

<!-- place the individual Highcharts code below as inline script or include -->
(function (H) {

    // Override the legend symbol creator function
    Highcharts.wrap(Highcharts.Series.prototype, 'drawLegendSymbol', function (proceed, legend) {
        proceed.call(this, legend);

        this.legendLine.attr({
            d: ['M', -0.42447477, 15.295743, 8.4290971, 7.2893553, 13.2928, 12.618887, 16.748548, 8.0565589]
        });
    });

}(Highcharts));

/**
 * Adjust size for hidden charts
 * @param chart highcharts
 */
function adjustGraph(chart) {
    try {
        if (typeof (chart === 'undefined' || chart === null)
            && this instanceof jQuery) { // if no obj chart and the context is set
            this.find('.chart-container:visible').each(
                function () { // for only visible charts container in the curent context
                    $container = $(this); // context container
                    $container.find('div[id^="chart-"]').each(
                        function () { // for only chart
                            $chart = $(this).highcharts(); // cast from JQuery to highcharts obj
                            $chart.setSize($container.width(),
                                $chart.chartHeight,
                                doAnimation = true); // adjust chart size with animation transition
                        });
                });
        } else {
            chart.setSize($('.chart-container:visible').width(),
                chart.chartHeight, doAnimation = true); // if chart is set, adjust
        }
    } catch (err) {
        // do nothing
    }
}

$(function (H) {

    $(window).resize(function () {
        if (this.resizeTO)
            clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function () {
            // resizeEnd call function with pass context body
            adjustGraph.call($('body'));
        }, 500);
    });

});

// Global options
Highcharts.setOptions({
    global: {
        timezoneOffset: 0 * 60
    },
    lang: {

        months: ["Januar", "Februar", "M\u00e4rz", "April", "Mai", "Juni",
            "Juli", "August", "September", "Oktober", "November",
            "Dezember"],
        shortMonths: ["Jan", "Feb", "M\u00e4r", "Apr", "Mai", "Jun",
            "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
        weekdays: ["Sonntag", "Montag", "Dienstag", "Mittwoch",
            "Donnerstag", "Freitag", "Samstag"],
        rangeSelectorZoom: '',
        rangeSelectorFrom: 'Von',
        rangeSelectorTo: 'Bis',
        thousandsSep: '.',
        decimalPoint: ',',
        downloadJPEG: 'als JPG herunterladen',
        downloadPDF: 'als PDF herunterladen',
        downloadPNG: 'als PNG herunterladen',
        downloadSVG: 'als SVG herunterladen',
        printChart: 'Chart drucken'

    },
    title: {
        style: {
            color: '#648caa'
        }
    },
    exporting: {
        buttons: {
            contextButton: {
                symbolStroke: '#648caa',
                symbolFill: '#fff',
                theme: {
                    'stroke-width': 1,
                    r: 0,
                    states: {
                        hover: {
                            fill: '#fff',
                            stroke: '#648caa'
                        },
                        select: {
                            fill: '#fff'
                        }
                    }
                }
            }
        },
        scale: 2,
        chartOptions: {
            events: {
                load: function () {
                    this.legend.render();
                }
            },
            rangeSelector: {
                buttons: []
            }
        }
    }
});

// Get performance data for fund with ISIN DE0008479015
$.getJSON('https://api.hansainvest.com/api/v1/performance-launch/DE0008479015/', function (json_data) {

    var chart1 = new Highcharts.stockChart(
        {
            "title": {
                "text": json_data.fund.name + ' – ' + json_data.fund.isin
            },
            "chart": {
                "renderTo": "chart1"
            },
            "rangeSelector": {
                "buttons": [{
                    type: 'ytd',
                    text: 'lfd. Jahr'
                }, {
                    type: 'year',
                    count: 1,
                    text: '1 Jahr'
                }, {
                    type: 'year',
                    count: 3,
                    text: '3 Jahre'
                }, {
                    type: 'year',
                    count: 5,
                    text: '5 Jahre'
                }, {
                    type: 'year',
                    count: 10,
                    text: '10 Jahre'
                }, {
                    type: 'all',
                    text: 'seit Auflegung'
                }],
                "buttonTheme": {
                    "fill": "none",
                    "stroke": "none",
                    "r": 0,
                    "padding": 6,
                    "width": "auto",
                    "style": {
                        "color": "#648caa",
                        "fontWeight": "bold"
                    },
                    "states": {
                        "hover": {
                            "fill": "none"
                        },
                        "select": {
                            "fill": "#648caa",
                            "padding": 6,
                            "style": {
                                "color": "#fff"
                            }
                        }
                    }
                },
                "selected": 1
            },
            "legend": {
                "enabled": true,
                "layout": "horizontal",
                "verticalAlign": "bottom",
                "useHTML": false,
                "labelFormatter": function() {
                    var series = this;
                    var currentChart = series.chart;
                    var dates = series.processedXData !== undefined ? series.processedXData : series.xData;
                    var values = series.processedYData !== undefined ? series.processedYData : series.yData;
                    var minDate = currentChart.rangeSelector.minInput !== undefined ? currentChart.rangeSelector.minInput.HCTime : dates[0];
                    var maxDate = currentChart.rangeSelector.maxInput !== undefined && currentChart.rangeSelector.maxInput.HCTime <= dates[values.length - 1] ? currentChart.rangeSelector.maxInput.HCTime : dates[values.length - 1];
                    var firstValue = values[0];
                    var compareValue = series.compareValue;

                    if (isNaN(compareValue)) {
                        compareValue = firstValue;
                    }

                    var endValue = values[values.length - 1];
                    if (dates[values.length - 1] > maxDate) {
                        for (var j = values.length - 1; j > values.length - 10; j--) {
                            if (dates[j] <= maxDate) {
                                endValue = values[j];
                                break;
                            }
                        }
                    }

                    var change = Math.round(((endValue / compareValue * 100) - 100) * 100) / 100;

                    var legendText = series.name;
                    legendText = '<span style="color:' + series.color + '">' + legendText + '</span><br>' + (change > 0 ? '+' : '')  + Highcharts.numberFormat(change, 2, ',') + ' %';
                    return legendText;

                }
            },
            "credits": {
                "enabled": false
            },
            "exporting": {
                "chartOptions": {
                    "title": {
                        "text": json_data.fund.name + " - Wertentwicklung"
                    }
                },
                "filename": json_data.fund.isin + "_-_Wertentwicklung"
            },
            "tooltip": {
                "changeDecimals": 2,
                "valueDecimals": 1,
                "pointFormat": "<span style=\"color:{series.color}\">{series.name}<\/span>: <b>{point.y} %<\/b><br\/>"
            },
            "series": [{
                "name": json_data.fund.name + ' – ' + json_data.fund.isin,
                "data": json_data.performance,
                "turboThreshold": 0,
                "tooltip": {
                    "valueDecimals": 2
                },
                "color": "#648caa"
            }],
            "xAxis": {
                "startOnTick": true,
                "endOnTick": true,
                "ordinal": false,
                "events": {
                    "afterSetExtremes": function(e) {
                        var legend = this.chart.legend;
                        setTimeout(function () {
                            legend.render();
                        }, 100);

                        $('.highcharts-input-group').find('g:eq(1),g:eq(3)').trigger('change');

                        $('.rsbutton.is-active').removeClass('is-active');

                        setTimeout(function () {

                        }, 0);
                    }
                }
            },
            "yAxis": {
                "labels": {
                    "formatter": function() { return (this.value > 0 ? ' + ' : '') + this.value + '%'; }
                }
            },
            "plotOptions": {
                "series": {
                    "compare": "percent",
                    "dataGrouping": {
                        "enabled": false
                    }
                }
            },
            "tooltip": {
                "changeDecimals": 2,
                "valueDecimals": 2,
                "pointFormat": '<span style="color:{series.color}">{series.name}</span>: {point.change} %<br/>'
            }
        });
});

Different colors

<div id="chart3"></div>

<!-- move to closing body tag -->

<!-- use jQuery only in necessary -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<!-- Highcharts is mandatory -->
<script src="https://code.highcharts.com/highcharts.js" crossorigin="anonymous"></script>
<!-- use Highcharts exporting plugin only in necessary -->
<script src="https://code.highcharts.com/modules/exporting.js" crossorigin="anonymous"></script>

<!-- place the individual Highcharts code below as inline script or include -->
(function (H) {

    // Override the legend symbol creator function
    Highcharts.wrap(Highcharts.Series.prototype, 'drawLegendSymbol', function (proceed, legend) {
        proceed.call(this, legend);

        this.legendLine.attr({
            d: ['M', -0.42447477, 15.295743, 8.4290971, 7.2893553, 13.2928, 12.618887, 16.748548, 8.0565589]
        });
    });

}(Highcharts));

/**
 * Adjust size for hidden charts
 * @param chart highcharts
 */
function adjustGraph(chart) {
    try {
        if (typeof (chart === 'undefined' || chart === null)
            && this instanceof jQuery) { // if no obj chart and the context is set
            this.find('.chart-container:visible').each(
                function () { // for only visible charts container in the curent context
                    $container = $(this); // context container
                    $container.find('div[id^="chart-"]').each(
                        function () { // for only chart
                            $chart = $(this).highcharts(); // cast from JQuery to highcharts obj
                            $chart.setSize($container.width(),
                                $chart.chartHeight,
                                doAnimation = true); // adjust chart size with animation transition
                        });
                });
        } else {
            chart.setSize($('.chart-container:visible').width(),
                chart.chartHeight, doAnimation = true); // if chart is set, adjust
        }
    } catch (err) {
        // do nothing
    }
}

$(function (H) {

    $(window).resize(function () {
        if (this.resizeTO)
            clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function () {
            // resizeEnd call function with pass context body
            adjustGraph.call($('body'));
        }, 500);
    });

});

// Global options
Highcharts.setOptions({
    global: {
        timezoneOffset: 0 * 60
    },
    lang: {

        months: ["Januar", "Februar", "M\u00e4rz", "April", "Mai", "Juni",
            "Juli", "August", "September", "Oktober", "November",
            "Dezember"],
        shortMonths: ["Jan", "Feb", "M\u00e4r", "Apr", "Mai", "Jun",
            "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
        weekdays: ["Sonntag", "Montag", "Dienstag", "Mittwoch",
            "Donnerstag", "Freitag", "Samstag"],
        rangeSelectorZoom: '',
        rangeSelectorFrom: 'Von',
        rangeSelectorTo: 'Bis',
        thousandsSep: '.',
        decimalPoint: ',',
        downloadJPEG: 'als JPG herunterladen',
        downloadPDF: 'als PDF herunterladen',
        downloadPNG: 'als PNG herunterladen',
        downloadSVG: 'als SVG herunterladen',
        printChart: 'Chart drucken'

    },
    title: {
        style: {
            color: '#648caa'
        }
    },
    exporting: {
        buttons: {
            contextButton: {
                symbolStroke: '#648caa',
                symbolFill: '#fff',
                theme: {
                    'stroke-width': 1,
                    r: 0,
                    states: {
                        hover: {
                            fill: '#fff',
                            stroke: '#648caa'
                        },
                        select: {
                            fill: '#fff'
                        }
                    }
                }
            }
        },
        scale: 2,
        chartOptions: {
            events: {
                load: function () {
                    this.legend.render();
                }
            },
            rangeSelector: {
                buttons: []
            }
        }
    }
});

// Get performance data for fund with ISIN DE0008479015
$.getJSON('https://api.hansainvest.com/api/v1/performance-launch/DE0008479015/', function (json_data) {

    var chart2 = new Highcharts.stockChart(
        {
            "title": {
                "text": json_data.fund.name + ' – ' + json_data.fund.isin
            },
            "chart": {
                "renderTo": "chart2"
            },
            "rangeSelector": {
                "buttons": [{
                    type: 'ytd',
                    text: 'lfd. Jahr'
                }, {
                    type: 'year',
                    count: 1,
                    text: '1 Jahr'
                }, {
                    type: 'year',
                    count: 3,
                    text: '3 Jahre'
                }, {
                    type: 'year',
                    count: 5,
                    text: '5 Jahre'
                }, {
                    type: 'year',
                    count: 10,
                    text: '10 Jahre'
                }, {
                    type: 'all',
                    text: 'seit Auflegung'
                }],
                "buttonTheme": {
                    "fill": "none",
                    "stroke": "none",
                    "r": 0,
                    "padding": 6,
                    "width": "auto",
                    "style": {
                        "color": "#648caa",
                        "fontWeight": "bold"
                    },
                    "states": {
                        "hover": {
                            "fill": "none"
                        },
                        "select": {
                            "fill": "#648caa",
                            "padding": 6,
                            "style": {
                                "color": "#fff"
                            }
                        }
                    }
                },
                "selected": 1
            },
            "legend": {
                "enabled": true,
                "layout": "horizontal",
                "verticalAlign": "bottom",
                "useHTML": false,
                "labelFormatter": function() {
                    var series = this;
                    var currentChart = series.chart;
                    var dates = series.processedXData !== undefined ? series.processedXData : series.xData;
                    var values = series.processedYData !== undefined ? series.processedYData : series.yData;
                    var minDate = currentChart.rangeSelector.minInput !== undefined ? currentChart.rangeSelector.minInput.HCTime : dates[0];
                    var maxDate = currentChart.rangeSelector.maxInput !== undefined && currentChart.rangeSelector.maxInput.HCTime <= dates[values.length - 1] ? currentChart.rangeSelector.maxInput.HCTime : dates[values.length - 1];
                    var firstValue = values[0];
                    var compareValue = series.compareValue;

                    if (isNaN(compareValue)) {
                        compareValue = firstValue;
                    }

                    var endValue = values[values.length - 1];
                    if (dates[values.length - 1] > maxDate) {
                        for (var j = values.length - 1; j > values.length - 10; j--) {
                            if (dates[j] <= maxDate) {
                                endValue = values[j];
                                break;
                            }
                        }
                    }

                    var change = Math.round(((endValue / compareValue * 100) - 100) * 100) / 100;

                    var legendText = series.name;
                    legendText = '<span style="color:' + series.color + '">' + legendText + '</span><br>' + (change > 0 ? '+' : '')  + Highcharts.numberFormat(change, 2, ',') + ' %';
                    return legendText;

                }
            },
            "credits": {
                "enabled": false
            },
            "exporting": {
                "chartOptions": {
                    "title": {
                        "text": json_data.fund.name + " - Wertentwicklung"
                    }
                },
                "filename": json_data.fund.isin + "_-_Wertentwicklung"
            },
            "tooltip": {
                "changeDecimals": 2,
                "valueDecimals": 1,
                "pointFormat": "<span style=\"color:{series.color}\">{series.name}<\/span>: <b>{point.y} %<\/b><br\/>"
            },
            "series": [{
                "name": json_data.fund.name + ' – ' + json_data.fund.isin,
                "data": json_data.performance,
                "turboThreshold": 0,
                "tooltip": {
                    "valueDecimals": 2
                },
                "color": "#648caa"
            }],
            "xAxis": {
                "startOnTick": true,
                "endOnTick": true,
                "ordinal": false,
                "events": {
                    "afterSetExtremes": function(e) {
                        var legend = this.chart.legend;
                        setTimeout(function () {
                            legend.render();
                        }, 100);

                        $('.highcharts-input-group').find('g:eq(1),g:eq(3)').trigger('change');

                        $('.rsbutton.is-active').removeClass('is-active');

                        setTimeout(function () {

                        }, 0);
                    }
                }
            },
            "yAxis": {
                "labels": {
                    "formatter": function() { return (this.value > 0 ? ' + ' : '') + this.value + '%'; }
                }
            },
            "plotOptions": {
                "series": {
                    "compare": "percent",
                    "dataGrouping": {
                        "enabled": false
                    }
                }
            },
            "tooltip": {
                "changeDecimals": 2,
                "valueDecimals": 2,
                "pointFormat": '<span style="color:{series.color}">{series.name}</span>: {point.change} %<br/>'
            }
        });
});

Different width and colors

<div id="chart3"></div>

<!-- move to closing body tag -->

<!-- use jQuery only in necessary -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<!-- Highcharts is mandatory -->
<script src="https://code.highcharts.com/highcharts.js" crossorigin="anonymous"></script>
<!-- use Highcharts exporting plugin only in necessary -->
<script src="https://code.highcharts.com/modules/exporting.js" crossorigin="anonymous"></script>

<!-- place the individual Highcharts code below as inline script or include -->
(function (H) {

    // Override the legend symbol creator function
    Highcharts.wrap(Highcharts.Series.prototype, 'drawLegendSymbol', function (proceed, legend) {
        proceed.call(this, legend);

        this.legendLine.attr({
            d: ['M', -0.42447477, 15.295743, 8.4290971, 7.2893553, 13.2928, 12.618887, 16.748548, 8.0565589]
        });
    });

}(Highcharts));

/**
 * Adjust size for hidden charts
 * @param chart highcharts
 */
function adjustGraph(chart) {
    try {
        if (typeof (chart === 'undefined' || chart === null)
            && this instanceof jQuery) { // if no obj chart and the context is set
            this.find('.chart-container:visible').each(
                function () { // for only visible charts container in the curent context
                    $container = $(this); // context container
                    $container.find('div[id^="chart-"]').each(
                        function () { // for only chart
                            $chart = $(this).highcharts(); // cast from JQuery to highcharts obj
                            $chart.setSize($container.width(),
                                $chart.chartHeight,
                                doAnimation = true); // adjust chart size with animation transition
                        });
                });
        } else {
            chart.setSize($('.chart-container:visible').width(),
                chart.chartHeight, doAnimation = true); // if chart is set, adjust
        }
    } catch (err) {
        // do nothing
    }
}

$(function (H) {

    $(window).resize(function () {
        if (this.resizeTO)
            clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function () {
            // resizeEnd call function with pass context body
            adjustGraph.call($('body'));
        }, 500);
    });

});

// Global options
Highcharts.setOptions({
    global: {
        timezoneOffset: 0 * 60
    },
    lang: {

        months: ["Januar", "Februar", "M\u00e4rz", "April", "Mai", "Juni",
            "Juli", "August", "September", "Oktober", "November",
            "Dezember"],
        shortMonths: ["Jan", "Feb", "M\u00e4r", "Apr", "Mai", "Jun",
            "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
        weekdays: ["Sonntag", "Montag", "Dienstag", "Mittwoch",
            "Donnerstag", "Freitag", "Samstag"],
        rangeSelectorZoom: '',
        rangeSelectorFrom: 'Von',
        rangeSelectorTo: 'Bis',
        thousandsSep: '.',
        decimalPoint: ',',
        downloadJPEG: 'als JPG herunterladen',
        downloadPDF: 'als PDF herunterladen',
        downloadPNG: 'als PNG herunterladen',
        downloadSVG: 'als SVG herunterladen',
        printChart: 'Chart drucken'

    },
    title: {
        style: {
            color: '#648caa'
        }
    },
    exporting: {
        buttons: {
            contextButton: {
                symbolStroke: '#648caa',
                symbolFill: '#fff',
                theme: {
                    'stroke-width': 1,
                    r: 0,
                    states: {
                        hover: {
                            fill: '#fff',
                            stroke: '#648caa'
                        },
                        select: {
                            fill: '#fff'
                        }
                    }
                }
            }
        },
        scale: 2,
        chartOptions: {
            events: {
                load: function () {
                    this.legend.render();
                }
            },
            rangeSelector: {
                buttons: []
            }
        }
    }
});

// Get performance data for fund with ISIN DE0008479015
$.getJSON('https://api.hansainvest.com/api/v1/performance-launch/DE0008479015/', function (json_data) {

    var chart3 = new Highcharts.stockChart(
        {
            "title": {
                "text": json_data.fund.name + ' – ' + json_data.fund.isin
            },
            "chart": {
                "renderTo": "chart3"
            },
            "rangeSelector": {
                "buttons": [{
                    type: 'ytd',
                    text: 'lfd. Jahr'
                }, {
                    type: 'year',
                    count: 1,
                    text: '1 Jahr'
                }, {
                    type: 'year',
                    count: 3,
                    text: '3 Jahre'
                }, {
                    type: 'year',
                    count: 5,
                    text: '5 Jahre'
                }, {
                    type: 'year',
                    count: 10,
                    text: '10 Jahre'
                }, {
                    type: 'all',
                    text: 'seit Auflegung'
                }],
                "buttonTheme": {
                    "fill": "none",
                    "stroke": "none",
                    "r": 0,
                    "padding": 6,
                    "width": "auto",
                    "style": {
                        "color": "#648caa",
                        "fontWeight": "bold"
                    },
                    "states": {
                        "hover": {
                            "fill": "none"
                        },
                        "select": {
                            "fill": "#648caa",
                            "padding": 6,
                            "style": {
                                "color": "#fff"
                            }
                        }
                    }
                },
                "selected": 1
            },
            "legend": {
                "enabled": true,
                "layout": "horizontal",
                "verticalAlign": "bottom",
                "useHTML": false,
                "labelFormatter": function() {
                    var series = this;
                    var currentChart = series.chart;
                    var dates = series.processedXData !== undefined ? series.processedXData : series.xData;
                    var values = series.processedYData !== undefined ? series.processedYData : series.yData;
                    var minDate = currentChart.rangeSelector.minInput !== undefined ? currentChart.rangeSelector.minInput.HCTime : dates[0];
                    var maxDate = currentChart.rangeSelector.maxInput !== undefined && currentChart.rangeSelector.maxInput.HCTime <= dates[values.length - 1] ? currentChart.rangeSelector.maxInput.HCTime : dates[values.length - 1];
                    var firstValue = values[0];
                    var compareValue = series.compareValue;

                    if (isNaN(compareValue)) {
                        compareValue = firstValue;
                    }

                    var endValue = values[values.length - 1];
                    if (dates[values.length - 1] > maxDate) {
                        for (var j = values.length - 1; j > values.length - 10; j--) {
                            if (dates[j] <= maxDate) {
                                endValue = values[j];
                                break;
                            }
                        }
                    }

                    var change = Math.round(((endValue / compareValue * 100) - 100) * 100) / 100;

                    var legendText = series.name;
                    legendText = '<span style="color:' + series.color + '">' + legendText + '</span><br>' + (change > 0 ? '+' : '')  + Highcharts.numberFormat(change, 2, ',') + ' %';
                    return legendText;

                }
            },
            "credits": {
                "enabled": false
            },
            "exporting": {
                "chartOptions": {
                    "title": {
                        "text": json_data.fund.name + " - Wertentwicklung"
                    }
                },
                "filename": json_data.fund.isin + "_-_Wertentwicklung"
            },
            "tooltip": {
                "changeDecimals": 2,
                "valueDecimals": 1,
                "pointFormat": "<span style=\"color:{series.color}\">{series.name}<\/span>: <b>{point.y} %<\/b><br\/>"
            },
            "series": [{
                "name": json_data.fund.name + ' – ' + json_data.fund.isin,
                "data": json_data.performance,
                "turboThreshold": 0,
                "tooltip": {
                    "valueDecimals": 2
                },
                "color": "#648caa"
            }],
            "xAxis": {
                "startOnTick": true,
                "endOnTick": true,
                "ordinal": false,
                "events": {
                    "afterSetExtremes": function(e) {
                        var legend = this.chart.legend;
                        setTimeout(function () {
                            legend.render();
                        }, 100);

                        $('.highcharts-input-group').find('g:eq(1),g:eq(3)').trigger('change');

                        $('.rsbutton.is-active').removeClass('is-active');

                        setTimeout(function () {

                        }, 0);
                    }
                }
            },
            "yAxis": {
                "labels": {
                    "formatter": function() { return (this.value > 0 ? ' + ' : '') + this.value + '%'; }
                }
            },
            "plotOptions": {
                "series": {
                    "compare": "percent",
                    "dataGrouping": {
                        "enabled": false
                    }
                }
            },
            "tooltip": {
                "changeDecimals": 2,
                "valueDecimals": 2,
                "pointFormat": '<span style="color:{series.color}">{series.name}</span>: {point.change} %<br/>'
            }
        });
});

Generate code for custom colors

<div id="chart-cg"></div>

<!-- move to closing body tag -->

<!-- use jQuery only in necessary -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<!-- Highstock is mandatory -->
<script src="https://code.highcharts.com/stock/highstock.js" crossorigin="anonymous"></script>
<!-- use Highcharts exporting plugin only in necessary -->
<script src="https://code.highcharts.com/stock/modules/exporting.js" crossorigin="anonymous"></script>

<!-- place the individual Highcharts code below as inline script or include -->
(function (H) {

    // Override the legend symbol creator function
    Highcharts.wrap(Highcharts.Series.prototype, 'drawLegendSymbol', function (proceed, legend) {
        proceed.call(this, legend);

        this.legendLine.attr({
            d: ['M', -0.42447477, 15.295743, 8.4290971, 7.2893553, 13.2928, 12.618887, 16.748548, 8.0565589]
        });
    });

}(Highcharts));

/**
 * Adjust size for hidden charts
 * @param chart highcharts
 */
function adjustGraph(chart) {
    try {
        if (typeof (chart === 'undefined' || chart === null)
            && this instanceof jQuery) { // if no obj chart and the context is set
            this.find('.chart-container:visible').each(
                function () { // for only visible charts container in the curent context
                    $container = $(this); // context container
                    $container.find('div[id^="chart-"]').each(
                        function () { // for only chart
                            $chart = $(this).highcharts(); // cast from JQuery to highcharts obj
                            $chart.setSize($container.width(),
                                $chart.chartHeight,
                                doAnimation = true); // adjust chart size with animation transition
                        });
                });
        } else {
            chart.setSize($('.chart-container:visible').width(),
                chart.chartHeight, doAnimation = true); // if chart is set, adjust
        }
    } catch (err) {
        // do nothing
    }
}

$(function (H) {

    $(window).resize(function () {
        if (this.resizeTO)
            clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function () {
            // resizeEnd call function with pass context body
            adjustGraph.call($('body'));
        }, 500);
    });

});

// Global options
Highcharts.setOptions({
    global: {
        timezoneOffset: 0 * 60
    },
    lang: {

        months: ["Januar", "Februar", "M\u00e4rz", "April", "Mai", "Juni",
            "Juli", "August", "September", "Oktober", "November",
            "Dezember"],
        shortMonths: ["Jan", "Feb", "M\u00e4r", "Apr", "Mai", "Jun",
            "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
        weekdays: ["Sonntag", "Montag", "Dienstag", "Mittwoch",
            "Donnerstag", "Freitag", "Samstag"],
        rangeSelectorZoom: '',
        rangeSelectorFrom: 'Von',
        rangeSelectorTo: 'Bis',
        thousandsSep: '.',
        decimalPoint: ',',
        downloadJPEG: 'als JPG herunterladen',
        downloadPDF: 'als PDF herunterladen',
        downloadPNG: 'als PNG herunterladen',
        downloadSVG: 'als SVG herunterladen',
        printChart: 'Chart drucken'

    },
    title: {
        style: {
            color: '#648caa'
        }
    },
    exporting: {
        buttons: {
            contextButton: {
                symbolStroke: '#648caa',
                symbolFill: '#fff',
                theme: {
                    'stroke-width': 1,
                    r: 0,
                    states: {
                        hover: {
                            fill: '#fff',
                            stroke: '#648caa'
                        },
                        select: {
                            fill: '#fff'
                        }
                    }
                }
            }
        },
        scale: 2,
        chartOptions: {
            events: {
                load: function () {
                    this.legend.render();
                }
            },
            rangeSelector: {
                buttons: []
            }
        }
    }
});

(function (H) {

    // Override the legend symbol creator function
    Highcharts.wrap(Highcharts.Series.prototype, 'drawLegendSymbol', function (proceed, legend) {
        proceed.call(this, legend);

        this.legendLine.attr({
            d: ['M', -0.42447477, 15.295743, 8.4290971, 7.2893553, 13.2928, 12.618887, 16.748548, 8.0565589]
        });
    });

}(Highcharts));

/**
 * Adjust size for hidden charts
 * @param chart highcharts
 */
function adjustGraph(chart) {
    try {
        if (typeof (chart === 'undefined' || chart === null)
            && this instanceof jQuery) { // if no obj chart and the context is set
            this.find('.chart-container:visible').each(
                function () { // for only visible charts container in the curent context
                    $container = $(this); // context container
                    $container.find('div[id^="chart-"]').each(
                        function () { // for only chart
                            $chart = $(this).highcharts(); // cast from JQuery to highcharts obj
                            $chart.setSize($container.width(),
                                $chart.chartHeight,
                                doAnimation = true); // adjust chart size with animation transition
                        });
                });
        } else {
            chart.setSize($('.chart-container:visible').width(),
                chart.chartHeight, doAnimation = true); // if chart is set, adjust
        }
    } catch (err) {
        // do nothing
    }
}

$(function (H) {

    $(window).resize(function () {
        if (this.resizeTO)
            clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function () {
            // resizeEnd call function with pass context body
            adjustGraph.call($('body'));
        }, 500);
    });

});

// Global options
Highcharts.setOptions({
    global: {
        timezoneOffset: 0 * 60
    },
    lang: {

        months: ["Januar", "Februar", "M\u00e4rz", "April", "Mai", "Juni",
            "Juli", "August", "September", "Oktober", "November",
            "Dezember"],
        shortMonths: ["Jan", "Feb", "M\u00e4r", "Apr", "Mai", "Jun",
            "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
        weekdays: ["Sonntag", "Montag", "Dienstag", "Mittwoch",
            "Donnerstag", "Freitag", "Samstag"],
        rangeSelectorZoom: '',
        rangeSelectorFrom: 'Von',
        rangeSelectorTo: 'Bis',
        thousandsSep: '.',
        decimalPoint: ',',
        downloadJPEG: 'als JPG herunterladen',
        downloadPDF: 'als PDF herunterladen',
        downloadPNG: 'als PNG herunterladen',
        downloadSVG: 'als SVG herunterladen',
        printChart: 'Chart drucken'

    },
    title: {
        style: {
            color: '#648caa'
        }
    },
    exporting: {
        buttons: {
            contextButton: {
                symbolStroke: '#648caa',
                symbolFill: '#fff',
                theme: {
                    'stroke-width': 1,
                    r: 0,
                    states: {
                        hover: {
                            fill: '#fff',
                            stroke: '#648caa'
                        },
                        select: {
                            fill: '#fff'
                        }
                    }
                }
            }
        },
        scale: 2,
        chartOptions: {
            events: {
                load: function () {
                    this.legend.render();
                }
            },
            rangeSelector: {
                buttons: []
            }
        }
    }
});

// Get performance data for fund with ISIN DE0008479015
$.getJSON('https://api.hansainvest.com/api/v1/performance-launch/DE0008479015/', function (json_data) {

    var chart = new Highcharts.stockChart(
        {
            "title": {
                "text": json_data.fund.name + ' – ' + json_data.fund.isin
            },
            "chart": {
                "renderTo": "chart-cg",
                "backgroundColor": "#ffffff"
            },
            "rangeSelector": {
                "buttons": [{
                    type: 'ytd',
                    text: 'lfd. Jahr'
                }, {
                    type: 'year',
                    count: 1,
                    text: '1 Jahr'
                }, {
                    type: 'year',
                    count: 3,
                    text: '3 Jahre'
                }, {
                    type: 'year',
                    count: 5,
                    text: '5 Jahre'
                }, {
                    type: 'year',
                    count: 10,
                    text: '10 Jahre'
                }, {
                    type: 'all',
                    text: 'seit Auflegung'
                }],
                "buttonTheme": {
                    "fill": "#ffffff",
                    "stroke": "none",
                    "r": 0,
                    "padding": 6,
                    "width": "auto",
                    "style": {
                        "color": "#648caa",
                        "fontWeight": "bold"
                    },
                    "states": {
                        "hover": {
                            "fill": "none"
                        },
                        "select": {
                            "fill": "#648caa",
                            "padding": 6,
                            "style": {
                                "color": "#ffffff"
                            }
                        }
                    }
                },
                "selected": 1
            },
            "legend": {
                "enabled": true,
                "layout": "horizontal",
                "verticalAlign": "bottom",
                "useHTML": false,
                "labelFormatter": function() {
                    var series = this;
                    var currentChart = series.chart;
                    var dates = series.processedXData !== undefined ? series.processedXData : series.xData;
                    var values = series.processedYData !== undefined ? series.processedYData : series.yData;
                    var minDate = currentChart.rangeSelector.minInput !== undefined ? currentChart.rangeSelector.minInput.HCTime : dates[0];
                    var maxDate = currentChart.rangeSelector.maxInput !== undefined && currentChart.rangeSelector.maxInput.HCTime <= dates[values.length - 1] ? currentChart.rangeSelector.maxInput.HCTime : dates[values.length - 1];
                    var firstValue = values[0];
                    var compareValue = series.compareValue;

                    if (isNaN(compareValue)) {
                        compareValue = firstValue;
                    }

                    var endValue = values[values.length - 1];
                    if (dates[values.length - 1] > maxDate) {
                        for (var j = values.length - 1; j > values.length - 10; j--) {
                            if (dates[j] <= maxDate) {
                                endValue = values[j];
                                break;
                            }
                        }
                    }

                    var change = Math.round(((endValue / compareValue * 100) - 100) * 100) / 100;

                    var legendText = series.name;
                    legendText = '<span style="color:' + series.color + '">' + legendText + '</span><br>' + (change > 0 ? '+' : '')  + Highcharts.numberFormat(change, 2, ',') + ' %';
                    return legendText;

                }
            },
            "credits": {
                "enabled": false
            },
            "exporting": {
                "chartOptions": {
                    "title": {
                        "text": json_data.fund.name + " - Wertentwicklung"
                    }
                },
                "filename": json_data.fund.isin + "_-_Wertentwicklung"
            },
            "tooltip": {
                "changeDecimals": 2,
                "valueDecimals": 1,
                "pointFormat": "<span style=\"color:{series.color}\">{series.name}<\/span>: <b>{point.y} %<\/b><br\/>"
            },
            "series": [{
                "name": json_data.fund.name + ' – ' + json_data.fund.isin,
                "data": json_data.performance,
                "turboThreshold": 0,
                "tooltip": {
                    "valueDecimals": 2
                },
                "color": "#648caa"
            }],
            "xAxis": {
                "startOnTick": true,
                "endOnTick": true,
                "ordinal": false,
                "gridLineDashStyle": "Dot",
                "gridLineWidth": 1,
                "gridLineColor": "#648caa",
                "events": {
                    "afterSetExtremes": function(e) {
                        var legend = this.chart.legend;
                        setTimeout(function () {
                            legend.render();
                        }, 100);

                        $('.highcharts-input-group').find('g:eq(1),g:eq(3)').trigger('change');

                        $('.rsbutton.is-active').removeClass('is-active');

                        setTimeout(function () {

                        }, 0);
                    }
                }
            },
            "yAxis": {
                "labels": {
                    "formatter": function() { return (this.value > 0 ? ' + ' : '') + this.value + '%'; }
                },
                "gridLineDashStyle": "Dot",
                "gridLineColor": "#648caa"
            },
            "plotOptions": {
                "series": {
                    "compare": "percent",
                    "dataGrouping": {
                        "enabled": false
                    }
                }
            },
            "navigator": {
                "maskFill": "rgba(102,133,194,0.3)"
            },
            "tooltip": {
                "changeDecimals": 2,
                "valueDecimals": 2,
                "pointFormat": '<span style="color:{series.color}">{series.name}</span>: {point.change} %<br/>'
            }
        });
});