The Microsoft Power BI visuals project provides high quality data visualizations that you can use to extend Power BI. The project contains over 30 visualization types plus custom visuals by MAQ Software, the framework to run them, and the testing infrastructure that enables you to build high quality visualizations. The framework provides all the interfaces you need to integrate fully with Power BI's selection, filtering, and other UI experiences. The code is written in TypeScript so it's easier to build and debug. Everything compiles down to JavaScript and runs in modern web browsers. The visuals are built using D3 but you can use your favorite technology like WebGL, Canvas, or SVG. This gives you everything you need to build custom visualizations for Power BI.
| Circular Gauge by MAQ Software | Linear Gauge by MAQ Software | Brick Chart by MAQ Software |
|---|---|---|
 Illustrates progress toward goals in either a pie or donut chart format. One color illustrates current progress, the other displays the target. The percentage displayed on the report tracks progress against the target. Text size and ring size are customizable. App Source URL |
 Create at-a-glance visualization to compare your progress against identified goals and warning zones. This visual allows you to include multiple data points. The component provides the ability to illustrate trend details such as monthly or year-to-date completion rates. The pointer notes targets, and the colored bar shows the current progress toward those goals. Best suited for showing progress as compared to a target. App Source URL |
 Consists of 100 squares that are colored according to the percentage breakdown of datasets. Hovering your mouse over a square brings up a tooltip. The tooltip indicates which dataset the color represents and the percentage value of the category. An optional legend above the chart identifies which datasets correspond with which colors. You may tailor the legend's title, size, and color. They may also customize the chart's width and height. App Source URL |
| Trading Chart by MAQ Software | Bowtie Chart by MAQ Software | Horizontal Funnel by MAQ Software |
|---|---|---|
 Displays significant stock price points as colored vertical bars. Low and high price values are represented by grey bars. Open and close price values are shown as either red or green bars, which are superimposed over the low and high values. If a stock's price drops, the bar is red; if the price rises the bar is green. Prices are listed on the vertical axis and time increments are listed on the horizontal axis. The ranges for prices and time increments are customizable. App Source URL |
 Displays the categorization of an aggregated value by branching out smooth interpolated nodes. The thickness of the branch indicates the weight of the category. You can display a half bowtie or full bowtie by providing the source category or the source and destination categories, respectively. App Source URL |
 Allows you to visualize customizable primary measure as colored bars. You can use Horizontal Funnel to display a variety of metrics including sales stages, time, or geographic locations. A second customizable value is displayed beneath the colored bars, allowing users the ability to track an additional metric against the primary measure. The component includes the option to create a tool tip, which you may tailor to fit specific needs. App Source URL |
| Ring Chart by MAQ Software | JSON Grid by MAQ Software | Thermometer by MAQ Software |
|---|---|---|
 Represents data as slices, where sizes are relative to data. The size of each slice is determined by the slice value relative to the sum of the values of all slices. Each data series that you plot in the chart adds a ring to the chart. The rings have different colors for easy representation of the data slices in the chart. Key features: 1. Ability to turn on animation to focus on specific slices. The animation visually pulls slices out of the ring chart. 2. Dynamic indicator displayed along with the summary at the center of ring. Threshold values define the color and direction of the indicator. 3. Ability to display primary and secondary measures in legends with indicators. 4. Ability to showcase multiple data fields in tooltips. App Source URL |
 Easy to use control with pagination, sorting, and GET Rest API call functionality. Grid allows you to add a paginated grid to a report and specify the default sort column and sort order for the grid. It also allows you to call an API on any additional column if further processing needs to be done. Want to have a grid with a pagination feature? Want to have a grid which supports calling APIs? If yes, you can use Grid Power BI custom visual. App Source URL |
 Shows a graphical representation of a value against a threshold. Allows you to configure threshold values and render data per the threshold. Thermometer is a good way to represent data when you have the actual value and the target value (maximum threshold). App Source URL |
