MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

Design guide to a rightly visualized bar chart using KoolChart

Published on 13 February 15

Data is only as good as it is accurately represented, understandable and valuable to people who are engaged in its purposes, which is why choosing the right visualization in creating a chart is essential. If data is misrepresented or presented ineffectively in the chart, key insights and understanding are lost. This guide is for people who want to design the most common chart, bar chart, using KoolChart, and will help them choose the right presentation for data.

A bar chart is a chart with rectangular bars with lengths proportional to the values that they represent, and a vertical bar chart is sometimes called a column chart. Bar charts are the most common charts and very versatile. They are best used to show change over time, compare different categories, or compare parts of a whole, so that the functional features for the representation of chronological data is very important to the charting library. Koolchart has very powerful features to display the time-series axis for representing chronological data. The <DateTimeAxis> element tag is used to create the time-series axis on the vertical axis for the bar chart and on the horizontal axis for the column chart. The one thing you keep in mind when creating a column chart with chronological data is the time-series labels on the axis should always run left to right. KoolChartâs default rendering of the horizontal time-series axis is left to right in the column chart, and of the vertical time-series axis is bottom to top in the bar chart, but the rendering direction of the axis can be changed at the userâs convenience as well.

Design guide to a rightly visualized bar chart using KoolChart - Image 1

If you have long category labels, then the horizontal rectangular bars (bar chart) with left-aligned labels are the best. KoolChartâs features for label rendering are very flexible and straightforward to implement. The labels can be displayed inside or outside the bar, and the display location can be adjusted by the pixel-level using the labelPosition, insideLabelXOffset, insideLabelYOffset and labelAlign attributes. The stacked chart oriented either vertically or horizontally is good to represent the need to multipart-to-whole relationships, and the 100% stacked chart is useful when the total value of each category is unimportant and percentage distribution of subcategories is the primary message. KoolChart provides the easy way to convert a multiple series to a (100%) stacked chart. You just need to set the value of the type attribute to stacked or 100%.

Other practical tips to design a rightly visualized bar chart are first, you should start the Y-axis value at 0. Starting at the value above zero truncates the bars and doesnât accurately reflect the full value. Second, use horizontal labels. Steep vertical or diagonal labels can be difficult to read. The third space between the bars should be half of the bar width. Forth, using consistent colors is always good. Use one color for bar charts, and you may use an accent color to highlight a significant data point. Fifth, you should order data appropriately. Order categories alphabetically, sequentially, or by value.

This blog is listed under Development & Implementations and Data & Information Management Community

Post a Comment

Please notify me the replies via email.

  • We hope the conversations that take place on will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url