How To Use Morris.js Donut
Today, I want to talk about Morris.js Donut graph. This library has strong graphics. You can create stronger graphics with the help of this visual library. We will prepare the html code first to use this library.
1 2 3 4 5 6 7 |
</script> <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script> <meta charset=utf-8 /> <title>Morris.js Donut Chart Example</title> <body> <div id="sample-donut"></div> </body> |
And then we add this code for the use of morris donut.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Morris.Donut({ element: 'sample-donut', data: [ {label: "Turkey", value: 12}, {label: "Holland", value: 30}, {label: "Germany", value: 20} ], labelColor: '#000000', colors: [ '#429A3C', '#0068A6', '#E81922' ], formatter: function (x) { return x + "%" } }); |
In this section, data contains the elements to be shown in the data graph, labels appear in the labelColor graphic colors indicate the colors of the graph. If you want to give any format, the formatter will edit the format you want to send to the label. You can look into morris.js library from this link : http://morrisjs.github.io/morris.js/index.html
You should have a look at my another post about What Is PrimeNg
If you have question do not forget to write from the chat button next to it or from the comment.
Recent Comments