JSFiddle

  • Highcharts with custom legend buttons #8 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript

    $(function () {
    
        $("#a1").click(function () {
            $('.highcharts-legend-item:nth-child(1)').click();
            $(this).toggleClass("leg-clicked");
        });
        $("#a2").click(function () {
            $('.highcharts-legend-item:nth-child(2)').click();
            $(this).toggleClass ...
  • An approach to use jQuery Plugins with AngularJS

    http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/

    var App = angular.module('Knob', []);
    App.controller('myCtrl', function($scope) {
        $scope.number = 24;
    })
    
    App.directive('knob', function() {
        return {
            restrict: 'A ...
  • Highcharts Dynamic Font Size

    jQuery (edge), HTML, CSS, JavaScript

    Highcharts.setOptions({
        chart: {
            style: {
                fontSize: '1em'
            },
            borderWidth: 1,
            plotBorderWidth: 1,
            type: 'column'
        },
        credits: {
            style: {
                fontSize: '0.7em'
            }
        },
        title: {
            style: {
                fontSize ...
  • Highcharts Highlight columns on click

    jQuery 1.7.2, HTML, CSS, JavaScript

    $(function () {
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul ...
  • Highcharts Highlight columns on click

    jQuery 1.7.2, HTML, CSS, JavaScript

    $(function () {
        
        
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul ...
  • Highcharts Highlight columns on click

    jQuery 1.7.2, HTML, CSS, JavaScript

    $(function () {
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul ...
  • Highcharts Demo

    author(s): Torstein Hønsi

    $(function() {
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'pie'
            },
            plotOptions: {
                pie: {
                    innerSize: '60%'
                }
            },
            series: [{
                data: [
                    ['Firefox', 44.2 ...
  • Highcharts Demo

    author(s): Torstein Hønsi

    $(function () {
        $('#container').highcharts({
            chart: {
                backgroundColor: {
                    linearGradient: [0, 0, 500, 500],
                    stops: [
                        [0, 'rgb(255, 255, 255)'],
                        [1, 'rgb(200, 200 ...
  • [Question]: Highcharts: highly column chart with only one point in drilldown, how to move it to the left side

    author(s): Torstein Hønsi

    $(function () {   
        
        var renderer;    
        var groups = {};
        
        (function (H) {
            //DATALABELS
            H.wrap(H.Series.prototype, 'drawDataLabels', function (proceed) {
    var css = this.chart ...
  • Highcharts-ng

    A simple Angularjs directive for Highcharts. AngularJs, Highcharts

    var myapp = angular.module('myapp', ["highcharts-ng"]);
    
    myapp.controller('myctrl', function ($scope) {
        $scope.bluechart = {
            options: {
                chart: {
                    type: 'pie',
                    backgroundColor: '#fff'
                },
                colors ...