| (window.webpackJsonp=window.webpackJsonp||[]).push([[39],{333:function(e,t,n){"use strict";n.r(t),t.default='Bi-directional bar charts are mostly used to show values that included in two opposite meaning categories. One axis shows the name of categories being compared, while the other axis represents the scale value. As an example, Using a bi-directional bar chart to analyze the personal income (positive number) and outcome (negative number) in a week, you can easily find the value and fluctuation of income and outcome in a single series.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f">\n</iframe>\n\nThe bi-directional bar can be classified into the vertical chart (above) and horizontal chart(below, also called positive negative bar chart). For example, you can use a positive negative bar chart if there are positive and negative comments in a customer satisfaction survey data analysis. All data align in the middle, the positive comments attribute on the right side while the negative comments on the left side.\n\n<iframe max-width="830" width="100%" height="400"\n src="https://gallery.echartsjs.com/view-lite.html?cid=xHJ1un374z">\n</iframe>\n\n## Suggestion for Using Bi-directional Bar Chart\n\n1. The data on both sides in the bi-directional bar chart are comparative.\n\n2. Don\'t define negative data on the right side of the bi-directional bar chart, to prevent misunderstanding caused by the violation of common sense.\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/bar/bi-directional-bar01.jpg">\n</img>\n\n3. A bi-directional bar chart always used to display data with the opposite meaning, so that you need to avoid misunderstanding caused by the use of data that does not have a positive or negative meaning. As the chart below, there is no antagonism between the data of male and female, so that it is a better choice to use a basic bar chart rather than a bi-directional bar chart.\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/bar/bi-directional-bar02.jpg">\n</img>\n'}}]); |