| Text Wrapper by MAQ Software | KPI Column by MAQ Software | KPI Grid by MAQ Software |
|---|---|---|
 Wraps a static text string (statement) along with a dynamic text field value. The dynamic field value updates according to the selected filter/slicer, keeping the static text intact. The user needs to provide the static string, which will be appended as ": <>" after the dynamic field value in the visual, resulting in the final value in the visual as: "<> : <>" App Source URL |
 Column chart where each column behaves as an indicator when compared with a line. Column color updates dynamically based on the difference in column height and respective target line value. Adding common threshold value exists for all columns. For upcoming values, the same target line can be used for forecasting and the column is displayed in a translucent color to indicate forecasted values. App Source URL |
 Display data in hierarchical order, with options to separate categories and illustrate trends. Effortlessly track productivity and performance. The grid displays key data in hierarchical order. Use arrows to illustrate KPI trends over time, such as year-to-year or quarter-to-quarter. You specify the time periods, making it easy to gauge performance according to internal deadlines and benchmarks. KPI Grid includes the option to place separators between certain columns. Using this feature, you can visually draw out categories that you would like to compare or emphasize. With KPI Grid's numerous formatting choices, you can customize your text, background, and units. Tailor the look and feel of your visual by updating rows' background colors or text size and color. Easily call attention to headers and totals by creating first and last rows that are visually distinct from the rest of the grid. App Source URL |
| Journey Chart by MAQ Software | Dynamic Tooltip by MAQ Software | Rotating Tile by MAQ Software |
|---|---|---|
 Transforms dense statistical data into clear networks of categories and relationships. Reveal connections in your data with a storytelling visual. In this intuitive graph, nodes represent categories and vertices represent relationships between categories. The bigger the node or vertex, the larger the value. Journey Chart's customizable node colors make it easy for viewers to distinguish between categories. Users can also enable text labels and tooltips for each node to provide additional information, such as a category's title and value. The color and size of text labels are adjustable. The option to enable a legend gives you the opportunity to clarify complex graphs that describe many types of data and categories. You can use the visual for numerous scenarios, including: 1. Explaining a process' flow 2. Uncovering underlying patterns 3. Highlighting subcategories stemming from a single source 4. Showing the connectedness of key categories App Source URL |
 Increase your audience's understanding of your data by adding tooltips to your visuals. Most tooltips display static information or images. With this visual, you can display data fetched from a separate source. This allows you to create a tooltip that does not require constant adjustment. When your data changes, the tooltip changes too. Dynamic Tooltip also works well with static statements. If you would like to add some helpful information for your audience, simply enter your text into the display field. The decimal points, type of display units, and the tooltip's icon image are all customizable. App Source URL |
 Automatically flipping tile with a set frequency that can be used to display different KPIs. Useful when multiple KPIs or metrics need to be displayed using minimal space on report. Each flip of the rotating tile can have a new value based on number of KPIs that needs to be displayed. Based on the space requirements of the report, the tile can be rotated either on horizontal axis or vertical axis. For better visibility and to ensure the end user can browse the tile data conveniently, a timer can be set for the flip delay. Additionally, Rotating Tile has an option to provide a 3D effect. Rotating Tile has size and color formatting options for label, title, text fonts, background, and borders. App Source URL |
| Rotating Chart by MAQ Software | Quadrant Chart by MAQ Software | Cylindrical Gauge by MAQ Software |
|---|---|---|
 Automatically flipping chart with a set frequency to display different KPIs with each flip. This horizontal bar chart rotates on the horizontal axis to showcase multiple KPIs with each flip or rotation. Rotating Chart is useful when multiple KPIs or metrics sliced by categories are to be displayed. It uses minimal space, thus saving room on the report or dashboard. Each flip can have a new value based on the number of KPIs that need to be displayed. For better visibility and to ensure the end user can browse the visual data conveniently, a timer can be set for the visual for the flip or rotation delay. Rotating Chart has size and color formatting options for label, title, text fonts, background, and borders. App Source URL |
 Represent data in separate quadrants to show distribution of data and items that share common traits. This visual is useful for plotting data that contains three measures using an X-axis, a Y-axis, and a bubble size that represents the value of the third measure. The formatting options below are provided for the visual: 1. Set color of each bubble. 2. Legends setting: on/off, position, title, color and text size. 3. Formatting option for quadrants and quadrant lines: four Quadrant names, X-Axis division line, Y-Axis division line and Dotted/solid. 4. Formatting option for X-Axis: title, title text, labels, display units and decimal points. 5. Formatting option for Y-Axis: title, title text, labels, display units and decimal points. App Source URL |
 Tracks current values against a target with an intuitive 3D cylinder visual. The cylindrical gauge's fill line gives users an easy way to understand how actual values weigh against a target capacity. The tool is useful for evaluating inventory, fuel, or other repository levels. Features: 1. Actual value display. For added clarity, the fill line's actual value is listed below the cylinder. 2. Tick marks. Users may adjust or disable this feature. By default, tick values are enabled, with the minimum set to 0 and the maximum set to 100. 3. Max threshold definition. Users may include a maximum threshold to see whether the actual value is over capacity. 4. Scroll bar. When height restrictions limit how much of the gauge is visible, a vertical scroll bar allows users to navigate up and down. App Source URL |
