scott.urquhart
Posts: 1
Joined: Sun Dec 22, 2019 9:14 pm

How to apply a theme into Highcharts Cloud

Hi, I am completely new to Highcharts and had a question about themes.

I found some nice themes here: http://jkunst.com/highcharts-themes-collection/

And then I can see the code at the following link: https://raw.githubusercontent.com/jbkun ... s/bloom.js

I would like to find a way to easily apply them in Highcharts Cloud. It doesn't seem to work in the custom code section...am I misunderstanding how to do this?

Thanks!

Scott
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: How to apply a theme into Highcharts Cloud

Hi, Scott.

Welcome to our forum and thanks for contacting us with your question!

You can apply them in the custom code section. To do that you can delete the whole code you will find in the custom code tab and pase your code between brackets of merge method:

Code: Select all

Highcharts.merge(true, options, {
 
... pase your code here

});

The final code that you are applying should look like this:

Code: Select all

Highcharts.merge(true, options, {
  
"colors": ["#E10033", "#000000", "#767676", "#E4E4E4"],
  "chart": {
    "backgroundColor": "#FFFFFF",
    "style": {
      "fontFamily": "Roboto",
      "color": "#000000"
    }
  },
  "title": {
    "align": "left",
    "style": {
      "fontFamily": "Roboto",
      "color": "#000000",
      "fontWeight": "bold"
    }
  },
  "subtitle": {
    "align": "left",
    "style": {
      "fontFamily": "Roboto",
      "color": "#000000",
      "fontWeight": "bold"
    }
  },
  "xAxis": {
    "lineColor": "#000000",
    "lineWidth": 2,
    "tickColor": "#000000",
    "tickWidth": 2,
    "labels": {
      "style": {
        "color": "black"
      }
    },
    "title": {
      "style": {
        "color": "black"
      }
    }
  },
  "yAxis": {
    "opposite": true,
    "gridLineWidth": 2,
    "gridLineColor": "#F3F3F3",
    "lineColor": "#CEC6B9",
    "minorGridLineColor": "#CEC6B9",
    "labels": {
      "align": "left",
      "style": {
        "color": "black"
      },
      "x": 0,
      "y": -2
    },
    "tickLength": 0,
    "tickColor": "#CEC6B9",
    "tickWidth": 1,
    "title": {
      "style": {
        "color": "black"
      }
    }
  },
  "tooltip": {
    "backgroundColor": "#FFFFFF",
    "borderColor": "#76c0c1",
    "style": {
      "color": "#000000"
    }
  },
  "legend": {
    "layout": "horizontal",
    "align": "left",
    "verticalAlign": "top",
    "itemStyle": {
      "color": "#3C3C3C"
    },
    "itemHiddenStyle": {
      "color": "#606063"
    }
  },
  "credits": {
    "style": {
      "color": "#666"
    }
  },
  "labels": {
    "style": {
      "color": "#D7D7D8"
    }
  },
  "drilldown": {
    "activeAxisLabelStyle": {
      "color": "#F0F0F3"
    },
    "activeDataLabelStyle": {
      "color": "#F0F0F3"
    }
  },
  "navigation": {
    "buttonOptions": {
      "symbolStroke": "#DDDDDD",
      "theme": {
        "fill": "#505053"
      }
    }
  },
  "legendBackgroundColor": "rgba(0, 0, 0, 0.5)",
  "background2": "#505053",
  "dataLabelsColor": "#B0B0B3",
  "textColor": "#C0C0C0",
  "contrastTextColor": "#F0F0F3",
  "maskColor": "rgba(255,255,255,0.3)"
  
});

Live demo: https://cloud.highcharts.com/show/kpv9QfI7

Feel free to ask any further questions!

Best regards.
Mateusz Kornecki
Highcharts Developer

Return to “Highcharts Cloud”