Reputation: 71

change theme of highscharts (highstock) chart

Apologies if this is very basic, but I'm somehow lost on it: I would like to add a Highstock/Highcharts chart to an application that I'm working on, but I would like to use a theme other than the default one (I would like to use dark-unica. I saw this reference to highcharts themes, but somehow I still don't understand how to get that done. Can anyone please tell me how to do that?

Here is the html code (from the examples/compare/ folder):

index.html (source: https://www.highcharts.com/download):

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highstock Example</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="dark-unica.js"></script>  <-! this has no effect -->
        <script type="text/javascript"></script>

        <!-- <style type="text/css">
${demo.css}
        </style> -->
    </head>
    <body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>


<div id="container" style="height: 400px; min-width: 310px"></div>


        <script type="text/javascript">

var seriesOptions = [],
    seriesCounter = 0,
    names = ['MSFT', 'AAPL', 'GOOG'];

/**
 * Create the chart when all data is loaded
 * @returns {undefined}
 */
function createChart() {

    Highcharts.stockChart('container', {

        rangeSelector: {
            selected: 4
        },

        yAxis: {
            labels: {
                formatter: function () {
                    return (this.value > 0 ? ' + ' : '') + this.value + '%';
                }
            },
            plotLines: [{
                value: 0,
                width: 2,
                color: 'silver'
            }]
        },

        plotOptions: {
            series: {
                compare: 'percent',
                showInNavigator: true
            }
        },

        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
            valueDecimals: 2,
            split: true
        },

        series: seriesOptions
    });
}

$.each(names, function (i, name) {

    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?',    function (data) {

        seriesOptions[i] = {
            name: name,
            data: data
        };

        // As we're loading the data asynchronously, we don't know what order it will arrive. So
        // we keep a counter and create the chart when all the data is loaded.
        seriesCounter += 1;

        if (seriesCounter === names.length) {

            createChart();
        }
    });
});

// Highcharts.setOptions(Highcharts.dark-unica);  // <----- this does not work
        </script>
    </body>
</html>

Upvotes: 7

Answers (2)

Amr Lotfy

Reputation: 2997

Simply add this line in your HTML after all highcharts include scripts

<script src="https://code.highcharts.com/themes/dark-unica.js"></script>

so it could look like this

<script src="https://code.highcharts.com/8.0.0/highcharts.js"></script>
<script src="https://code.highcharts.com/8.0.0/highcharts-more.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/exporting.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/data.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/treemap.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/export-data.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/8.0.0/themes/dark-unica.js"></script>

Credit: @Fernanda Ines Duran (in the comments)

Upvotes: 9

Harish Kayarohanam

Reputation: 4024

I had a similar doubt. Then i went through the documentation to get this theme code .

And i put it before

Highcharts.chart(....) segment

The following is the theme code

Highcharts.theme = {
 colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066',
  '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
 chart: {
  backgroundColor: {
     linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
     stops: [
        [0, '#2a2a2b'],
        [1, '#3e3e40']
     ]
  },
  style: {
     fontFamily: '\'Unica One\', sans-serif'
  },
  plotBorderColor: '#606063'
 },
 title: {
  style: {
     color: '#E0E0E3',
     textTransform: 'uppercase',
     fontSize: '20px'
  }
 },
 subtitle: {
  style: {
     color: '#E0E0E3',
     textTransform: 'uppercase'
  }
},
xAxis: {
  gridLineColor: '#707073',
  labels: {
     style: {
        color: '#E0E0E3'
     }
  },
  lineColor: '#707073',
  minorGridLineColor: '#505053',
  tickColor: '#707073',
  title: {
     style: {
        color: '#A0A0A3'

     }
  }
},
yAxis: {
  gridLineColor: '#707073',
  labels: {
     style: {
        color: '#E0E0E3'
     }
  },
  lineColor: '#707073',
  minorGridLineColor: '#505053',
  tickColor: '#707073',
  tickWidth: 1,
  title: {
     style: {
        color: '#A0A0A3'
     }
  }
},
tooltip: {
  backgroundColor: 'rgba(0, 0, 0, 0.85)',
  style: {
     color: '#F0F0F0'
  }
},
plotOptions: {
  series: {
     dataLabels: {
        color: '#B0B0B3'
     },
     marker: {
        lineColor: '#333'
     }
  },
  boxplot: {
     fillColor: '#505053'
  },
  candlestick: {
     lineColor: 'white'
  },
  errorbar: {
     color: 'white'
  }
},
legend: {
  itemStyle: {
     color: '#E0E0E3'
  },
  itemHoverStyle: {
     color: '#FFF'
  },
  itemHiddenStyle: {
     color: '#606063'
  }
},
credits: {
  style: {
     color: '#666'
  }
},
labels: {
  style: {
     color: '#707073'
  }
},

drilldown: {
  activeAxisLabelStyle: {
     color: '#F0F0F3'
  },
  activeDataLabelStyle: {
     color: '#F0F0F3'
  }
},

navigation: {
  buttonOptions: {
     symbolStroke: '#DDDDDD',
     theme: {
        fill: '#505053'
     }
  }
},

// scroll charts
rangeSelector: {
  buttonTheme: {
     fill: '#505053',
     stroke: '#000000',
     style: {
        color: '#CCC'
     },
     states: {
        hover: {
           fill: '#707073',
           stroke: '#000000',
           style: {
              color: 'white'
           }
        },
        select: {
           fill: '#000003',
           stroke: '#000000',
           style: {
              color: 'white'
           }
        }
     }
  },
  inputBoxBorderColor: '#505053',
  inputStyle: {
     backgroundColor: '#333',
     color: 'silver'
  },
  labelStyle: {
     color: 'silver'
  }
},

navigator: {
  handles: {
     backgroundColor: '#666',
     borderColor: '#AAA'
  },
  outlineColor: '#CCC',
  maskFill: 'rgba(255,255,255,0.1)',
  series: {
     color: '#7798BF',
     lineColor: '#A6C7ED'
  },
  xAxis: {
     gridLineColor: '#505053'
  }
},

scrollbar: {
  barBackgroundColor: '#808083',
  barBorderColor: '#808083',
  buttonArrowColor: '#CCC',
  buttonBackgroundColor: '#606063',
  buttonBorderColor: '#606063',
  rifleColor: '#FFF',
  trackBackgroundColor: '#404043',
  trackBorderColor: '#404043'
},

// special colors for some of the
legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
background2: '#505053',
dataLabelsColor: '#B0B0B3',
textColor: '#C0C0C0',
contrastTextColor: '#F0F0F3',
maskColor: 'rgba(255,255,255,0.3)'
};

// Apply the theme
Highcharts.setOptions(Highcharts.theme);

Upvotes: 3

change theme of highscharts (highstock) chart

Answers (2)

Related Questions