/// <reference path="JsChart-vsdoc.js" />

var Charting = MindFusion.Charting;

var Controls = Charting.Controls;

var Collections = MindFusion.Common.Collections;

var Drawing = MindFusion.Drawing;

var Components = Charting.Components;

var ToolTip = Charting.ToolTip;

var chartEl = document.getElementById('chart');

chartEl.width = chartEl.offsetParent.clientWidth;

chartEl.height = chartEl.offsetParent.clientHeight;

var barChart = new Controls.BarChart(chartEl, Charting.BarLayout.Stack);

barChart.horizontalBars = true;

barChart.showLegend = false;

barChart.barSpacingRatio = 0.2;

barChart.allowPan = false;

barChart.allowZoom = false;

barChart.title = "HOW IMPORTANT IS WORK/LIFE BALANCE ON YOUR JOB?";

barChart.subtitle = "A survey among 1,800 working professionals of all ages and genders";

barChart.theme.dataLabelsBrush = new Drawing.Brush("#fcfcfc");

barChart.theme.subtitleBrush = new Drawing.Brush("#546e7a");

barChart.theme.axisStroke = new Drawing.Brush("transparent");

barChart.theme.highlightStroke = new Drawing.Brush("#ffa000"); // Amber Highlight

// a custom series class is used

class BarSeriesWithToolTip extends Charting.BarSeries {

constructor(data, innerLabels, topLabels) {

super(data, innerLabels, topLabels);

}

getLabel(index, kind) {

if ((kind & Charting.LabelKinds.ToolTip) != 0 && this.topLabels)

return this.topLabels.items()[index];

return super.getLabel(index, kind);

}

}

// inner labels

var labels1 = ["12% Not at all"];

var labels2 = ["23% Little"];

var labels3 = ["31% Moderately"];

var labels4 = ["20% Important"];

var labels5 = ["14% Very much"];

// tooltips

var tooltips1 = ["216 respondents"];

var tooltips2 = ["414 respondents"];

var tooltips3 = ["558 respondents"];

var tooltips4 = ["360 respondents"];

var tooltips5 = ["252 respondents"];

// create the chart data

var series = new Collections.ObservableCollection([

new BarSeriesWithToolTip(new Collections.List([12]), labels1, tooltips1),

new BarSeriesWithToolTip(new Collections.List([23]), labels2, tooltips2),

new BarSeriesWithToolTip(new Collections.List([31]), labels3, tooltips3),

new BarSeriesWithToolTip(new Collections.List([20]), labels4, tooltips4),

new BarSeriesWithToolTip(new Collections.List([14]), labels5, tooltips5)

]);

for (var i = 0; i < series.count(); i++) {

series.item(i).supportedLabels = Charting.LabelKinds.InnerLabel | Charting.LabelKinds.ToolTip;

}

barChart.innerLabelRotation = 0;

barChart.outerLabelRotation = 0;

barChart.series = series;

// assign brushes to the chart

var brush1 = new Drawing.Brush("#26a69a"); // Teal

var brush2 = new Drawing.Brush("#2bbbad");

var brush3 = new Drawing.Brush("#3f51b5"); // Indigo

var brush4 = new Drawing.Brush("#5c6bc0");

var brush5 = new Drawing.Brush("#7986cb");

var whiteBrush = new Drawing.Brush("#ffffff");

barChart.plot.seriesStyle = new Charting.PerSeriesStyle(

new Collections.List([brush1, brush2, brush3, brush4, brush5]),

new Collections.List([whiteBrush]),

new Collections.List([2])

);

// customize the tooltip appearance

ToolTip.brush = new Drawing.Brush("#263238"); // Dark theme tooltip

ToolTip.pen = new Drawing.Pen("#37474f");

ToolTip.textBrush = new Drawing.Brush("#ffffff");

ToolTip.horizontalPadding = 12;

ToolTip.verticalPadding = 8;

ToolTip.horizontalOffset = 40;

ToolTip.verticalOffset = -30;

ToolTip.font = new Drawing.Font("sans-serif", 11, Drawing.FontStyle.Bold);

barChart.yAxis.minValue = -0.6;

barChart.yAxis.maxValue = 0.6;

barChart.yAxis.interval = 1;

barChart.yAxis.title = "";

barChart.showYCoordinates = false;

barChart.showYTicks = false;

barChart.xAxis.minValue = 0;

barChart.xAxis.maxValue = 110;

barChart.xAxis.interval = 10;

barChart.xAxis.title = "";

barChart.showXCoordinates = false;

barChart.showXTicks = false;

barChart.draw();