| Dot Plot by MAQ Software | Funnel with Source by MAQ Software | Histogram with points by MAQ Software |
|---|---|---|
 Displays distribution using dots across multiple categories. This statistical chart consists of data points (bubbles) plotted on an XY axis, distributed over a desired set of values. The size of the bubble represents magnitude; color represents the type of category. Dot Plot enables users to view data through multiple parent categories and child sub-categories. Dot Plot supports selection, partial highlighting, multi selection, legends, tooltips, displaying different color bubbles for different categories, and all other default formatting options available in Power BI. Users can modify bubble size, orientation of the chart, X-axis and Y-axis text, background and start the axis from a specified value. App Source URL |
 Funnel with Source, as the name suggests, showcases the funnel journey of any metric/ data point. The visual can help visualizing count of any metric of interest over various stages along with the source of entry or entry channel of the data point through which it reaches the funnel. For example, in the case of sales journey data, this visual displays the channel through which any lead enters the funnel and then the corresponding journey through the various stages of sales cycle. We can also filter data based on the selection of channel and on the selection of any stage of the sales journey. Cross visual filter is also supported by this visual. App Source URL |
 Combines benefits of showing point distribution along with actual values. The following formatting options are provided in this visual: 1. Show or hide points in the chart 2. Show or hide histogram bars 3. Show or hide X-axis 4. Show or hide Y-axis-right 5. Show or hide Y-axis-left (Y-axis of histogram) 6. Show or hide grid lines App Source URL |
| KPI Ticker by MAQ Software | Venn Diagram by MAQ Software | Box and Whisker by MAQ Software |
|---|---|---|
 Automatically flipping visual that allows you to view various metrics along with trend indicators. KPI Ticker allows you to configure a set of metrics that will be shown in rotation. It also allows you to specify trend indicators that show the percentage or value drop or increase. Suitable for applications that focus on key metrics and the metric value increase or decrease. Visually attractive with ability to change colors of tiles and trend indicators. App Source URL |
 Venn diagram displays all possible logical relations between a collection of datasets, each typically represented as a circle. Each circle (set) is a collection of objects or array of data that all have something in common. When multiple circles (sets) overlap, it is known as the intersection - this is where data that has all the qualities that the overlapping sets have. Each circle can have their distinguishing name and color to differentiate from other circle or sets. Labeling of each circle helps in knowing its individual or intersected region's value. The same information is also visible by hovering on any of the regions. App Source URL |
 Box and whisker charts are most commonly used in statistical analysis like comparing medical trial results or teachers' test scores et. al. It consists of two parts - the main body called the Box and the thin vertical lines coming out of the Box called Whiskers. The first quartile forms the bottom and the third quartile forms the top of the Box. The Whiskers connect the minimum and the maximum values to the Box. In addition to showing median, first and third quartile and maximum and minimum values, the Box and Whisker Chart is also used to depict Mean, Standard Deviation and Quartile Deviation. While other Power BI Box plots have the capability to display these statistics data, Box Plot by MAQ Software provides more details and clarity of the figures by providing more user controls and capabilities to suit the exact needs of the use case like ability to add parent axis and flip visual horizontally or vertically based on reporting requirement. App Source URL |
