Examples of investment structure bar charts
Necessary parts
Chart container
The chart container is identified by the ID attribute. Be sure to use the same ID in HTML and the Highcharts script.
<div id="chartcontainer"></div>Basic JS includes
The basic JS includes are JQuery and Highcharts.
<!-- move to closing body tag -->
<!-- use jQuery only in necessary -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<!-- Highcharts is mandatory -->
<script src="https://code.highcharts.com/10.2/highcharts.js" crossorigin="anonymous"></script>
<!-- place the individual Highcharts code below as inline script or include -->
Formatting
The functions getCategories and periodsFormatted are mandatory to format the API data for use in Highcharts.
// Get categories/labels from data
function getCategories(data) {
var categories = [];
for (index = 0; index < data.length; ++index) {
categories.push(data[index].name);
}
return categories;
}
// Reformat data from JSON API structure to Highcharts
function formatData(data) {
var formatted = [];
for (index = 0; index < data.length; ++index) {
var bar = [data[index].name, data[index].percent];
formatted.push(bar);
}
return formatted;
}Highcharts options
There are some base Highcharts options which have to be set (e.g. language specific).
// Global options
Highcharts.setOptions({
global: {
timezoneOffset: 0 * 60
},
lang: {
months: ["Januar", "Februar", "M\u00e4rz", "April", "Mai", "Juni",
"Juli", "August", "September", "Oktober", "November",
"Dezember"],
shortMonths: ["Jan", "Feb", "M\u00e4r", "Apr", "Mai", "Jun",
"Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
weekdays: ["Sonntag", "Montag", "Dienstag", "Mittwoch",
"Donnerstag", "Freitag", "Samstag"],
rangeSelectorZoom: '',
rangeSelectorFrom: 'Von',
rangeSelectorTo: 'Bis',
thousandsSep: '.',
decimalPoint: ',',
downloadJPEG: 'als JPG herunterladen',
downloadPDF: 'als PDF herunterladen',
downloadPNG: 'als PNG herunterladen',
downloadSVG: 'als SVG herunterladen',
printChart: 'Chart drucken'
},
title: {
style: {
color: '#648caa'
}
},
exporting: {
buttons: {
contextButton: {
symbolStroke: '#648caa',
symbolFill: '#fff',
theme: {
'stroke-width': 1,
r: 0,
states: {
hover: {
fill: '#fff',
stroke: '#648caa'
},
select: {
fill: '#fff'
}
}
}
}
},
scale: 2,
chartOptions: {
events: {
load: function () {
this.legend.render();
}
},
rangeSelector: {
buttons: []
}
}
}
});AJAX request to the Fund-API and instantiating of the Highcharts chart
This is the central code for generating the chart.
// Get performance data for fund with ISIN DE0008479015
$.getJSON('https://api.hansainvest.com/api/v1/investment_structure-asset_structure/DE0005321459/?language=en', function(json_data) {
// Generate chart
var chartbar1 = new Highcharts.Chart(
{
"title": {
"text": json_data.fund.name + ' – '
+ json_data.fund.isin + ' – '
+ json_data.structure.type
},
"chart": {
"renderTo": "chartcontainer",
"type": "bar",
"backgroundColor": "#ffffff"
},
"legend": {
"enabled": false
},
"xAxis": {
"type": "category",
"min": 0,
"gridLineDashStyle": "Dot",
"gridLineWidth": 1,
"gridLineColor": "#648caa",
"labels": {
"style": {
"color": "#000000",
"fontSize": "13px",
"fontWeight": "bold"
}
},
"categories": getCategories(json_data.structure.data)
},
"yAxis": {
"title": {
"text": null
},
"gridLineDashStyle": "Dot",
"gridLineWidth": 1,
"gridLineColor": "#648caa",
"tickInterval": 10,
"endOnTick": false,
"ceiling": 110
},
"labels": {
"style": {
"fontSize": "13px",
"fontWeight": "bold"
}
},
"credits": {
"enabled": false
},
"plotOptions": {
"bar": {
"color": "#648caa"
},
"series": {
"dataLabels": {
"enabled": true,
"useHTML": false,
"crop": false,
"overflow": "justify",
"format": "{point.y:.1f} %",
"style": {
"fontSize": "13px",
"fontWeight": "bold",
"textShadow": "none"
}
}
}
},
"exporting": {
"chartOptions": {
"title": {
"text": json_data.fund.name
+ " "
+ json_data.structure.type
}
},
"filename": json_data.fund.isin
+ "_-_"
+ json_data.structure.type
},
"series": [{
"name": json_data.structure.type,
"data": formatData(json_data.structure.data)
}]
});
});
Optional parts
Exporting
The basic JS includes including the Highcharts exporting plugin
<!-- move to closing body tag -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/10.2/highcharts.js" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/10.2/modules/exporting.js" crossorigin="anonymous"></script>
<!-- place the individual Highcharts code below as inline script or include -->
Alternating colors for bar values
Some bar values may be placed inside the bar. So it may be necessary for a good contrast to use another color inside the bar than outside. See examples below.
(function (H) {
/**
* Highcharts plugin for alternating colors of data labels due to position
*/
H.wrap(H.seriesTypes.column.prototype, 'drawDataLabels', function (p) {
p.call(this);
H.each(this.points, function (p) {
if (p.dataLabel && p.dataLabel.alignOptions && p.y) {
if (p.dataLabel.alignOptions.align === 'right' && p.y > 0) {
p.dataLabel.css({ color: '#FFFFFF' });
} else {
p.dataLabel.css({ color: '#000000' });
}
}
});
});
}(Highcharts));Resizing
Resizing of the chart if the viewport or the visibility of the chart changes.
/**
* Adjust size for hidden charts
* @param chart highcharts
*/
function adjustGraph(chart) {
try {
if (typeof (chart === 'undefined' || chart === null)
&& this instanceof jQuery) { // if no obj chart and the context is set
this.find('.chart-container:visible').each(
function () { // for only visible charts container in the curent context
$container = $(this); // context container
$container.find('div[id^="chart-"]').each(
function () { // for only chart
$chart = $(this).highcharts(); // cast from JQuery to highcharts obj
$chart.setSize($container.width(),
$chart.chartHeight,
doAnimation = true); // adjust chart size with animation transition
});
});
} else {
chart.setSize($('.chart-container:visible').width(),
chart.chartHeight, doAnimation = true); // if chart is set, adjust
}
} catch (err) {
// do nothing
}
}
$(function (H) {
$(window).resize(function () {
if (this.resizeTO)
clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function () {
// resizeEnd call function with pass context body
adjustGraph.call($('body'));
}, 500);
});
});Bar chart
<div id="chart-bar-1"></div>
<!-- move to closing body tag -->
<!-- use jQuery only in necessary -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<!-- Highcharts is mandatory -->
<script src="https://code.highcharts.com/10.2/highcharts.js" crossorigin="anonymous"></script>
<!-- use Highcharts exporting plugin only in necessary -->
<script src="https://code.highcharts.com/10.2/modules/exporting.js" crossorigin="anonymous"></script>
<!-- place the individual Highcharts code below as inline script or include -->
function getCategories(data) {
var categories = [];
for (index = 0; index < data.length; ++index) {
categories.push(data[index].name);
}
return categories;
}
function formatData(data) {
var formatted = [];
for (index = 0; index < data.length; ++index) {
var bar = [data[index].name, data[index].percent];
formatted.push(bar);
}
return formatted;
}
(function (H) {
/**
* Highcharts plugin for alternating colors of data labels due to position
*/
H.wrap(H.seriesTypes.column.prototype, 'drawDataLabels', function (p) {
p.call(this);
H.each(this.points, function (p) {
if (p.dataLabel && p.dataLabel.alignOptions && p.y) {
if (p.dataLabel.alignOptions.align === 'right' && p.y > 0) {
p.dataLabel.css({ color: '#FFFFFF' });
} else {
p.dataLabel.css({ color: '#000000' });
}
}
});
});
}(Highcharts));
/**
* Adjust size for hidden charts
* @param chart highcharts
*/
function adjustGraph(chart) {
try {
if (typeof (chart === 'undefined' || chart === null)
&& this instanceof jQuery) { // if no obj chart and the context is set
this.find('.chart-container:visible').each(
function () { // for only visible charts container in the curent context
$container = $(this); // context container
$container.find('div[id^="chart-"]').each(
function () { // for only chart
$chart = $(this).highcharts(); // cast from JQuery to highcharts obj
$chart.setSize($container.width(),
$chart.chartHeight,
doAnimation = true); // adjust chart size with animation transition
});
});
} else {
chart.setSize($('.chart-container:visible').width(),
chart.chartHeight, doAnimation = true); // if chart is set, adjust
}
} catch (err) {
// do nothing
}
}
$(function (H) {
$(window).resize(function () {
if (this.resizeTO)
clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function () {
// resizeEnd call function with pass context body
adjustGraph.call($('body'));
}, 500);
});
});
// Global options
Highcharts.setOptions({
global: {
timezoneOffset: 0 * 60
},
lang: {
months: ["Januar", "Februar", "M\u00e4rz", "April", "Mai", "Juni",
"Juli", "August", "September", "Oktober", "November",
"Dezember"],
shortMonths: ["Jan", "Feb", "M\u00e4r", "Apr", "Mai", "Jun",
"Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
weekdays: ["Sonntag", "Montag", "Dienstag", "Mittwoch",
"Donnerstag", "Freitag", "Samstag"],
rangeSelectorZoom: '',
rangeSelectorFrom: 'Von',
rangeSelectorTo: 'Bis',
thousandsSep: '.',
decimalPoint: ',',
downloadJPEG: 'als JPG herunterladen',
downloadPDF: 'als PDF herunterladen',
downloadPNG: 'als PNG herunterladen',
downloadSVG: 'als SVG herunterladen',
printChart: 'Chart drucken'
},
title: {
style: {
color: '#648caa'
}
},
exporting: {
buttons: {
contextButton: {
symbolStroke: '#648caa',
symbolFill: '#fff',
theme: {
'stroke-width': 1,
r: 0,
states: {
hover: {
fill: '#fff',
stroke: '#648caa'
},
select: {
fill: '#fff'
}
}
}
}
},
scale: 2,
chartOptions: {
events: {
load: function () {
this.legend.render();
}
},
rangeSelector: {
buttons: []
}
}
}
});
// Get performance data for fund with ISIN DE0008479015
$.getJSON('https://api.hansainvest.com/api/v1/investment_structure-asset_structure/DE0005321459/?language=', function(json_data) {
// Generate chart
var chartbar1 = new Highcharts.Chart(
{
"title": {
"text": json_data.fund.name + ' – '
+ json_data.fund.isin + ' – '
+ json_data.structure.type
},
"chart": {
"renderTo": "chart-bar-1",
"type": "bar",
"backgroundColor": "#ffffff"
},
"legend": {
"enabled": false
},
"xAxis": {
"type": "category",
"min": 0,
"gridLineDashStyle": "Dot",
"gridLineWidth": 1,
"gridLineColor": "#648caa",
"labels": {
"style": {
"color": "#000000",
"fontSize": "13px",
"fontWeight": "bold"
}
},
"categories": getCategories(json_data.structure.data)
},
"yAxis": {
"title": {
"text": null
},
"gridLineDashStyle": "Dot",
"gridLineWidth": 1,
"gridLineColor": "#648caa",
"tickInterval": 10,
"endOnTick": false,
"ceiling": 110
},
"labels": {
"style": {
"fontSize": "13px",
"fontWeight": "bold"
}
},
"credits": {
"enabled": false
},
"plotOptions": {
"bar": {
"color": "#648caa"
},
"series": {
"dataLabels": {
"enabled": true,
"useHTML": false,
"crop": false,
"overflow": "justify",
"format": "{point.y:.1f} %",
"style": {
"fontSize": "13px",
"fontWeight": "bold",
"textShadow": "none"
}
}
}
},
"exporting": {
"chartOptions": {
"title": {
"text": json_data.fund.name
+ " "
+ json_data.structure.type
}
},
"filename": json_data.fund.isin
+ "_-_"
+ json_data.structure.type
},
"series": [{
"name": json_data.structure.type,
"data": formatData(json_data.structure.data)
}]
});
});
Bar chart - different colors
<div id="chart-bar-2"></div>
<!-- move to closing body tag -->
<!-- use jQuery only in necessary -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<!-- Highcharts is mandatory -->
<script src="https://code.highcharts.com/10.2/highcharts.js" crossorigin="anonymous"></script>
<!-- use Highcharts exporting plugin only in necessary -->
<script src="https://code.highcharts.com/10.2/modules/exporting.js" crossorigin="anonymous"></script>
<!-- place the individual Highcharts code below as inline script or include -->
function getCategories(data) {
var categories = [];
for (index = 0; index < data.length; ++index) {
categories.push(data[index].name);
}
return categories;
}
function formatData(data) {
var formatted = [];
for (index = 0; index < data.length; ++index) {
var bar = [data[index].name, data[index].percent];
formatted.push(bar);
}
return formatted;
}
(function (H) {
/**
* Highcharts plugin for alternating colors of data labels due to position
*/
H.wrap(H.seriesTypes.column.prototype, 'drawDataLabels', function (p) {
p.call(this);
H.each(this.points, function (p) {
if (p.dataLabel && p.dataLabel.alignOptions && p.y) {
if (p.dataLabel.alignOptions.align === 'right' && p.y > 0) {
p.dataLabel.css({ color: '#FFFFFF' });
} else {
p.dataLabel.css({ color: '#000000' });
}
}
});
});
}(Highcharts));
/**
* Adjust size for hidden charts
* @param chart highcharts
*/
function adjustGraph(chart) {
try {
if (typeof (chart === 'undefined' || chart === null)
&& this instanceof jQuery) { // if no obj chart and the context is set
this.find('.chart-container:visible').each(
function () { // for only visible charts container in the curent context
$container = $(this); // context container
$container.find('div[id^="chart-"]').each(
function () { // for only chart
$chart = $(this).highcharts(); // cast from JQuery to highcharts obj
$chart.setSize($container.width(),
$chart.chartHeight,
doAnimation = true); // adjust chart size with animation transition
});
});
} else {
chart.setSize($('.chart-container:visible').width(),
chart.chartHeight, doAnimation = true); // if chart is set, adjust
}
} catch (err) {
// do nothing
}
}
$(function (H) {
$(window).resize(function () {
if (this.resizeTO)
clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function () {
// resizeEnd call function with pass context body
adjustGraph.call($('body'));
}, 500);
});
});
// Global options
Highcharts.setOptions({
global: {
timezoneOffset: 0 * 60
},
lang: {
months: ["Januar", "Februar", "M\u00e4rz", "April", "Mai", "Juni",
"Juli", "August", "September", "Oktober", "November",
"Dezember"],
shortMonths: ["Jan", "Feb", "M\u00e4r", "Apr", "Mai", "Jun",
"Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
weekdays: ["Sonntag", "Montag", "Dienstag", "Mittwoch",
"Donnerstag", "Freitag", "Samstag"],
rangeSelectorZoom: '',
rangeSelectorFrom: 'Von',
rangeSelectorTo: 'Bis',
thousandsSep: '.',
decimalPoint: ',',
downloadJPEG: 'als JPG herunterladen',
downloadPDF: 'als PDF herunterladen',
downloadPNG: 'als PNG herunterladen',
downloadSVG: 'als SVG herunterladen',
printChart: 'Chart drucken'
},
title: {
style: {
color: '#648caa'
}
},
exporting: {
buttons: {
contextButton: {
symbolStroke: '#648caa',
symbolFill: '#fff',
theme: {
'stroke-width': 1,
r: 0,
states: {
hover: {
fill: '#fff',
stroke: '#648caa'
},
select: {
fill: '#fff'
}
}
}
}
},
scale: 2,
chartOptions: {
events: {
load: function () {
this.legend.render();
}
},
rangeSelector: {
buttons: []
}
}
}
});
// Get investment strucuture data for fund with ISIN DE0008479023
$
.getJSON(
'https://api.hansainvest.com/api/v1/investment_structure-industrial_sectors/DE0008479023/?language=de',
function (json_data) {
// Generate chart
var chartbar2 = new Highcharts.Chart(
{
"title": {
"text": json_data.fund.name + ' – '
+ json_data.fund.isin + ' – '
+ json_data.structure.type,
style: {
color: '#663399'
}
},
"chart": {
"renderTo": "chart-bar-2",
"type": "bar"
},
"legend": {
"enabled": false
},
"xAxis": {
"type": "category",
"min": 0,
"gridLineDashStyle": "Dot",
"gridLineWidth": 1,
"gridLineColor": "#648caa",
"labels": {
"style": {
"color": "#000000",
"fontSize": "13px",
"fontWeight": "bold"
}
},
"categories": getCategories(json_data.structure.data)
},
"yAxis": {
"title": {
"text": null
},
"gridLineDashStyle": "Dot",
"gridLineWidth": 1,
"gridLineColor": "#648caa",
"tickInterval": 10,
"endOnTick": false,
"ceiling": 110
},
"labels": {
"style": {
"fontSize": "13px",
"fontWeight": "bold"
}
},
"credits": {
"enabled": false
},
"plotOptions": {
"bar": {
"color": "#BADA55"
},
"series": {
"dataLabels": {
"enabled": true,
"useHTML": false,
"crop": false,
"overflow": "justify",
"format": "{point.y:.1f} %",
"style": {
"fontSize": "13px",
"fontWeight": "bold",
"textShadow": "none"
}
}
}
},
"exporting": {
"chartOptions": {
"title": {
"text": json_data.fund.name
+ " "
+ json_data.structure.type
}
},
"filename": json_data.fund.isin
+ "_-_"
+ json_data.structure.type
},
"series": [{
"name": json_data.structure.type,
"data": formatData(json_data.structure.data)
}]
});
});
Bar chart - generate code for custom colors
<div id="chart-bar-cg"></div>
<!-- move to closing body tag -->
<!-- use jQuery only in necessary -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<!-- Highcharts is mandatory -->
<script src="https://code.highcharts.com/10.2/highcharts.js" crossorigin="anonymous"></script>
<!-- use Highcharts exporting plugin only in necessary -->
<script src="https://code.highcharts.com/10.2/modules/exporting.js" crossorigin="anonymous"></script>
<!-- place the individual Highcharts code below as inline script or include -->
function getCategories(data) {
var categories = [];
for (index = 0; index < data.length; ++index) {
categories.push(data[index].name);
}
return categories;
}
function formatData(data) {
var formatted = [];
for (index = 0; index < data.length; ++index) {
var bar = [data[index].name, data[index].percent];
formatted.push(bar);
}
return formatted;
}
(function (H) {
/**
* Highcharts plugin for alternating colors of data labels due to position
*/
H.wrap(H.seriesTypes.column.prototype, 'drawDataLabels', function (p) {
p.call(this);
H.each(this.points, function (p) {
if (p.dataLabel && p.dataLabel.alignOptions && p.y) {
if (p.dataLabel.alignOptions.align === 'right' && p.y > 0) {
p.dataLabel.css({ color: '#FFFFFF' });
} else {
p.dataLabel.css({ color: '#000000' });
}
}
});
});
}(Highcharts));
/**
* Adjust size for hidden charts
* @param chart highcharts
*/
function adjustGraph(chart) {
try {
if (typeof (chart === 'undefined' || chart === null)
&& this instanceof jQuery) { // if no obj chart and the context is set
this.find('.chart-container:visible').each(
function () { // for only visible charts container in the curent context
$container = $(this); // context container
$container.find('div[id^="chart-"]').each(
function () { // for only chart
$chart = $(this).highcharts(); // cast from JQuery to highcharts obj
$chart.setSize($container.width(),
$chart.chartHeight,
doAnimation = true); // adjust chart size with animation transition
});
});
} else {
chart.setSize($('.chart-container:visible').width(),
chart.chartHeight, doAnimation = true); // if chart is set, adjust
}
} catch (err) {
// do nothing
}
}
$(function (H) {
$(window).resize(function () {
if (this.resizeTO)
clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function () {
// resizeEnd call function with pass context body
adjustGraph.call($('body'));
}, 500);
});
});
// Global options
Highcharts.setOptions({
global: {
timezoneOffset: 0 * 60
},
lang: {
months: ["Januar", "Februar", "M\u00e4rz", "April", "Mai", "Juni",
"Juli", "August", "September", "Oktober", "November",
"Dezember"],
shortMonths: ["Jan", "Feb", "M\u00e4r", "Apr", "Mai", "Jun",
"Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
weekdays: ["Sonntag", "Montag", "Dienstag", "Mittwoch",
"Donnerstag", "Freitag", "Samstag"],
rangeSelectorZoom: '',
rangeSelectorFrom: 'Von',
rangeSelectorTo: 'Bis',
thousandsSep: '.',
decimalPoint: ',',
downloadJPEG: 'als JPG herunterladen',
downloadPDF: 'als PDF herunterladen',
downloadPNG: 'als PNG herunterladen',
downloadSVG: 'als SVG herunterladen',
printChart: 'Chart drucken'
},
title: {
style: {
color: '#648caa'
}
},
exporting: {
buttons: {
contextButton: {
symbolStroke: '#648caa',
symbolFill: '#fff',
theme: {
'stroke-width': 1,
r: 0,
states: {
hover: {
fill: '#fff',
stroke: '#648caa'
},
select: {
fill: '#fff'
}
}
}
}
},
scale: 2,
chartOptions: {
events: {
load: function () {
this.legend.render();
}
},
rangeSelector: {
buttons: []
}
}
}
});
// Get performance data for fund with ISIN DE0008479015
$.getJSON('https://api.hansainvest.com/api/v1/investment_structure-asset_structure/DE0005321459/?language=de', function(json_data) {
// Generate chart
var chartbarcg = new Highcharts.Chart(
{
"title": {
"text": json_data.fund.name + ' – '
+ json_data.fund.isin + ' – '
+ json_data.structure.type
},
"chart": {
"renderTo": "chart-bar-cg",
"type": "bar",
"backgroundColor": "#ffffff"
},
"legend": {
"enabled": false
},
"xAxis": {
"type": "category",
"min": 0,
"gridLineDashStyle": "Dot",
"gridLineWidth": 1,
"gridLineColor": "#648caa",
"labels": {
"style": {
"color": "#000000",
"fontSize": "13px",
"fontWeight": "bold"
}
},
"categories": getCategories(json_data.structure.data)
},
"yAxis": {
"title": {
"text": null
},
"gridLineDashStyle": "Dot",
"gridLineWidth": 1,
"gridLineColor": "#648caa",
"tickInterval": 10,
"endOnTick": false,
"ceiling": 110
},
"labels": {
"style": {
"fontSize": "13px",
"fontWeight": "bold"
}
},
"credits": {
"enabled": false
},
"plotOptions": {
"bar": {
"color": ""
},
"series": {
"dataLabels": {
"enabled": true,
"useHTML": false,
"crop": false,
"overflow": "justify",
"format": "{point.y:.1f} %",
"style": {
"fontSize": "13px",
"fontWeight": "bold",
"textShadow": "none"
}
}
}
},
"exporting": {
"chartOptions": {
"title": {
"text": json_data.fund.name
+ " "
+ json_data.structure.type
}
},
"filename": json_data.fund.isin
+ "_-_"
+ json_data.structure.type
},
"series": [{
"name": json_data.structure.type,
"data": formatData(json_data.structure.data)
}]
});
});