Highchart Pie Chart w/ custom tooltip no flex

Developer
Tim Cheng
Size
7,289 Kb
Views
10,120
  1. Highchart Pie Chart w/ custom tooltip no flex Previews
  2. Highchart Pie Chart w/ custom tooltip no flex HTML Codes
  3. Highchart Pie Chart w/ custom tooltip no flex CSS Codes
  4. Highchart Pie Chart w/ custom tooltip no flex JS Codes

How do I make an highchart pie chart w/ custom tooltip no flex?

What is a highchart pie chart w/ custom tooltip no flex? How do you make a highchart pie chart w/ custom tooltip no flex? This script and codes were developed by Tim Cheng on 17 November 2022, Thursday.

Highchart Pie Chart w/ custom tooltip no flex Previews
IQ Test

Highchart Pie Chart w/ custom tooltip no flex - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Highchart Pie Chart w/ custom tooltip no flex</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main ng-app="app"> <section class="container" ng-controller="Controller as ctrl"> <pie-chart portfolio="ctrl.portfolio" chart-title="Portfolio Assets"></pie-chart> </section>
</main> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.8/highstock-all.js'></script> <script src="js/index.js"></script>
</body>
</html>

Highchart Pie Chart w/ custom tooltip no flex - Script Codes CSS Codes

html,
body { height: 100%; width: 100%; background: #333; font-size: 14px;
}
main,
.container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; color: #fff;
}
main { height: 100%; width: 100%;
}
.container { height: 100%; width: 80%;
}
pie-chart { position: relative; display: block; width: 100%;
}
pie-chart .portfolio-assets-donut-chart-title { position: absolute; font-weight: normal; margin: 0; color: #c7c7c7;
}
pie-chart .portfolio-assets-donut-chart { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; height: 300px; width: 100%;
}
pie-chart .donut-chart-tooltip { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; white-space: normal; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-width: 150px; background-color: rgba(85,85,85,0.8); color: #fff; border-radius: calc(4em/2);
}
pie-chart .donut-chart-tooltip > i { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-box; display: inline-flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; font-style: normal; height: 4em; width: 4em; border-radius: calc(4em/2); color: #fff; margin-right: 10px;
}
pie-chart .donut-chart-tooltip > i .point-percentage { font-size: 1.5em;
}
pie-chart .donut-chart-tooltip .point-name { display: inline-block; width: 10em; padding-right: 1.3em;
}
pie-chart .portfolio-assets-legend { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; padding: 0; margin: 0;
}
pie-chart .portfolio-assets-legend li { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 33.333%;
}
pie-chart .portfolio-assets-legend li:nth-child(3n+2) { -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;
}
pie-chart .portfolio-assets-legend li:nth-child(3n+3) { -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end;
}
pie-chart .portfolio-assets-legend li:nth-child(n+4) { margin-top: 15px;
}
pie-chart .portfolio-assets-legend li .item-container { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-box; display: inline-flex; width: 90%; max-width: 20em;
}
pie-chart .portfolio-assets-legend .color-label > i { display: inline-block; height: 1em; width: 1em; margin-right: 20px;
}
pie-chart .portfolio-assets-legend .asset-details { position: relative; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1;
}
pie-chart .portfolio-assets-legend .asset-details h4 { font-size: 1em; font-weight: normal; padding-right: 2.5em; margin: 0;
}
pie-chart .portfolio-assets-legend .asset-details h5 { font-size: 1em; font-weight: normal; color: #888; margin: 0; margin-top: 5px;
}
pie-chart .portfolio-assets-legend .asset-details .percentage { position: absolute; top: 0; right: 0; font-size: 1em;
}

Highchart Pie Chart w/ custom tooltip no flex - Script Codes JS Codes

