{"id":33531,"date":"2017-10-03T12:13:09","date_gmt":"2017-10-03T19:13:09","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=33531"},"modified":"2017-10-03T12:13:09","modified_gmt":"2017-10-03T19:13:09","slug":"microcharts-elegant-cross-platform-charts-for-any-app","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/microcharts-elegant-cross-platform-charts-for-any-app\/","title":{"rendered":"Microcharts: Elegant Cross-Platform Charts for Every App"},"content":{"rendered":"<p>\t\t\t\t<i>This is a guest post from Alo&iuml;s Deniel. Alo&iuml;s works at Orange Applications for Business as a Xamarin consultant. You can find him on Twitter at <a href=\"https:\/\/twitter.com\/aloisdeniel\"><i>@aloisdeniel<\/i><\/a> and on Github at <a href=\"https:\/\/github.com\/aloisdeniel\/\"><i>@aloisdeniel<\/i><\/a>.<\/i><\/p>\n<p>Displaying charts in mobile apps has always been a great way to offer users a clear overview of numerical data. In my time as a developer, I wanted this task to be as easy as writing a few lines of code, but I couldn&#8217;t find a straight-forward way to achieve this, which is why I started exploring <a href=\"https:\/\/github.com\/mono\/SkiaSharp\">SkiaSharp<\/a> and created <a href=\"https:\/\/github.com\/aloisdeniel\/Microcharts\">Microcharts<\/a>. Microcharts is a selection of common charts that are easy to use, visually pleasing, and built with cross-platform compatibility in mind.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/bikr.png\" alt=\"\" width=\"900\" height=\"549\" class=\"aligncenter size-full wp-image-33575\" \/><\/p>\n<p>Microcharts provides ready-to-use charts for Android, iOS, macOS, UWP, and even Xamarin.Forms. If you&#8217;re already using SkiaSharp in your application, you can also render them into any SkiaSharp canvas.<\/p>\n<h2>Data Entries<\/h2>\n<p>Every chart displayed via Microcharts consumes a set of data entries, and they will always have the same structure regardless of the chart type that you want to display.\nEach entry will have:<\/p>\n<ul>\n<li>A floating number representing its value <em>(required)<\/em>.<\/li>\n<li>A <code>Label<\/code> describing what your entry is associated with.<\/li>\n<li>A <code>ValueLabel<\/code> to format your value.<\/li>\n<li>A <code>Color<\/code> associated with the entry.<\/li>\n<\/ul>\n<p>Here&#8217;s a quick sample of a set of entry points that we&#8217;ll chart in a moment:<\/p>\n<pre class=\"lang:chsharp decode:true\"><code>\nvar entries = new []\n {\n     new Entry(212)\n     {\n         Label = \"UWP\",\n         ValueLabel = \"212\",\n         Color = SKColor.Parse(\"#2c3e50\")\n     },\n     new Entry(248)\n     {\n         Label = \"Android\",\n         ValueLabel = \"248\",\n         Color = SKColor.Parse(\"#77d065\")\n     },\n     new Entry(128)\n     {\n         Label = \"iOS\",\n         ValueLabel = \"128\",\n         Color = SKColor.Parse(\"#b455b6\")\n     },\n     new Entry(514)\n     {\n         Label = \"Shared\",\n         ValueLabel = \"514\",\n         Color = SKColor.Parse(\"#3498db\")\n} };<\/code><\/pre>\n<h2>Chart Types<\/h2>\n<p>A wide range of charts are included in Microcharts, so you can pick the one that fits your application and data best. All you need to do is set the data entries through the <code>Entries<\/code> property of any chart control.<\/p>\n<h3>BarChart<\/h3>\n<pre class=\"lang:chsharp decode:true\"><code>var chart = new BarChart() { Entries = entries };<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/Bar.png\" alt=\"\" width=\"367\" height=\"140\" class=\"aligncenter size-full wp-image-33574\" \/><\/p>\n<h3>LineChart<\/h3>\n<pre class=\"lang:chsharp decode:true\"><code>var chart = new LineChart() { Entries = entries };<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/Line.png\" alt=\"\" width=\"367\" height=\"140\" class=\"aligncenter size-full wp-image-33577\" \/><\/p>\n<h3>PointChart<\/h3>\n<pre class=\"lang:chsharp decode:true\"><code>var chart = new PointChart() { Entries = entries };<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/Point.png\" alt=\"\" width=\"367\" height=\"140\" class=\"aligncenter size-full wp-image-33579\" \/><\/p>\n<h3>RadialGauge<\/h3>\n<pre class=\"lang:chsharp decode:true\"><code>var chart = new RadialGaugeChart() { Entries = entries };<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/RadialGauge.png\" alt=\"\" width=\"367\" height=\"140\" class=\"aligncenter size-full wp-image-33581\" \/><\/p>\n<h3>Donut<\/h3>\n<pre class=\"lang:chsharp decode:true\"><code>var chart = new DonutChart() { Entries = entries };<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/Donut.png\" alt=\"\" width=\"367\" height=\"140\" class=\"aligncenter size-full wp-image-33576\" \/><\/p>\n<h3>Radar<\/h3>\n<pre class=\"lang:chsharp decode:true\"><code>var chart = new RadarChart() { Entries = entries };<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/Radar.png\" alt=\"\" width=\"367\" height=\"140\" class=\"aligncenter size-full wp-image-33580\" \/><\/p>\n<h2>Displaying a Chart<\/h2>\n<p>To display a chart, we&#8217;ll need to host it in a <code>ChartView<\/code>.<\/p>\n<pre class=\"lang:chsharp decode:true\"><code>\n&lt;ContentPage&gt;\n     xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\n     xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n     xmlns:microcharts=\"clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms\"\n     xmlns:local=\"clr-namespace:Microcharts.Samples.Forms\"\n     x:Class=\"Microcharts.Samples.Forms.MainPage\"&gt;\n     &lt;microcharts:ChartView x:Name=\"chartView\" \/&gt;\n&lt;\/ContentPage&gt;<\/code>\n<\/pre>\n<p>The chart data can now be affected by the view <code>Chart<\/code> property. <\/p>\n<pre class=\"lang:chsharp decode:true\">this.chartView.Chart = chart;<\/pre>\n<p>        The <code>Chart<\/code> property is a bindable property, so it&#8217;s also perfectly fine to use a binding from a ViewModel\nfor this.<\/p>\n<pre class=\"lang:xml decode:true\">&lt;microcharts:ChartView x:Name=\"chartView\" Chart=\"{Binding Chart}\" \/&gt;<\/pre>\n<p>The above example uses Xamarin.Forms, but built-in views are also available for iOS, Android, macOS, and UWP directly.<\/p>\n<h2>Tweaking the Visual Aspect<\/h2>\n<p>Each type of graph has several properties to slightly modify its final rendering. For example, our previous <code>LineChart<\/code> example looked like this :<\/p>\n<pre class=\"lang:chsharp decode:true\"><code>var chart = new LineChart()\n {\n   Entries = entries\n };<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/Line.png\" alt=\"\" width=\"367\" height=\"140\" class=\"aligncenter size-full wp-image-33577\" \/><\/p>\n<p>By changing the line and point properties, we can finely tune the design:<\/p>\n<pre class=\"lang:chsharp decode:true\"><code>var chart = new LineChart()\n {\n   Entries = entries,\n   LineMode = LineMode.Straight,\n   LineSize = 8,\n   PointMode = PointMode.Square,\n   PointSize = 18,\n};<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/Line_Modified.png\" alt=\"\" width=\"367\" height=\"140\" class=\"aligncenter size-full wp-image-33578\" \/><\/p>\n<p>Feel free to explore each chart property to make it your own and create a unique design.<\/p>\n<h2>Sample Application<\/h2>\n<p>For a more contextual usage of Microcharts, please take a look at the <a href=\"https:\/\/github.com\/aloisdeniel\/Microcharts.Samples\">dedicated repository<\/a>, which shows off a biking application with various use cases for charts.<\/p>\n<h2>This is just the beginning!<\/h2>\n<p>Microcharts is still young and will continue to be improved, so stay tuned on <a href=\"https:\/\/github.com\/aloisdeniel\/Microcharts\">GitHub<\/a> or <a href=\"https:\/\/twitter.com\/aloisdeniel\">Twitter<\/a>! This project is open-source, so please don&#8217;t hesitate to share new charts type, missing properties, and issues.<\/p>\n<p><i><a href=\"https:\/\/forums.xamarin.com\/\"><i>Discuss this post on the forums<\/i><\/a>.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a guest post from Alo&iuml;s Deniel. Alo&iuml;s works at Orange Applications for Business as a Xamarin consultant. You can find him on Twitter at @aloisdeniel and on Github at @aloisdeniel. Displaying charts in mobile apps has always been a great way to offer users a clear overview of numerical data. In my time [&hellip;]<\/p>\n","protected":false},"author":1936,"featured_media":33575,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[4],"class_list":["post-33531","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-xamarin-platform"],"acf":[],"blog_post_summary":"<p>This is a guest post from Alo&iuml;s Deniel. Alo&iuml;s works at Orange Applications for Business as a Xamarin consultant. You can find him on Twitter at @aloisdeniel and on Github at @aloisdeniel. Displaying charts in mobile apps has always been a great way to offer users a clear overview of numerical data. In my time [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/33531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/1936"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=33531"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/33531\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=33531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=33531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=33531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}