Data Visualization with JavaScript Practice - Highcharts.js

Color Configuration

Highcharts Color Methods

Highcharts.Color('#7cb5ec').brighten(-0.3).get('rgb')
Highcharts.Color('#7cb5ec').brighten(0.3).get()

Highcharts Preset Color Values

  1. Highcharts.getOptions().colors , is a color values array. In my version, its values are
["#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9", "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1"]

so first value, Highcharts.getOptions().colors[0], is "#7cb5ec".

When Theme JS Included

  1. (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', is a way to use theme color.

Different Colors for Different Points/Bars/...

  1. set colorByPoint: true in plotOptions: series/bar/...

Change Highcharts Default Colors to Given Colors

Highcharts.setOptions({  
   colors: ['#058DC7', '#50B432', '#ED561B','#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']  
});  

Change Highcharts Default Colors to Gradient Colors

Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
    return {
        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
        stops: [
            [0, color],
            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
        ]
    };
});

Change Pie Chart Default Colors to Gradient Monochrome Colors

  1. Make monochrome colors
  2. set them as default for all pies
Highcharts.getOptions().plotOptions.pie.colors = (function () {
    var colors = [],
        base = Highcharts.getOptions().colors[0],
        i;

    for (i = 0; i < 10; i += 1) {  // Start out with a darkened base color (negative brighten), end up with a much brighter color
        colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
    }
    return colors;
}());

Number Formatter

Highcharts Number Formatter Methods

Highcharts.numberFormat(3.8970, 2) // "3.90"

Tooltips

    format: '<b>{point.name}</b>: {point.percentage:.1f} %',

    formatter: function () {
        return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + Highcharts.numberFormat(this.point.percentage, 2) + '%' : null;
    },

Stack Options

Stack Orders, from last to first or from first to last

  1. set reversedStacks: false to yAxis
  2. use index option in data, such as index:1, legendIndex:0

Ref: Highcharts - Change legend index order

Global Configuration

Recommend in file myhighcharts.js.

Highcharts.setOptions({
    chart: {
        style: {
            fontFamily: '"Microsoft YaHei", 微软雅黑, MicrosoftJhengHei, 华文细黑, STHeiti, MingLiu'
        }
    }
});

Useful Option Pieces

General

series: [{ ... colorByPoint: true}}]
series: [{ ... color: 'rgb(69, 114, 167)'}}]
series: [{ ... fillColor: 'rgba(69, 114, 167,.25)'}}]

xAxis.tickLength: 70
yAxis.maxPadding: 0
yAxis.tickInterval: 25
yAxis.endOnTick: false

var credits = {
    enabled: false
};

Line Chart

var plotOptions = {
    series: {
        dataLabels: {
            enabled: true,
            formatter: function () {
                return Highcharts.numberFormat(Math.abs(this.y) * 100, 2) + '%';
            },
            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'gray'
        }
    }
}

var tooltip = {
    formatter: function () {
        var s = '<b>' + this.x + '</b>';

        s += '<br/>' + this.series.name + ': ' +
            Math.abs(this.y) * 100 + '%';

        return s;
    }
};

Stack Chart

var yAxis = {
    reversedStacks: false,
    stackLabels: {
        enabled: true,
        formatter: function () {
            var thisTotal = this.total < 0 ? Math.round(Math.abs(this.total) * 3) : this.total;
            return thisTotal;
        },
        style: {
            fontWeight: 'bold',
            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        },
        rotation: -30
    },
    title: {
        text: ''
    },
    labels:{
        enabled: false
    }
};

var plotOptions = {
    series: {
        stacking: 'normal',
        dataLabels: {
            enabled: true,
            formatter: function () {
                var thisY = this.y < 0 ? Math.round(Math.abs(this.y) * 3) : this.y;
                return thisY;
            },
            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
            style: {
                fontSize: '8px',
                fontFamily: 'Verdana, sans-serif',
                textShadow: '0 0 3px black'
            },
            rotation: -30
        }
    }
}

var tooltip = {
    formatter: function () {
        var thisY = this.y < 0 ? Math.round(Math.abs(this.y) * 3) : this.y;
        var thisStackTotal = this.point.stackTotal < 0 ? Math.round(Math.abs(this.point.stackTotal) * 3) : this.point.stackTotal;
        return '<b>' + this.x + '</b><br/>' +
            this.series.name + ': ' + thisY + '<br/>' +
            '总数: ' + thisStackTotal;
    }
};

More

About Credits

  1. hide credits with credits: { enabled: false }
  2. custimize credits with
credits: {
        text: 'ijohann.com',
        href: 'http://www.ijohann.com'
    }
  1. modify highcharts source code, search for http://www.highcharts.com/ and replace text and href attribute values.

About Export

  1. disable export with
    exporting: {
        enabled: false
    }

Related JS Lib

<script src="http://cdn.hcharts.cn/highcharts/adapters/standalone-framework.js"></script> <!-- If No jQuery -->

* cached version, generated at 2018-12-12 21:29:10 UTC.

Subscribe by RSS