'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Controller = function Controller() { _classCallCheck(this, Controller); this.portfolio = { id: 123, portfolioAssets: [{ id: 123, name: 'Asset A', symbol: 'AAA', percentage: 10 }, { id: 124, name: 'Asset B With a really long name from foreign country: united states', name: 'Asset B with normal name', symbol: 'BBB', percentage: 15 }, { id: 125, name: 'Asset C', symbol: 'CCC', percentage: 15 }, { id: 126, name: 'Asset D', symbol: 'DDD', percentage: 10 }, { id: 127, name: 'Asset E', symbol: 'BBB', percentage: 50 }] };
};
;
angular.module('app', []).factory('highstock', function ($window) { var Highcharts = $window.Highcharts; // Pie chart has gap bug: https://github.com/highcharts/highcharts/issues/1828 Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'drawPoints', function (proceed) { if (this.options.borderColor == null && this.options.borderWidth >= 1) { Highcharts.each(this.points, function (point) { point.pointAttr['']['stroke-width'] = 1; point.pointAttr[''].stroke = point.pointAttr[''].fill; point.pointAttr['hover']['stroke-width'] = 1; point.pointAttr['hover'].stroke = point.pointAttr['hover'].fill; point.pointAttr['select']['stroke-width'] = 1; point.pointAttr['select'].stroke = point.pointAttr['select'].fill; }); } proceed.apply(this); }); return Highcharts;
}).controller('Controller', Controller).directive('pieChart', function ($timeout, highstock) { var colors = ['#CD5955', '#E96D66', '#EC876C', '#EFA071', '#EFB278', '#EEC27D', '#DEC782', '#BCBB87', '#99AD8A', '#7B9D8A', '#5E8D8A']; var chartConfig = { chart: { type: 'pie', //renderTo: null, height: 300, backgroundColor: 'none', events: { //load: null } }, title: { style: { display: 'none' } }, subtitle: { style: { display: 'none' } }, yAxis: { title: { text: 'Total percent market share' } }, plotOptions: { pie: { shadow: false, center: ['50%', '50%'], colors: colors, borderWidth: 1, borderColor: null, stickyTracking: false, dataLabels: { enabled: false }, states: { hover: { brightness: 0 } } } }, tooltip: { backgroundColor: '', borderWidth: 0, useHTML: true, formatter: function formatter() { console.log('this is ', this); var point = this.point; return '\n <section class="donut-chart-tooltip">\n <i style="background-color:' + point.color + '"><span class="point-percentage">' + (point.y + '%') + '</span></i>\n <span class="point-name" style="color:' + point.color + '">' + point.name + '</span>\n </section>\n '; } }, series: [{ name: 'Assets Percentage', data: null, // To be set size: '100%', innerSize: '60%' }], exporting: { enabled: false }, credits: { enabled: false } }; return { restrict: 'AE', scope: { portfolio: '=', chartTitle: '@' }, template: '\n <header class="portfolio-assets-donut-chart-title" ng-bind="chartTitle>\n </header>\n <div class="portfolio-assets-donut-chart"></div>\n <ul class="portfolio-assets-legend">\n <li ng-repeat="asset in portfolio.portfolioAssets">\n <div class="item-container">\n <div class="color-label"><i ng-style="{\'background-color\': getColorByIndex($index)}"></i></div>\n <div class="asset-details">\n <span ng-style="{\'color\': getColorByIndex($index)}" class="percentage" ng-bind="asset.percentage + \'%\'"></span>\n <h4 ng-style="{\'color\': getColorByIndex($index)}" ng-bind="asset.name"></h4>\n <h5 ng-bind="asset.symbol"><h5>\n </div>\n </div>\n </li>\n </ul>\n ', link: function link(scope, elem) { var titleElem = elem[0].getElementsByClassName('portfolio-assets-donut-chart-title')[0]; var chartElem = elem[0].getElementsByClassName('portfolio-assets-donut-chart')[0]; var portfolio = scope.portfolio; var chart = null; var createChart = function createChart() { // Process data var data = portfolio.portfolioAssets.map(function (item) { return { y: item.percentage, name: item.name }; }); chartConfig.series[0].data = data; chart = new highstock.Chart(chartConfig); }; scope.getColorByIndex = function (i) { var len = colors.length; return colors[i % len]; }; var positionTitle = function positionTitle() { console.log('positioning title', chart); console.log('this is ', this); Object.assign(titleElem.style, { width: this.plotWidth + 'px', height: this.plotHeight + 'px', 'line-height': this.plotHeight + 'px', left: this.plotLeft + 'px', top: this.plotTop + 'px' }); }; //chartConfig.events.load = positionTitle; chartConfig.chart.renderTo = chartElem; chartConfig.chart.events.load = positionTitle; chartConfig.chart.events.redraw = positionTitle; createChart(); } };
});
Highchart Pie Chart w/ custom tooltip no flex - Script Codes
Highchart Pie Chart w/ custom tooltip no flex - Script Codes
Home Page Home
Developer Tim Cheng
Username tmchng
Uploaded November 17, 2022
Rating 3
Size 7,289 Kb
Views 10,120
Do you need developer help for Highchart Pie Chart w/ custom tooltip no flex?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim Cheng (tmchng) Script Codes
Name
Line animation
International Phone Input
Gradient Stops
React datepicker
Step Indicator
Three Value Slider Bar Input
Angularjs Timer
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!