{"id":2698,"date":"2021-07-28T10:47:47","date_gmt":"2021-07-28T10:47:47","guid":{"rendered":"https:\/\/mindfusion.eu\/blog\/?p=2698"},"modified":"2021-07-28T11:04:56","modified_gmt":"2021-07-28T11:04:56","slug":"building-a-mekko-chart-in-react","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/building-a-mekko-chart-in-react\/","title":{"rendered":"Building a Mekko Chart In React"},"content":{"rendered":"

In this tutorial we will use the BarChart<\/a> control from the JavaScript Charting library to build a mekko chart in React. The final chart is shown below:<\/p>\n

<\/a><\/p>\n

<\/p>\n

I. Project Setup<\/strong><\/p>\n

We create a blank React app using create-react-app:<\/p>\n

npx create-react-app mekko-chart<\/pre>\n
After that we navigate to the newly created folder with the project and there install jQuery and the charting library for JavaScript from npm:<\/p>\n
cd mekko-chart\nnpm install jquery\nnpm install chart-library<\/pre>\n
Now we are ready to code. We create a new file in the src folder, which we name MekkoChart. There we add references to React, jQuery and the chart library:<\/p>\n
import React, { Component } from 'react';\nimport * as Charting from 'chart-library';\nimport MindFusion from 'mindfusion-common';<\/pre>\n
This means we can access now the members of the chart library using the “Charting” prefix. The “common” namespace contains graphical classes like brushes, strokes, font properties etc. That’s why we import it as well. Its members will be accessed with the “Drawing” prefix.<\/p>\n
The chart library is a JavaScript library and it requires a DOM element to render itself onto. We get the DOM element in the constructor of the MekkoChart class, which we initialize:<\/p>\n
class MekkoChart extends Component {\n\nconstructor(props) {\n    super(props);\n\n    this.el = React.createRef();\n\t\n}\n\nexport default MekkoChart;\n<\/pre>\n
Now that we have a reference to the underlying DOM element, we have to declare which is it. In the render method we create a Canvas element that will render our chart. We use the ref attribute to assign to it the reference that was returned by createRef:<\/p>\n
render() {\n     return (\n<div>\n    <canvas ref=\"{this.el}\" width=\"1000px\" height=\"500px\"><\/canvas>\n<\/div>\n   );\n}<\/pre>\n
With that we are ready to create the chart and customize it.<\/p>\n
II. The Chart and Chart Data<\/strong><\/p>\n
The chart will be instance of the stacked BarChart<\/a> . The constructor requires a reference to the DOM element and the type of bar chart to create. We will use BarLayout<\/a> to indicate that that bars will be rendered one on top the other:<\/p>\n
var chart = new Charting.Controls.BarChart(this.el.current, Charting.BarLayout.Stack);\nchart.licenseLocation = '.\/chart_lic.txt'; \nchart.barSpacingRatio = 0;<\/pre>\n
If you have purchased a license for the Charting library for JavaScript, you can set the location of the file with the license key using the licenseLocation<\/a> property.<\/p>\n
The barSpacingRatio<\/a> property indicates the space between bars as a percent from the bar width. In our case we don’t want any space between the bars and we set it to 0.<\/p>\n
There are various classes, which you can use to specify data for the chart. Each class derives from the Series<\/a> interface. In our case we use the BarSeries<\/a> and SimpleSeries<\/a> classes. We use BarSeriesm<\/a> because the last parameter in the constructor is for labels at the XAxis. We want under each bar to have labels and this parameter is exactly what we need. The other series needs not to be a BarSeries<\/a> , so we use SimpleSeries<\/a> .<\/p>\n
The SimpleSeries<\/a> constructor accepts two parameters: one is a list with the data and the other list with the labels. We provide the same list because we want the data to be rendered as labels as well:<\/p>\n
\/\/ create the data series\nvar series = new MindFusion.Charting.Collections.ObservableCollection(\n[\n\tnew Charting.SimpleSeries(new MindFusion.Charting.Collections.List([23, 74, 58, 62, 22, 29]), \n\tnew MindFusion.Charting.Collections.List([23, 74, 58, 62, 22, 29])),\n\tnew Charting.BarSeries(new MindFusion.Charting.Collections.List([77, 26, 42, 38, 78, 71 ]),\n\tnew MindFusion.Charting.Collections.List([77, 26, 42, 38, 78, 71 ]), null, labels)\t\t\n]);<\/pre>\n
The BarSeries<\/a> constructor accepts 4 parameters: the first one is a list with the bar data. The others are labels: inner, top and XAxis-labels. We specify a list with the data and set the same data list as the second parameter. The third parameter is null, but the last parameter is a list with custom labels:<\/p>\n
var labels = [\"Biology\", \"Math\", \"Chemistry\", \"IT\", \"Foreign\\nLanguages\", \"Economics\"];<\/pre>\n
Now we have to tell the library which list is used for what kind of labels. Each chart can have a variety of labels and the supportedLabels<\/a> property is how you specify where you want the labels to be rendered. In our case we want the labels of the simple series to be rendered as tooltips:<\/p>\n
series.item(0).title = \"Boys\";\nseries.item(0).supportedLabels = Charting.LabelKinds.ToolTip;<\/pre>\n
The LabelKinds<\/a> enumeration supports bitwise combination of its members, which is used when the series supports  multiple labels. The BarSeries<\/a> is such series:<\/p>\n
series.item(1).supportedLabels = Charting.LabelKinds.ToolTip | Charting.LabelKinds.XAxisLabel;\nseries.item(1).title = \"Girls\";<\/pre>\n
With this property we indicate that the two lists with labels will be used for tooltips and labels for the XAxis.  The Title<\/a> property of each Series<\/a> is used for a label in the chart legend.<\/p>\n
Finally, we need to assign the ObservableCollection<\/a> with the Series<\/a> to the series<\/a> property of the Chart<\/a> class:<\/p>\n
chart.series = series;<\/pre>\n
III. Axes and Appearance<\/strong><\/p>\n
The two axes of our chart are accessible through the xAxis<\/a> and yAxis<\/a> properties of the BarChart<\/a> class. They expose various fields for customizing the axis in terms of scale: interval<\/a> , minValue<\/a> , maxValue<\/a> and more. The title<\/a> property specifies the main label for the axis.<\/p>\n
\/\/axis settings\nchart.yAxis.title = \"Percent\";\nchart.yAxis.interval = 10;\nchart.yAxis.maxValue = 101;\n\nchart.xAxis.interval = 1;\nchart.xAxis.minValue = 0;\nchart.xAxis.maxValue = 7;\nchart.xAxis.title = \"\";<\/pre>\n
The xAxisTickLength<\/a> and yAxisTickLength<\/a> properties of BarChart<\/a> set how long the ticks will be. We don’t want any ticks on the XAxis. We also want to hide the coordinates on this axis – we want it to render only labels:<\/p>\n
 \/\/chart settings\nchart.showXCoordinates = false;\nchart.xAxisTickLength = 0;\t\t\nchart.showToolTips = true;\nchart.showLegendTitle = false;<\/pre>\n
The appearance of the bars is specified through various SeriesStyle<\/a> classes. We use the PerSeriesStyle<\/a> class, which applies the same brush and stroke to all elements of a consequtive Series<\/a> from the series<\/a> list. The brushes, strokes and the stroke thicknesses are provided as parameters:<\/p>\n
\/\/ assign one brush per series\n\t\tchart.plot.seriesStyle = new Charting.PerSeriesStyle(new MindFusion.Charting.Collections.List([firstBrush, secondBrush]),\n\t\tnew MindFusion.Charting.Collections.List([thirdBrush]), new MindFusion.Charting.Collections.List([6]));<\/pre>\n
The theme<\/a> property of the Chart<\/a> class is the property that exposes the most appearance settings for any type of chart. As you can see we have used it to specify how the labels, legend and the highlight of the chart will look.  The highlightStroke<\/a> is the brush that is used to outline the chart element that is currently pointed with the mouse:<\/p>\n
\/\/appearance settings\nchart.theme.legendBackground = thirdBrush;\nchart.theme.legendBorderStroke = darkGrayBrush;\nchart.theme.dataLabelsBrush = darkGrayBrush;\nchart.theme.dataLabelsFontSize = chart.theme.axisLabelsFontSize = 14;\nchart.theme.axisTitleFontSize = 16;\nchart.theme.axisLabelsFontSize = 14;\nchart.theme.axisTitleFontName = \"Verdana\";\nchart.theme.axisLabelsFontName = \"Verdana\";\nchart.theme.dataLabelsFontName = \"Verdana\";\nchart.theme.titleBrush = new MindFusion.Charting.Drawing.Brush(\"#737373\");\nchart.theme.titleFontName = \"Verdana\";\nchart.theme.highlightStroke = new MindFusion.Charting.Drawing.Brush(\"#5870a7\");\nchart.theme.highlightStrokeThickness = 3;\nchart.theme.highlightStrokeDashStyle = Charting.Drawing.DashStyle.Dot;<\/pre>\n
The Theme<\/a> class has many members, all of them used to customize the chart looks. You can create custom themes and apply them directly to the theme<\/a> property as objects.<\/p>\n
The last thing to customize is the ToolTip<\/a> . Tooltip customization is done through properties of a class with the same name:<\/p>\n
\/\/ customize tooltips\nCharting.ToolTip.position = new MindFusion.Drawing.Point (20, 20);\nCharting.ToolTip.brush = new MindFusion.Charting.Drawing.Brush(\"#fafafa\");\nCharting.ToolTip.pen = new MindFusion.Charting.Drawing.Pen(\"#9caac6\");\nCharting.ToolTip.textBrush = darkGrayBrush;\nCharting.ToolTip.horizontalPadding = 6;\nCharting.ToolTip.verticalPadding = 4;\nCharting.ToolTip.font = new Charting.Drawing.Font(\"Verdana\", 12, Charting.Drawing.FontStyle.Regular);<\/pre>\n
This is a static class and setting the properties is applied directly on the tooltips, even when they are not set through ToolTip.text.<\/p>\n
Finally, let’s not forget to call the draw<\/a> method to make sure that all changes are reflected and rendered:<\/p>\n
chart.draw();<\/pre>\n
And with that our Mekko chart is ready. You can download the React project from this link:<\/p>\n
Mekko Chart in React: Sample Source Code Download<\/a><\/p>\n
In order to run the project you need to have npm installed. Open command prompt\/terminal, navigate to the project folder and execute:<\/p>\n
npm install\nnpm start<\/pre>\n
Technical support is available at MindFusion discussion board.<\/a><\/p>\n
About Charting for JavaScript:<\/i> MindFusion library for interactive charts and gauges. It supports all common chart types including 3D bar charts. Charts can have a grid, a legend, unlimitd number of axes and series. Scroll, zoom and pan are supported out of the box. You can easily create your own chart series by implementing the Series interface.
\nThe gauges library is part of Charting for JavaScript. It supports oval and linear gauge with several types of labels and ticks. Various samples show you how the implement the gauges to create and customize all popular gauge types: car dashboard, clock, thermometer, compass etc. Learn more about Charting and Gauges for JavaScript at https:\/\/mindfusion.dev\/javascript-chart.html<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this tutorial we will use the BarChart control from the JavaScript Charting library to build a mekko chart in React. The final chart is shown below:<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[61,513,673,74],"tags":[677,568,675,674,676],"class_list":["post-2698","post","type-post","status-publish","format-standard","hentry","category-charting-2","category-javascript","category-react","category-sample-code","tag-chart-tutorial","tag-javascript-code","tag-mekko-chart","tag-react-chart","tag-react-tutorial"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-Hw","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2698","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=2698"}],"version-history":[{"count":4,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2698\/revisions"}],"predecessor-version":[{"id":2703,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2698\/revisions\/2703"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=2698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=2698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=2698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}