Single metal and currency buttons line series 2026

author(s): Torstein Hønsi

by pepperdigital

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>

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

CSS

@import 'https://code.highcharts.com/css/highcharts.css';

/* General */ 
.highcharts-background {
    fill: rgb(3,65,88);
}

/* Rangefinder CSS */
.highcharts-button-box {
 fill: rgba(24,181,187,1);
}

.highcharts-button-pressed .highcharts-button-box {
  fill: #054f64;
}
.highcharts-button text {
  fill: #ffffff;
}
.highcharts-range-selector-buttons text{
    fill: #ffffff;
}

/* Gridlines and plotlines */ 
.highcharts-plot-line {
    fill: none;
    stroke: rgba(24,181,187,0.5);
    stroke-width: 1px;
     stroke-dasharray:3,1
   
}
.highcharts-grid-line {
    fill: none;
    stroke: rgba(24,181,187,0.2);
}
.highcharts-color-0 {
    stroke: rgba(24,181,187,1);
    fill: rgba(24,181,187,1);
}
.highcharts-plot-line-label {
      fill: rgba(24,181,187,1);
      stroke: rgba(24,181,187,1);

}

/* Tooltips */
.highcharts-tooltip-box .highcharts-label-box {
    fill: rgb(255, 255, 255);
    fill-opacity: 1;
    stroke-width: 0px;
}
.highcharts-markers {
    stroke-width: 2px;
    fill: rgba(24,181,187,1);
}

/* Axis */ 

.highcharts-axis-labels {
    fill: #ffffff;
    font-size: 0.9em;
    font-family: sans-serif;
}

.highcharts-yaxis-labels {
    fill: rgba(24,181,187,0.2);
    font-size: 0.9em;
}

/* Navigator and scroll bar tweaks */ 
.highcharts-navigator-mask-inside {
    fill: rgba(24,181,187,0.6);
    fill-opacity: 0.25;
    cursor: ew-resize;
}
.highcharts-navigator-xaxis {
	stroke: rgba(24,181,187,.5);
}
.highcharts-navigator-xaxis.highcharts-axis-labels {
    fill: rgba(255,255,255);
}
.highcharts-scrollbar-track {
    fill: rgba(255,255,255,0.1);
    stroke: rgba(255,255,255,0.1);
}
.highcharts-scrollbar-thumb {
    fill: rgba(24,181,187,1);
    stroke: rgba(24,181,187,1);
    stroke-width: 1px;
}
.highcharts-navigator-series {
    fill: rgba(24,181,187,1);
    stroke: rgba(24,181,187,1);
}
.highcharts-navigator-xaxis .highcharts-grid-line {
    stroke-width:...

JavaScript

var rawData;

fetch('https://prices.lbma.org.uk/json/gold_pm.json?r=392361552$0')
  .then(res => res.json())
  .then(function(raw) {
    rawData = raw;
var lastDate = new Date(raw[raw.length - 1].d).getTime();
var oneMonthAgo = new Date(raw[raw.length - 1].d);
oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
var oneMonthAgoTime = oneMonthAgo.getTime();
    var data = raw.map(function(d) {
      return [new Date(d.d).getTime(), d.v[0]];
    });

    Highcharts.stockChart('container', {
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      chart: {
        style: {
          fontFamily: 'sans-serif'
        },
        styledMode: true,
        backgroundColor: '#034158',
        renderTo: 'container',
        events: {
          load: function() {
            var chart = this;
            var labels = ['GBP', 'USD', 'EUR'];
            var x = chart.plotLeft;
            var y = 10;

            labels.forEach(function(label, i) {
              chart.renderer.button(label, x + (i * 55), y, function() {
                chart.series[0].setData(
                  rawData.map(function(d) {
                    return [new Date(d.d).getTime(), d.v[i]];
                  })
                );
              })
              .attr({ zIndex: 5 })
              .add();
            });
          },
          redraw: function() {
            this.yAxis[0].removePlotLine();
            this.yAxis[0].addPlotLine({
              value: this.yAxis[0].getExtremes().dataMax,
              color: 'rgba(249,166,48,.5)',
              dashStyle: 'shortdash',
              width: 1,
              label: {
                text: 'Maximum ' + this.yAxis[0].getExtremes().dataMax + '',
                style: {
                  color: 'rgba(249,166,48,1)'
                },
                id: 'plotlinemax',
                x: 30
              }
            });
           ...