├── .nojekyll ├── .gitattributes ├── highcharts-themes-collection.Rproj ├── .gitignore ├── README.md ├── styles.css ├── themes ├── null.js ├── tufte.js ├── tufte2.js ├── google.js ├── flat.js ├── elementary.js ├── ffx.js ├── monokai.js ├── flatdark.js ├── ggplot2.js ├── smpl.js ├── superheroes.js ├── db.js ├── alone.js ├── hcrt.js ├── economist.js ├── 538.js ├── ft.js └── bloom.js ├── helpers.R └── index.R /.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.html linguist-vendored 2 | *.css linguist-vendored 3 | 4 | -------------------------------------------------------------------------------- /highcharts-themes-collection.Rproj: -------------------------------------------------------------------------------- 1 | Version: 1.0 2 | 3 | RestoreWorkspace: Default 4 | SaveWorkspace: Default 5 | AlwaysSaveHistory: Default 6 | 7 | EnableCodeIndexing: Yes 8 | UseSpacesForTab: Yes 9 | NumSpacesForTab: 2 10 | Encoding: UTF-8 11 | 12 | RnwWeave: Sweave 13 | LaTeX: pdfLaTeX 14 | 15 | AutoAppendNewline: Yes 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # History files 2 | .Rhistory 3 | .Rapp.history 4 | 5 | # Session Data files 6 | .RData 7 | 8 | # Example code in package build process 9 | *-Ex.R 10 | 11 | # RStudio files 12 | .Rproj.user/ 13 | 14 | # produced vignettes 15 | vignettes/*.html 16 | vignettes/*.pdf 17 | 18 | # OAuth2 token, see https://github.com/hadley/httr/releases/tag/v0.3 19 | .httr-oauth 20 | .Rproj.user 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Highcharts themes collection](http://jkunst.com/highcharts-themes-collection/) 2 | 3 | This is a collection of highcarts themes inspired by newspapers, brands and sites. Please, enjoy! 4 | 5 | ![](https://cloud.githubusercontent.com/assets/56481/13963607/c35477ea-f044-11e5-82a9-92ad637bed51.jpg) 6 | 7 | # #TY 8 | 9 | - https://www.highcharts.com 10 | - https://www.google.com/fonts 11 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import 'https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed'; 2 | 3 | div.main-container { 4 | max-width: none; 5 | } 6 | 7 | .main-container { 8 | width: 100%; 9 | } 10 | 11 | h1 { 12 | font-family: 'Roboto Condensed', sans-serif; 13 | color: #77779d; 14 | } 15 | 16 | body { 17 | font-family: 'Roboto', sans-serif; 18 | } 19 | 20 | .html-widget { 21 | margin-bottom: 0px; 22 | } 23 | 24 | -------------------------------------------------------------------------------- /themes/null.js: -------------------------------------------------------------------------------- 1 | { 2 | "chart": { 3 | "backgroundColor": "transparent" 4 | }, 5 | "plotOptions": { 6 | "line": { 7 | "marker": { 8 | "enabled": false 9 | } 10 | } 11 | }, 12 | "legend": { 13 | "enabled": true, 14 | "align": "right", 15 | "verticalAlign": "bottom" 16 | }, 17 | "credits": { 18 | "enabled": false 19 | }, 20 | "xAxis": { 21 | "visible": false 22 | }, 23 | "yAxis": { 24 | "visible": false 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /themes/tufte.js: -------------------------------------------------------------------------------- 1 | { 2 | "colors": [ 3 | "#737373", 4 | "#D8D7D6", 5 | "#B2B0AD", 6 | "#8C8984" 7 | ], 8 | "chart": { 9 | "style": { 10 | "fontFamily": "Cardo" 11 | } 12 | }, 13 | "xAxis": { 14 | "lineWidth": 0, 15 | "minorGridLineWidth": 0, 16 | "lineColor": "transparent", 17 | "tickColor": "#737373" 18 | }, 19 | "yAxis": { 20 | "lineWidth": 0, 21 | "minorGridLineWidth": 0, 22 | "lineColor": "transparent", 23 | "tickColor": "#737373", 24 | "tickWidth": 1, 25 | "gridLineColor": "transparent" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /themes/tufte2.js: -------------------------------------------------------------------------------- 1 | { 2 | "colors": [ 3 | "#737373", 4 | "#D8D7D6", 5 | "#B2B0AD", 6 | "#8C8984" 7 | ], 8 | "chart": { 9 | "style": { 10 | "fontFamily": "Cardo" 11 | } 12 | }, 13 | "xAxis": { 14 | "lineWidth": 1, 15 | "minorGridLineWidth": 0, 16 | "lineColor": "#737373", 17 | "tickColor": "#737373", 18 | "tickWidth": 0 19 | }, 20 | "yAxis": { 21 | "lineWidth": 1, 22 | "minorGridLineWidth": 0, 23 | "lineColor": "transparent", 24 | "tickColor": "#737373", 25 | "tickWidth": 0, 26 | "gridLineColor": "white", 27 | "gridZIndex": 4 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /themes/google.js: -------------------------------------------------------------------------------- 1 | { 2 | "colors": ["#0266C8", "#F90101", "#F2B50F", "#00933B"], 3 | "chart": { 4 | "style": { 5 | "fontFamily": "Roboto", 6 | "color": "#444444" 7 | } 8 | }, 9 | "xAxis": { 10 | "gridLineWidth": 1, 11 | "gridLineColor": "#F3F3F3", 12 | "lineColor": "#F3F3F3", 13 | "minorGridLineColor": "#F3F3F3", 14 | "tickColor": "#F3F3F3", 15 | "tickWidth": 1 16 | }, 17 | "yAxis": { 18 | "gridLineColor": "#F3F3F3", 19 | "lineColor": "#F3F3F3", 20 | "minorGridLineColor": "#F3F3F3", 21 | "tickColor": "#F3F3F3", 22 | "tickWidth": 1 23 | }, 24 | "legendBackgroundColor": "rgba(0, 0, 0, 0.5)", 25 | "background2": "#505053", 26 | "dataLabelsColor": "#B0B0B3", 27 | "textColor": "#C0C0C0", 28 | "contrastTextColor": "#F0F0F3", 29 | "maskColor": "rgba(255,255,255,0.3)" 30 | } 31 | -------------------------------------------------------------------------------- /themes/flat.js: -------------------------------------------------------------------------------- 1 | { 2 | "colors": ["#f1c40f", "#2ecc71", "#9b59b6", "#e74c3c", "#34495e", "#3498db", "#1abc9c", "#f39c12", "#d35400"], 3 | "chart": { 4 | "backgroundColor": "#ECF0F1" 5 | }, 6 | "xAxis": { 7 | "gridLineDashStyle": "Dash", 8 | "gridLineWidth": 1, 9 | "gridLineColor": "#BDC3C7", 10 | "lineColor": "#BDC3C7", 11 | "minorGridLineColor": "#BDC3C7", 12 | "tickColor": "#BDC3C7", 13 | "tickWidth": 1 14 | }, 15 | "yAxis": { 16 | "gridLineDashStyle": "Dash", 17 | "gridLineColor": "#BDC3C7", 18 | "lineColor": "#BDC3C7", 19 | "minorGridLineColor": "#BDC3C7", 20 | "tickColor": "#BDC3C7", 21 | "tickWidth": 1 22 | }, 23 | "legendBackgroundColor": "rgba(0, 0, 0, 0.5)", 24 | "background2": "#505053", 25 | "dataLabelsColor": "#B0B0B3", 26 | "textColor": "#34495e", 27 | "contrastTextColor": "#F0F0F3", 28 | "maskColor": "rgba(255,255,255,0.3)" 29 | } 30 | -------------------------------------------------------------------------------- /themes/elementary.js: -------------------------------------------------------------------------------- 1 | { 2 | "colors": [ 3 | "#41B5E9", 4 | "#FA8832", 5 | "#34393C", 6 | "#E46151" 7 | ], 8 | "chart": { 9 | "style": { 10 | "color": "#333", 11 | "fontFamily": "Open Sans" 12 | } 13 | }, 14 | "title": { 15 | "style": { 16 | "fontFamily": "Raleway", 17 | "fontWeight": "100" 18 | } 19 | }, 20 | "subtitle": { 21 | "style": { 22 | "fontFamily": "Raleway", 23 | "fontWeight": "100" 24 | } 25 | }, 26 | "legend": { 27 | "align": "right", 28 | "verticalAlign": "bottom" 29 | }, 30 | "xAxis": { 31 | "gridLineWidth": 1, 32 | "gridLineColor": "#F3F3F3", 33 | "lineColor": "#F3F3F3", 34 | "minorGridLineColor": "#F3F3F3", 35 | "tickColor": "#F3F3F3", 36 | "tickWidth": 1 37 | }, 38 | "yAxis": { 39 | "gridLineColor": "#F3F3F3", 40 | "lineColor": "#F3F3F3", 41 | "minorGridLineColor": "#F3F3F3", 42 | "tickColor": "#F3F3F3", 43 | "tickWidth": 1 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /themes/ffx.js: -------------------------------------------------------------------------------- 1 | { 2 | "colors": ["#00AACC", "#FF4E00", "#B90000", "#5F9B0A", "#CD6723"], 3 | "chart": { 4 | "backgroundColor": { 5 | "linearGradient": [ 6 | 0, 7 | 0, 8 | 0, 9 | 150 10 | ], 11 | "stops": [ 12 | [ 13 | 0, 14 | "#CAE1F4" 15 | ], 16 | [ 17 | 1, 18 | "#EEEEEE" 19 | ] 20 | ] 21 | }, 22 | "style": { 23 | "fontFamily": "Open Sans" 24 | } 25 | }, 26 | "title": { 27 | "align": "left" 28 | }, 29 | "subtitle": { 30 | "align": "left" 31 | }, 32 | "legend": { 33 | "align": "right", 34 | "verticalAlign": "bottom" 35 | }, 36 | "xAxis": { 37 | "gridLineWidth": 1, 38 | "gridLineColor": "#F3F3F3", 39 | "lineColor": "#F3F3F3", 40 | "minorGridLineColor": "#F3F3F3", 41 | "tickColor": "#F3F3F3", 42 | "tickWidth": 1 43 | }, 44 | "yAxis": { 45 | "gridLineColor": "#F3F3F3", 46 | "lineColor": "#F3F3F3", 47 | "minorGridLineColor": "#F3F3F3", 48 | "tickColor": "#F3F3F3", 49 | "tickWidth": 1 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /themes/monokai.js: -------------------------------------------------------------------------------- 1 | { 2 | "colors": ["#F92672", "#66D9EF", "#A6E22E", "#A6E22E"], 3 | "chart": { 4 | "backgroundColor": "#272822", 5 | "style": { 6 | "fontFamily": "Inconsolata", 7 | "color": "#A2A39C" 8 | } 9 | }, 10 | "title": { 11 | "style": { 12 | "color": "#A2A39C" 13 | }, 14 | "align": "left" 15 | }, 16 | "subtitle": { 17 | "style": { 18 | "color": "#A2A39C" 19 | }, 20 | "align": "left" 21 | }, 22 | "legend": { 23 | "align": "right", 24 | "verticalAlign": "bottom", 25 | "itemStyle": { 26 | "fontWeight": "normal", 27 | "color": "#A2A39C" 28 | } 29 | }, 30 | "xAxis": { 31 | "gridLineDashStyle": "Dot", 32 | "gridLineWidth": 1, 33 | "gridLineColor": "#A2A39C", 34 | "lineColor": "#A2A39C", 35 | "minorGridLineColor": "#A2A39C", 36 | "tickColor": "#A2A39C", 37 | "tickWidth": 1 38 | }, 39 | "yAxis": { 40 | "gridLineDashStyle": "Dot", 41 | "gridLineColor": "#A2A39C", 42 | "lineColor": "#A2A39C", 43 | "minorGridLineColor": "#A2A39C", 44 | "tickColor": "#A2A39C", 45 | "tickWidth": 1 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /themes/flatdark.js: -------------------------------------------------------------------------------- 1 | { 2 | "colors": ["#f1c40f", "#2ecc71", "#9b59b6", "#e74c3c", "#34495e", "#3498db", "#1abc9c", "#f39c12", "#d35400"], 3 | "chart": { 4 | "backgroundColor": "#34495e" 5 | }, 6 | "xAxis": { 7 | "gridLineDashStyle": "Dash", 8 | "gridLineWidth": 1, 9 | "gridLineColor": "#46627f", 10 | "lineColor": "#46627f", 11 | "minorGridLineColor": "#BDC3C7", 12 | "tickColor": "#46627f", 13 | "tickWidth": 1, 14 | "title": { 15 | "style": { 16 | "color": "#FFFFFF" 17 | } 18 | } 19 | }, 20 | "yAxis": { 21 | "gridLineDashStyle": "Dash", 22 | "gridLineColor": "#46627f", 23 | "lineColor": "#BDC3C7", 24 | "minorGridLineColor": "#BDC3C7", 25 | "tickColor": "#46627f", 26 | "tickWidth": 1, 27 | "title": { 28 | "style": { 29 | "color": "#FFFFFF" 30 | } 31 | } 32 | }, 33 | "legendBackgroundColor": "rgba(0, 0, 0, 0.5)", 34 | "background2": "#505053", 35 | "dataLabelsColor": "#B0B0B3", 36 | "textColor": "#34495e", 37 | "contrastTextColor": "#F0F0F3", 38 | "maskColor": "rgba(255,255,255,0.3)", 39 | "title": { 40 | "style": { 41 | "color": "#FFFFFF" 42 | } 43 | }, 44 | "subtitle": { 45 | "style": { 46 | "color": "#666666" 47 | } 48 | }, 49 | "legend": { 50 | "itemStyle": { 51 | "color": "#C0C0C0" 52 | }, 53 | "itemHoverStyle": { 54 | "color": "#C0C0C0" 55 | }, 56 | "itemHiddenStyle": { 57 | "color": "#444444" 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /themes/ggplot2.js: -------------------------------------------------------------------------------- 1 | { 2 | "chart": { 3 | "plotBackgroundColor": "#EBEBEB", 4 | "style": { 5 | "color": "#000000", 6 | "fontFamily": "Arial, sans-serif" 7 | } 8 | }, 9 | "colors": ["#595959", "#F8766D", "#A3A500", "#00BF7D", "#00B0F6", "#E76BF3"], 10 | "xAxis": { 11 | "labels": { 12 | "style": { 13 | "color": "#666666" 14 | } 15 | }, 16 | "title": { 17 | "style": { 18 | "color": "#000000" 19 | } 20 | }, 21 | "startOnTick": false, 22 | "endOnTick": false, 23 | "gridLineColor": "#FFFFFF", 24 | "gridLineWidth": 1.5, 25 | "tickWidth": 1.5, 26 | "tickLength": 5, 27 | "tickColor": "#666666", 28 | "minorTickInterval": 0, 29 | "minorGridLineColor": "#FFFFFF", 30 | "minorGridLineWidth": 0.5 31 | }, 32 | "yAxis": { 33 | "labels": { 34 | "style": { 35 | "color": "#666666" 36 | } 37 | }, 38 | "title": { 39 | "style": { 40 | "color": "#000000" 41 | } 42 | }, 43 | "startOnTick": false, 44 | "endOnTick": false, 45 | "gridLineColor": "#FFFFFF", 46 | "gridLineWidth": 1.5, 47 | "tickWidth": 1.5, 48 | "tickLength": 5, 49 | "tickColor": "#666666", 50 | "minorTickInterval": 0, 51 | "minorGridLineColor": "#FFFFFF", 52 | "minorGridLineWidth": 0.5 53 | }, 54 | "legendBackgroundColor": "rgba(0, 0, 0, 0.5)", 55 | "background2": "#505053", 56 | "dataLabelsColor": "#B0B0B3", 57 | "textColor": "#C0C0C0", 58 | "contrastTextColor": "#F0F0F3", 59 | "maskColor": "rgba(255,255,255,0.3)" 60 | } 61 | -------------------------------------------------------------------------------- /themes/smpl.js: -------------------------------------------------------------------------------- 1 | { 2 | "colors": ["#d35400", "#2980b9", "#2ecc71", "#f1c40f", "#2c3e50", "#7f8c8d"], 3 | "chart": { 4 | "style": { 5 | "fontFamily": "Roboto", 6 | "color": "#666666" 7 | } 8 | }, 9 | "title": { 10 | "align": "left", 11 | "style": { 12 | "fontFamily": "Roboto Condensed", 13 | "fontWeight": "bold" 14 | } 15 | }, 16 | "subtitle": { 17 | "align": "left", 18 | "style": { 19 | "fontFamily": "Roboto Condensed" 20 | } 21 | }, 22 | "legend": { 23 | "align": "right", 24 | "verticalAlign": "bottom" 25 | }, 26 | "xAxis": { 27 | "gridLineWidth": 1, 28 | "gridLineColor": "#F3F3F3", 29 | "lineColor": "#F3F3F3", 30 | "minorGridLineColor": "#F3F3F3", 31 | "tickColor": "#F3F3F3", 32 | "tickWidth": 1 33 | }, 34 | "yAxis": { 35 | "gridLineColor": "#F3F3F3", 36 | "lineColor": "#F3F3F3", 37 | "minorGridLineColor": "#F3F3F3", 38 | "tickColor": "#F3F3F3", 39 | "tickWidth": 1 40 | }, 41 | "plotOptions": { 42 | "line": { 43 | "marker": { 44 | "enabled": false 45 | } 46 | }, 47 | "spline": { 48 | "marker": { 49 | "enabled": false 50 | } 51 | }, 52 | "area": { 53 | "marker": { 54 | "enabled": false 55 | } 56 | }, 57 | "areaspline": { 58 | "marker": { 59 | "enabled": false 60 | } 61 | }, 62 | "arearange": { 63 | "marker": { 64 | "enabled": false 65 | } 66 | }, 67 | "bubble": { 68 | "maxSize": "10%" 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /themes/superheroes.js: -------------------------------------------------------------------------------- 1 | { 2 | "colors": ["#f1c40f", "#2ecc71", "#9b59b6", "#e74c3c", "#34495e", "#3498db", "#1abc9c", "#f39c12", "#d35400"], 3 | "chart": { 4 | "backgroundColor": "#0B486B", 5 | "style": { 6 | "color": "white", 7 | "fontFamily": "Oswald", 8 | "fontWeight": "normal" 9 | } 10 | }, 11 | "xAxis": { 12 | "gridLineDashStyle": "Dash", 13 | "gridLineWidth": 1, 14 | "gridLineColor": "#46627f", 15 | "lineColor": "#46627f", 16 | "minorGridLineColor": "#BDC3C7", 17 | "tickColor": "#46627f", 18 | "tickWidth": 1, 19 | "title": { 20 | "style": { 21 | "color": "#FFFFFF" 22 | } 23 | } 24 | }, 25 | "yAxis": { 26 | "gridLineDashStyle": "Dash", 27 | "gridLineColor": "#46627f", 28 | "lineColor": "#BDC3C7", 29 | "minorGridLineColor": "#BDC3C7", 30 | "tickColor": "#46627f", 31 | "tickWidth": 1, 32 | "title": { 33 | "style": { 34 | "color": "#FFFFFF" 35 | } 36 | } 37 | }, 38 | "legendBackgroundColor": "rgba(0, 0, 0, 0.5)", 39 | "background2": "#505053", 40 | "dataLabelsColor": "#B0B0B3", 41 | "textColor": "#34495e", 42 | "contrastTextColor": "#F0F0F3", 43 | "maskColor": "rgba(255,255,255,0.3)", 44 | "title": { 45 | "style": { 46 | "fontSize": "2em", 47 | "fontFamily": "Bangers", 48 | "color": "#FFFFFF" 49 | } 50 | }, 51 | "subtitle": { 52 | "style": { 53 | "color": "#FFFFFF" 54 | } 55 | }, 56 | "legend": { 57 | "itemStyle": { 58 | "color": "white", 59 | "fontWeight": "normal" 60 | }, 61 | "itemHoverStyle": { 62 | "color": "#C0C0C0" 63 | }, 64 | "itemHiddenStyle": { 65 | "color": "#444444" 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /themes/db.js: -------------------------------------------------------------------------------- 1 | { 2 | "colors": ["#A9CF54", "#C23C2A", "#FFFFFF", "#979797", "#FBB829"], 3 | "chart": { 4 | "backgroundColor": "#242F39", 5 | "style": { 6 | "color": "white" 7 | } 8 | }, 9 | "legend": { 10 | "enabled": true, 11 | "align": "right", 12 | "verticalAlign": "bottom", 13 | "itemStyle": { 14 | "color": "#C0C0C0" 15 | }, 16 | "itemHoverStyle": { 17 | "color": "#C0C0C0" 18 | }, 19 | "itemHiddenStyle": { 20 | "color": "#444444" 21 | } 22 | }, 23 | "title": { 24 | "text": {}, 25 | "style": { 26 | "color": "#FFFFFF" 27 | } 28 | }, 29 | "tooltip": { 30 | "backgroundColor": "#1C242D", 31 | "borderColor": "#1C242D", 32 | "borderWidth": 1, 33 | "borderRadius": 0, 34 | "style": { 35 | "color": "#FFFFFF" 36 | } 37 | }, 38 | "subtitle": { 39 | "style": { 40 | "color": "#666666" 41 | } 42 | }, 43 | "xAxis": { 44 | "gridLineColor": "#2E3740", 45 | "gridLineWidth": 1, 46 | "labels": { 47 | "style": { 48 | "color": "#525252" 49 | } 50 | }, 51 | "lineColor": "#2E3740", 52 | "tickColor": "#2E3740", 53 | "title": { 54 | "style": { 55 | "color": "#FFFFFF" 56 | }, 57 | "text": {} 58 | } 59 | }, 60 | "yAxis": { 61 | "gridLineColor": "#2E3740", 62 | "gridLineWidth": 1, 63 | "labels": { 64 | "style": { 65 | "color": "#525252" 66 | }, 67 | "lineColor": "#2E3740", 68 | "tickColor": "#2E3740", 69 | "title": { 70 | "style": { 71 | "color": "#FFFFFF" 72 | }, 73 | "text": {} 74 | } 75 | } 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /themes/alone.js: -------------------------------------------------------------------------------- 1 | { 2 | "colors": ["#d35400", "#2980b9", "#2ecc71", "#f1c40f", "#2c3e50", "#7f8c8d"], 3 | "chart": { 4 | "backgroundColor": "#161C20", 5 | "style": { 6 | "fontFamily": "Roboto", 7 | "color": "#666666" 8 | } 9 | }, 10 | "title": { 11 | "align": "left", 12 | "style": { 13 | "fontFamily": "Roboto Condensed", 14 | "fontWeight": "bold" 15 | } 16 | }, 17 | "subtitle": { 18 | "align": "left", 19 | "style": { 20 | "fontFamily": "Roboto Condensed" 21 | } 22 | }, 23 | "legend": { 24 | "align": "right", 25 | "verticalAlign": "bottom", 26 | "itemStyle": { 27 | "color": "#424242" 28 | } 29 | }, 30 | "xAxis": { 31 | "gridLineColor": "#424242", 32 | "gridLineWidth": 1, 33 | "minorGridLineColor": "#424242", 34 | "minoGridLineWidth": 0.5, 35 | "tickColor": "#424242", 36 | "minorTickColor": "#424242", 37 | "lineColor": "#424242" 38 | }, 39 | "yAxis": { 40 | "gridLineColor": "#424242", 41 | "ridLineWidth": 1, 42 | "minorGridLineColor": "#424242", 43 | "inoGridLineWidth": 0.5, 44 | "tickColor": "#424242", 45 | "minorTickColor": "#424242", 46 | "lineColor": "#424242" 47 | }, 48 | "plotOptions": { 49 | "line": { 50 | "marker": { 51 | "enabled": false 52 | } 53 | }, 54 | "spline": { 55 | "marker": { 56 | "enabled": false 57 | } 58 | }, 59 | "area": { 60 | "marker": { 61 | "enabled": false 62 | } 63 | }, 64 | "areaspline": { 65 | "marker": { 66 | "enabled": false 67 | } 68 | }, 69 | "arearange": { 70 | "marker": { 71 | "enabled": false 72 | } 73 | }, 74 | "bubble": { 75 | "maxSize": "10%" 76 | } 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /themes/hcrt.js: -------------------------------------------------------------------------------- 1 | { 2 | "colors": ["#47475c", "#61BC7B", "#508CC8", "#F49952", "#9C9EDB", "#6699a1"], 3 | "chart": { 4 | "style": { 5 | "fontFamily": "Roboto", 6 | "color": "#666666" 7 | } 8 | }, 9 | "title": { 10 | "align": "left", 11 | "style": { 12 | "fontFamily": "Alegreya Sans SC", 13 | "fontSize": "24px" 14 | } 15 | }, 16 | "subtitle": { 17 | "align": "left", 18 | "style": { 19 | "fontFamily": "Alegreya Sans", 20 | "fontSize": "16px" 21 | } 22 | }, 23 | "caption": { 24 | "style": { 25 | "fontFamily": "Alegreya Sans", 26 | "fontSize": "14px" 27 | } 28 | }, 29 | "credits": { 30 | "style": { 31 | "fontFamily": "Roboto", 32 | "fontSize": "10px" 33 | } 34 | }, 35 | "legend": { 36 | "align": "right", 37 | "verticalAlign": "bottom" 38 | }, 39 | "xAxis": { 40 | "gridLineWidth": 1, 41 | "gridLineColor": "#F3F3F3", 42 | "lineColor": "#F3F3F3", 43 | "minorGridLineColor": "#F3F3F3", 44 | "tickColor": "#F3F3F3", 45 | "tickWidth": 1 46 | }, 47 | "yAxis": { 48 | "gridLineColor": "#F3F3F3", 49 | "lineColor": "#F3F3F3", 50 | "minorGridLineColor": "#F3F3F3", 51 | "tickColor": "#F3F3F3", 52 | "tickWidth": 1 53 | }, 54 | "plotOptions": { 55 | "line": { 56 | "marker": { 57 | "enabled": false 58 | } 59 | }, 60 | "spline": { 61 | "marker": { 62 | "enabled": false 63 | } 64 | }, 65 | "area": { 66 | "marker": { 67 | "enabled": false 68 | } 69 | }, 70 | "areaspline": { 71 | "marker": { 72 | "enabled": false 73 | } 74 | }, 75 | "arearange": { 76 | "marker": { 77 | "enabled": false 78 | } 79 | }, 80 | "bubble": { 81 | "maxSize": "10%" 82 | } 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /themes/economist.js: -------------------------------------------------------------------------------- 1 | { 2 | "colors": ["#6794a7", "#014d64", "#76c0c1", "#01a2d9", "#7ad2f6", "#00887d", "#adadad", "#7bd3f6", "#7c260b", "#ee8f71", "#76c0c1", "#a18376"], 3 | "chart": { 4 | "backgroundColor": "#d5e4eb", 5 | "style": { 6 | "fontFamily": "Droid Sans", 7 | "color": "#3C3C3C" 8 | } 9 | }, 10 | "title": { 11 | "align": "left", 12 | "style": { 13 | "fontWeight": "bold" 14 | } 15 | }, 16 | "subtitle": { 17 | "align": "left" 18 | }, 19 | "yAxis": { 20 | "gridLineColor": "#FFFFFF", 21 | "lineColor": "#FFFFFF", 22 | "minorGridLineColor": "#FFFFFF", 23 | "tickColor": "#D7D7D8", 24 | "tickWidth": 1, 25 | "title": { 26 | "style": { 27 | "color": "#A0A0A3" 28 | } 29 | } 30 | }, 31 | "tooltip": { 32 | "backgroundColor": "#FFFFFF", 33 | "borderColor": "#76c0c1", 34 | "style": { 35 | "color": "#000000" 36 | } 37 | }, 38 | "legend": { 39 | "itemStyle": { 40 | "color": "#3C3C3C" 41 | }, 42 | "itemHiddenStyle": { 43 | "color": "#606063" 44 | } 45 | }, 46 | "credits": { 47 | "style": { 48 | "color": "#666" 49 | } 50 | }, 51 | "labels": { 52 | "style": { 53 | "color": "#D7D7D8" 54 | } 55 | }, 56 | "drilldown": { 57 | "activeAxisLabelStyle": { 58 | "color": "#F0F0F3" 59 | }, 60 | "activeDataLabelStyle": { 61 | "color": "#F0F0F3" 62 | } 63 | }, 64 | "navigation": { 65 | "buttonOptions": { 66 | "symbolStroke": "#DDDDDD", 67 | "theme": { 68 | "fill": "#505053" 69 | } 70 | } 71 | }, 72 | "legendBackgroundColor": "rgba(0, 0, 0, 0.5)", 73 | "background2": "#505053", 74 | "dataLabelsColor": "#B0B0B3", 75 | "textColor": "#C0C0C0", 76 | "contrastTextColor": "#F0F0F3", 77 | "maskColor": "rgba(255,255,255,0.3)" 78 | } 79 | -------------------------------------------------------------------------------- /themes/538.js: -------------------------------------------------------------------------------- 1 | { 2 | "colors": ["#FF2700", "#008FD5", "#77AB43", "#636464", "#C4C4C4"], 3 | "chart": { 4 | "backgroundColor": "#F0F0F0", 5 | "plotBorderColor": "#606063", 6 | "style": { 7 | "fontFamily": "Roboto", 8 | "color": "#3C3C3C" 9 | } 10 | }, 11 | "title": { 12 | "align": "left", 13 | "style": { 14 | "fontWeight": "bold" 15 | } 16 | }, 17 | "subtitle": { 18 | "align": "left" 19 | }, 20 | "xAxis": { 21 | "gridLineWidth": 1, 22 | "gridLineColor": "#D7D7D8", 23 | "labels": { 24 | "style": { 25 | "fontFamily": "Unica One, sans-serif", 26 | "color": "#3C3C3C" 27 | } 28 | }, 29 | "lineColor": "#D7D7D8", 30 | "minorGridLineColor": "#505053", 31 | "tickColor": "#D7D7D8", 32 | "tickWidth": 1, 33 | "title": { 34 | "style": { 35 | "color": "#A0A0A3" 36 | } 37 | } 38 | }, 39 | "yAxis": { 40 | "gridLineColor": "#D7D7D8", 41 | "labels": { 42 | "style": { 43 | "fontFamily": "Unica One, sans-serif", 44 | "color": "#3C3C3C" 45 | } 46 | }, 47 | "lineColor": "#D7D7D8", 48 | "minorGridLineColor": "#505053", 49 | "tickColor": "#D7D7D8", 50 | "tickWidth": 1, 51 | "title": { 52 | "style": { 53 | "color": "#A0A0A3" 54 | } 55 | } 56 | }, 57 | "tooltip": { 58 | "backgroundColor": "rgba(0, 0, 0, 0.85)", 59 | "style": { 60 | "color": "#F0F0F0" 61 | } 62 | }, 63 | "legend": { 64 | "itemStyle": { 65 | "color": "#3C3C3C" 66 | }, 67 | "itemHiddenStyle": { 68 | "color": "#606063" 69 | } 70 | }, 71 | "credits": { 72 | "style": { 73 | "color": "#666" 74 | } 75 | }, 76 | "labels": { 77 | "style": { 78 | "color": "#D7D7D8" 79 | } 80 | }, 81 | "legendBackgroundColor": "rgba(0, 0, 0, 0.5)", 82 | "background2": "#505053", 83 | "dataLabelsColor": "#B0B0B3", 84 | "textColor": "#C0C0C0", 85 | "contrastTextColor": "#F0F0F3", 86 | "maskColor": "rgba(255,255,255,0.3)" 87 | } 88 | -------------------------------------------------------------------------------- /themes/ft.js: -------------------------------------------------------------------------------- 1 | { 2 | "colors": ["#89736C", "#43423e", "#2e6e9e", "#FF0000", "#BEDDDE"], 3 | "chart": { 4 | "backgroundColor": "#FFF1E0", 5 | "style": { 6 | "fontFamily": "Droid Sans", 7 | "color": "#777" 8 | } 9 | }, 10 | "title": { 11 | "align": "left", 12 | "style": { 13 | "fontFamily": "Droid Serif", 14 | "color": "black", 15 | "fontWeight": "bold" 16 | } 17 | }, 18 | "subtitle": { 19 | "align": "left", 20 | "style": { 21 | "fontFamily": "Droid Serif", 22 | "fontWeight": "bold" 23 | } 24 | }, 25 | "yAxis": { 26 | "gridLineDashStyle": "Dot", 27 | "gridLineColor": "#CEC6B9", 28 | "lineColor": "#CEC6B9", 29 | "minorGridLineColor": "#CEC6B9", 30 | "labels": { 31 | "align": "left", 32 | "x": 0, 33 | "y": -2 34 | }, 35 | "tickLength": 0, 36 | "tickColor": "#CEC6B9", 37 | "tickWidth": 1, 38 | "title": { 39 | "style": { 40 | "color": "#74736c" 41 | } 42 | } 43 | }, 44 | "tooltip": { 45 | "backgroundColor": "#FFFFFF", 46 | "borderColor": "#76c0c1", 47 | "style": { 48 | "color": "#000000" 49 | } 50 | }, 51 | "legend": { 52 | "itemStyle": { 53 | "color": "#3C3C3C" 54 | }, 55 | "itemHiddenStyle": { 56 | "color": "#606063" 57 | } 58 | }, 59 | "credits": { 60 | "style": { 61 | "color": "#666" 62 | } 63 | }, 64 | "labels": { 65 | "style": { 66 | "color": "#D7D7D8" 67 | } 68 | }, 69 | "drilldown": { 70 | "activeAxisLabelStyle": { 71 | "color": "#F0F0F3" 72 | }, 73 | "activeDataLabelStyle": { 74 | "color": "#F0F0F3" 75 | } 76 | }, 77 | "navigation": { 78 | "buttonOptions": { 79 | "symbolStroke": "#DDDDDD", 80 | "theme": { 81 | "fill": "#505053" 82 | } 83 | } 84 | }, 85 | "legendBackgroundColor": "rgba(0, 0, 0, 0.5)", 86 | "background2": "#505053", 87 | "dataLabelsColor": "#B0B0B3", 88 | "textColor": "#C0C0C0", 89 | "contrastTextColor": "#F0F0F3", 90 | "maskColor": "rgba(255,255,255,0.3)" 91 | } 92 | -------------------------------------------------------------------------------- /helpers.R: -------------------------------------------------------------------------------- 1 | list_get_demos <- function(){ 2 | 3 | # data(mpg, package = "ggplot2") 4 | 5 | p1 <- highcharts_demo() %>% 6 | hc_tooltip(table = TRUE, sort = TRUE) 7 | 8 | # p2 <- hchart(mtcars, "scatter", hcaes(x = mpg, y = disp, group = cyl)) 9 | 10 | library(forecast) 11 | p3 <- hchart( 12 | forecast(auto.arima(AirPassengers), level = 95, h = 12*3)) %>% 13 | hc_tooltip(valueDecimals = 2) 14 | 15 | # p4 <- hchart(stl(log(AirPassengers), "per")) 16 | 17 | mpgman2 <- count(mpg, class, year) 18 | p5 <- hchart(mpgman2, "column", hcaes(x = class, y = n, group = year)) 19 | 20 | 21 | library(quantmod) 22 | # p6 <- hchart(getSymbols("APPL", auto.assign = FALSE)) 23 | x <- getSymbols("AAPL", auto.assign = FALSE, from = lubridate::ymd(20181001)) 24 | y <- getSymbols("AMZN", auto.assign = FALSE, from = lubridate::ymd(20181001)) 25 | 26 | p6 <- highchart(type = "stock") %>% 27 | hc_add_series(x) %>% 28 | hc_add_series(y, type = "ohlc") 29 | 30 | p7 <- highchart() %>% 31 | hc_add_series(density(rnorm(100000)), 32 | type = "area", name = "Normal Distribution") %>% 33 | hc_add_series(density(rgamma(100000, 5, 0.8)), 34 | type = "area", name = "Gamma(5. 0.8) Distribution") %>% 35 | hc_add_series(density(rgamma(100000, 3, 0.8)), 36 | type = "area", name = "Gamma(3. 0.8) Distribution") %>% 37 | hc_plotOptions(series = list(fillOpacity = 0.5)) %>% 38 | hc_xAxis(min = -5, max = 12) %>% 39 | hc_yAxis(showLastLabel = FALSE, showFirstLabel = FALSE, endOnTick = FALSE, startOnTick = FALSE) %>% 40 | hc_xAxis(showLastLabel = FALSE, showFirstLabel = FALSE, endOnTick = FALSE, startOnTick = FALSE) %>% 41 | hc_tooltip(valueDecimals = 3) 42 | 43 | data(GNI2014, package = "treemap") 44 | GNI2014 <- select(GNI2014, -population, -continent) 45 | color_stops_index <- color_stops(colors = viridis::inferno(10, begin = 0.1)) 46 | p8 <- hcmap( 47 | "custom/world-robinson-lowres", 48 | data = GNI2014, 49 | name = "GNI", 50 | value = "GNI", 51 | joinBy = c("iso-a3", "iso3"), 52 | nullColor = "#932667" 53 | ) %>% 54 | hc_colorAxis(stops = color_stops_index, type = "logarithmic") %>% 55 | hc_legend(enabled = FALSE) %>% 56 | hc_mapNavigation(enabled = FALSE) 57 | 58 | p <- list(p1, p3, p5, p7, p6, p8) 59 | 60 | p 61 | 62 | 63 | } 64 | 65 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /themes/bloom.js: -------------------------------------------------------------------------------- 1 | { 2 | "colors": ["#E10033", "#000000", "#767676", "#E4E4E4"], 3 | "chart": { 4 | "backgroundColor": "#FFFFFF", 5 | "style": { 6 | "fontFamily": "Roboto", 7 | "color": "#000000" 8 | } 9 | }, 10 | "title": { 11 | "align": "left", 12 | "style": { 13 | "fontFamily": "Roboto", 14 | "color": "#000000", 15 | "fontWeight": "bold" 16 | } 17 | }, 18 | "subtitle": { 19 | "align": "left", 20 | "style": { 21 | "fontFamily": "Roboto", 22 | "color": "#000000", 23 | "fontWeight": "bold" 24 | } 25 | }, 26 | "xAxis": { 27 | "lineColor": "#000000", 28 | "lineWidth": 2, 29 | "tickColor": "#000000", 30 | "tickWidth": 2, 31 | "labels": { 32 | "style": { 33 | "color": "black" 34 | } 35 | }, 36 | "title": { 37 | "style": { 38 | "color": "black" 39 | } 40 | } 41 | }, 42 | "yAxis": { 43 | "opposite": true, 44 | "gridLineWidth": 2, 45 | "gridLineColor": "#F3F3F3", 46 | "lineColor": "#CEC6B9", 47 | "minorGridLineColor": "#CEC6B9", 48 | "labels": { 49 | "align": "left", 50 | "style": { 51 | "color": "black" 52 | }, 53 | "x": 0, 54 | "y": -2 55 | }, 56 | "tickLength": 0, 57 | "tickColor": "#CEC6B9", 58 | "tickWidth": 1, 59 | "title": { 60 | "style": { 61 | "color": "black" 62 | } 63 | } 64 | }, 65 | "tooltip": { 66 | "backgroundColor": "#FFFFFF", 67 | "borderColor": "#76c0c1", 68 | "style": { 69 | "color": "#000000" 70 | } 71 | }, 72 | "legend": { 73 | "layout": "horizontal", 74 | "align": "left", 75 | "verticalAlign": "top", 76 | "itemStyle": { 77 | "color": "#3C3C3C" 78 | }, 79 | "itemHiddenStyle": { 80 | "color": "#606063" 81 | } 82 | }, 83 | "credits": { 84 | "style": { 85 | "color": "#666" 86 | } 87 | }, 88 | "labels": { 89 | "style": { 90 | "color": "#D7D7D8" 91 | } 92 | }, 93 | "drilldown": { 94 | "activeAxisLabelStyle": { 95 | "color": "#F0F0F3" 96 | }, 97 | "activeDataLabelStyle": { 98 | "color": "#F0F0F3" 99 | } 100 | }, 101 | "navigation": { 102 | "buttonOptions": { 103 | "symbolStroke": "#DDDDDD", 104 | "theme": { 105 | "fill": "#505053" 106 | } 107 | } 108 | }, 109 | "legendBackgroundColor": "rgba(0, 0, 0, 0.5)", 110 | "background2": "#505053", 111 | "dataLabelsColor": "#B0B0B3", 112 | "textColor": "#C0C0C0", 113 | "contrastTextColor": "#F0F0F3", 114 | "maskColor": "rgba(255,255,255,0.3)" 115 | } 116 | -------------------------------------------------------------------------------- /index.R: -------------------------------------------------------------------------------- 1 | #' --- 2 | #' title: 'Highcharts theme collection' 3 | #' author: false # "Joshua Kunst" 4 | #' date: false # "`r format(Sys.time(), ' %Y/%m')`" 5 | #' output: 6 | #' html_document: 7 | #' theme: paper 8 | #' css: styles.css 9 | #' toc: false 10 | #' toc_float: true 11 | #' --- 12 | #' 13 | #+ echo=FALSE, warning=FALSE, include=FALSE 14 | rm(list = ls()) 15 | library(highcharter) 16 | library(tidyverse) 17 | library(stringr) 18 | library(jsonlite) 19 | library(treemap) 20 | library(htmltools) 21 | source("helpers.R") 22 | 23 | p <- list_get_demos() 24 | 25 | themes <- help.search("theme", package = "highcharter") %>% 26 | .$matches %>% 27 | tbl_df() %>% 28 | janitor::clean_names() %>% 29 | select(name, title) %>% 30 | distinct() %>% 31 | filter(str_detect(name, "hc_theme_*")) %>% 32 | filter(!name %in% c("hc_theme_merge", "hc_theme", 33 | "hc_theme_darkunica", "hc_theme_sparkline", 34 | "hc_theme_gridlight", "hc_theme_sandsignika", 35 | "hc_theme_chalk", "hc_theme_handdrawn")) %>% 36 | mutate(title = str_replace(title, " theme for highcharts", "")) %>% 37 | arrange(name) 38 | 39 | thms <- unique(c("hc_theme_smpl", "hc_theme_db", themes$name)) 40 | 41 | get_charts_w_theme <- function(thmname) { # thmname <- sample(thms, size = 1) 42 | 43 | thmname_short <- str_replace(thmname, "hc_theme_", "") 44 | 45 | thm <- get(thmname)() 46 | attr(thm, "class") <- NULL 47 | writeLines(toJSON(as.list(thm), pretty = TRUE, auto_unbox = TRUE), 48 | paste0("themes/", thmname_short,".js")) 49 | 50 | thm <- get(thmname)() 51 | 52 | p <- map(p, hc_add_theme, thm) 53 | p <- map(p, hc_size, height = 400, width = "100%") 54 | 55 | if(thmname == "hc_theme_tufte") { 56 | p[[1]] <- p[[1]] %>% hc_add_theme(hc_theme_tufte2()) 57 | p[[3]] <- p[[3]] %>% hc_add_theme(hc_theme_tufte2()) 58 | 59 | thm <- hc_theme_tufte2() 60 | attr(thm, "class") <- NULL 61 | writeLines(toJSON(as.list(thm), pretty = TRUE, auto_unbox = TRUE), 62 | paste0("themes/", "tufte2",".js")) 63 | } 64 | 65 | link <- sprintf("https://raw.githubusercontent.com/jbkunst/highcharts-themes-collection/gh-pages/themes/%s.js", 66 | thmname_short) 67 | 68 | 69 | p %>% 70 | map(tags$div, class = "col-md-4 col-sm-6", style = "padding:0") %>% 71 | tags$div(., br(), tags$small(tags$a(href = link, download = thmname_short, "download")), class = "fluid-row") 72 | 73 | } 74 | 75 | #+ echo=FALSE, warning=FALSE 76 | thms %>% 77 | map(function(t){ # t <- sample(thms, 1) 78 | 79 | t %>% 80 | str_replace_all("hc_theme_", "") %>% 81 | tags$a(`data-target` = paste0("#", t), `data-toggle` = "tab") %>% 82 | tags$li(class = if(t == thms[1]) "active" else NULL) 83 | # "
  • Profile
    • " 84 | 85 | }) %>% 86 | tags$ul(class = "nav nav-pills", id = "myTab", .) 87 | 88 | tags$br() 89 | 90 | thms %>% 91 | map(function(t){ # t <- sample(thms, 1) 92 | 93 | content <- get_charts_w_theme(t) 94 | 95 | tags$div(content, id = t, class = "tab-pane", class = if(t == thms[1]) "active" else NULL) 96 | 97 | }) %>% 98 | tags$div(class = "tab-content") 99 | 100 | 101 | #' 102 | #' 103 | #' 104 | --------------------------------------------------------------------------------