Highcharts Demo

author(s): Torstein Hønsi

by oysteinmoseng

HTML

<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/modules/stock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<script src="https://code.highcharts.com/modules/sonification.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/themes/high-contrast-light.js"></script>

<div id="container"></div>

CSS

#container {
    min-width: 310px;
    max-width: 600px;
    height: 400px;
    margin: 0 auto;
}

JavaScript

Highcharts.addEvent(Highcharts.Axis, 'afterInit', function () {
        const logarithmic = this.logarithmic;

        if (logarithmic && this.options.custom && this.options.custom.allowNegativeLog) {

            // Avoid errors on negative numbers on a log axis
            this.positiveValuesOnly = false;

            // Override the converter functions
            logarithmic.log2lin = (num) => {
                const isNegative = num < 0;

                let adjustedNum = Math.abs(num);

                if (adjustedNum < 10) {
                    adjustedNum += (10 - adjustedNum) / 10;
                }

                const result = Math.log(adjustedNum) / Math.LN10;
                return isNegative ? -result : result;
            };

            logarithmic.lin2log = (num) => {
                const isNegative = num < 0;

                let result = Math.pow(10, Math.abs(num));
                if (result < 10) {
                    result = (10 * (result - 1)) / (10 - 1);
                }
                return isNegative ? -result : result;
            };
        }
    });
    
var strOpts = '{"lang":{"accessibility":{"chartTypes":{"splineSingle":"Smoothed line chart.","splineMultiple":"Smoothed line chart.","lineSingle":"Line chart.","lineMultiple":"Line chart.","pieSingle":"Pie chart.","pieMultiple":"Pie chart.","columnSingle":"Column chart.","columnMultiple":"Column chart.","scatterSingle":"Scatter chart.","scatterMultiple":"Scatter chart.","areasplineSingle":"Smoothed area chart.","areasplineMultiple":"Smoothed area chart."}}},"chart":{"animation":{"duration":600},"panKey":"alt","type":"line","inverted":false,"zoomType":"x"},"exporting":{"enabled":false,"sourceWidth":900,"chartOptions":{"title":{"style":{"fontFamily":"Verdana,...