| Gantt Chart by MAQ Software | Slope Chart by MAQ Software | Dumbbell Chart by MAQ Software |
|---|---|---|
 Gantt Chart is used for scheduling and management of task. While an ordinary Gantt Chart just displays the basic details like task id or name and their schedules, Gantt Chart by MAQ Software provides more details of the task by providing a grid where one can view more data related to the task and can display the hierarchy of data category. Also, data can be sorted based on any data point of the task. For example, take case of project management, while other visuals will just provide project id/name, start time, end time and current status, this visual can provide additional details (data points) apart from the mentioned such as duration of project, owner of the project along with KPIs such as 'priority' etc. on a grid as separate columns inside the visual itself. Apart from additional information about the project, this visual let the user view project hierarchy (i.e.) tasks under any project and their progress. User can sort the project/task based on their data points as present on the grid column. The visual lets you configure the detailing of information as per requirement. Other formatting features can represent information in a way that best tells the story of your data. App Source URL |
 Slope Chart allows users to analyze trends in data at a glance. This visual is useful for comparing interactions between two data points based on time or other user-chosen parameters. Slope Chart places primary emphasis on end points by focusing on the difference between the start and end values. Key features include: 1. The ability to display trends across various indicators. 2. Quick comparison of indicator growth or loss across categories. 3. Easy interaction with many data points using the zoom functionality. 4. Quick downloading of an image of the chart with the capture image widget. R package dependencies (auto installed): plotly and ggplot2 App Source URL |
 Dumbbell Chart helps users analyze changes in critical data. This visual is an excellent choice for illustrating the change between two data points and comparing the distances between them. Dumbbell Chart gets its name thanks to its resemblance to a gym weight. The visual consists of a dual-axis combination chart, where one axis is marked by a circle and the other is marked by a line that spans data points provided by the user. Key features include: 1. The ability to display the performance of multiple indicators. 2. The ability to compare the growth or loss of indicators across various categories. 3. Easy interaction with many data points using the zoom functionality. 4. Quick downloading of an image of the chart with the capture image widget. R package dependencies (auto installed): plotly and ggplot2 App Source URL |
| Forecast using Neural Network by MAQ Software |
Clustering using OPTICS by MAQ Software |
Data Insights by MAQ Software |
|---|---|---|
 Forecast the future values based on the historical data by employing Neural Network algorithm for time series forecasting. Forecasting is useful for a variety of professions spread over numerous fields, be it budget, sales, demand or inventory. Better forecasts of future lead to better and more well-informed decisions. Forecasting using Neural Network implements an ‘Artificial Neural Network’ to learn from observed data over a time to predict the values of future. It employs a single layer feed forward network with lagged inputs to deal with time series values. Key features include: 1. Ability to use years or distinct numerical values in place of Date/Date&Time field. (The visual will work for both numerical series i.e. years/numbers and proper Date/Time values). 2. Ability of hover tooltips and highlighting a portion of the plot. 3. Capability to manually adjust the parameters of the learning model. R package dependencies (auto installed): Forecast, plotly, zoo, xts App Source URL |
 Analyse a given dataset based on OPTICS algorithm and identifies clusters in your data. The algorithm works on density based clustering, so you can also identify individual points that don’t belong to any of the groups. You can also perform hierarchical clustering on your data to identify more closely-knit groups within larger groups. This visual also allows you to adjust the clustering parameters to control hierarchy depth and cluster sizes. Key features include: 1. Ability to identify outliers based on convex hull plots. 2. Data is scaled and pre-processed automatically so no need to do so externally. 3. Add your own dataset for tooltips. 4. Ability to identify sub clusters/hierarchal clusters in your data. 5. Ability of hover tooltips and zoom effects. 6. Capability to manually adjust the parameters of the clustering model. 7. No need to define the number of clusters. R package dependencies (auto installed): Dbscan, plotly, ggplot2 App Source URL |
 Data Insights by MAQ Software allows users to view data in multiple formats and quickly narrow data results. Users can switch between horizontal bar, vertical bar, brick, or tabular formats. With Data Insights by MAQ Software, users can easily explore data, select specific data, and view selected data in the format that best fits individual business needs. Key features: 1. Display data in bar, brick, and tabular formats. 2. Custom text and background colors. 3. Tooltips with additional insights. Business applications: 1. Display multiple sales KPIs simultaneously. 2. Shift between multiple KPIs or reporting periods by changing the axis base. App Source URL |
Before you can get started you'll need to install the tools. This should only take a few seconds.
Before you can run (or install) the command line tools you must install NodeJS.
- NodeJS 4.0+ Required (5.0 recommended) - Download NodeJS
To install the command line tools simply run the following command
npm install -g powerbi-visuals-toolsTo confirm it was installed correctly you can run the command without any parameters which should display the help screen.
pbivizTo enable live preview visual assets need to be served on a trusted https server so before you can start you need to install an ssl certificate which will allow visual asssets to load in your web browser. This is a one time setup.
To view/test your visual in PowerBI you need to enable the development visual and then you can add it to any report.
Select the visual you want to run. Navigate to the root of visual project (the directory containing pbiviz.json). Simply run the following commands
#This will install modules listed in package.json
npm install
#This will install type definitions listed in typings.json
typings install
#To run the visual
pbiviz startThat's it you are good to go. You can see that the visual is running.
Copyright (c) 2018 Microsoft and MAQ Software
See the LICENSE file for license rights and limitations (MIT).