Unlock Summer Savings | 20% off on Pro & 35% off on Enterprise Licenses →
FusionCharts
  • Products

    • FusionCharts Suite XT

    • FusionTime

    • FusionExport

    • FusionGrid

    • Yellowfin BI & Analytics

  • Developer

    • Dev Center (Docs)

    • Integrations

  • Important Links

    • Dashboards

    • Data Stories

    • Contact Sales

    • Pricing

    • Download

    • Support

    • Ask FusionDev AI

    • Blog

    Search ChartsNewAsk FusionDev AI
      • FusionCharts Suite XT
        • Overview
        • Charts and Maps gallery
          • Overview
          • FusionCharts XT
            • Column & Bar Charts
              • Overview
              • Simple column
              • Grouped column with multiple series
              • Grouped column with scrolling
              • Simple bar
              • Grouped bar with multiple series
              • Column in 3D
              • Grouped column in 3D with multiple series
              • Bar in 3D
              • Grouped bar in 3D with multiple series
              • Bar chart with custom labels as annotations
              • Overlapping Columns
              • Overlapping Bars
              • Grouped bar with scrolling
            • Line & Area Charts
              • Overview
              • Simple line
              • Line with multiple series
              • Line with zooming & panning
              • Line with scrolling only
              • Line with multiple axes & series
              • Simple area
              • Area with multiple series
              • Area with scrolling
              • Simple spline
              • Spline with multiple series
              • Simple spline-area
              • Spline-area with multiple series
              • Step-line
            • Pie & Donut Charts
              • Overview
              • Pie in 2D
              • Donut in 2D
              • Pie in 3D
              • Donut in 3D
              • Nested Pie in 2D
            • Stacked Charts
              • Overview
              • Stacked columns
              • Stacked columns with scrolling
              • 100% stacked columns
              • Grouped stacked columns
              • Stacked columns with negative values
              • Stacked columns in 3D
              • 100% stacked columns in 3D
              • Stacked bars
              • Stacked bars in 3D
              • Stacked area
              • Stacked bars with scrolling
              • Grouped stacked columns with scrolling
            • Combination Charts
              • Overview
              • Same axis - Column, line & area
              • Same axis - Column & line/area, with scrolling
              • Dual axis - Column & line/area, with scrolling
              • Dual axis - Line with zooming & panning
              • Same axis - Stacked columns & line
              • Same axis - Column & line, in 3D
              • Same axis - Column, line & area, in 3D
              • Same axis - Stacked columns & line, in 3D
              • Dual axis - Column, line & area
              • Dual axis - Stacked columns & line, in 3D
              • Dual axis - Grouped stacked columns & line
              • Dual axis - Column, line & area, in 3D
              • Dual axis - Grouped stacked columns with negative values & line
              • Dual Axis - Grouped stacked columns & line with scrolling
              • Dual axis - Stacked columns & line
              • Dual axis - Stacked area & line
              • Dual axis - Column, line & area, in 3D
            • Bubble & Scatter (XY) Charts
              • Overview
              • Simple bubble
              • Bubble with quadrants
              • Simple Scatter
              • Scatter with multiple series
              • Scatter with zooming support
              • Scatter with selection of points on canvas
            • Market Share Charts
              • Overview
              • Market share in actuals
              • Market share as %
            • Pareto Charts
              • Overview
              • Simple Pareto
              • Pareto with dual axis
              • Pareto in 3D
          • FusionWidgets XT
            • Gauges & KPIs
              • Overview
              • Rating Meter
              • Speedometer
              • Quarter gauge
              • Gauge with trend
              • Linear Scale
              • Linear Scale with colored categories
              • Cylinder fill
              • Horizontal LEDs
              • Vertical LEDs
              • Thermometer display
              • Bulb indicator
            • Gantt / Project Charts
              • Overview
              • Simple gantt
              • With progress indicators for each task
              • With task owner listed & multi-level dates
              • Grouped view of tasks
              • Showing planning vs actuals
              • Weekly task distribution
              • Hourly tasks
              • Milestone indicators
              • Showing dependent tasks
              • Machine operating schedule
            • Funnel & Pyramid Charts
              • Overview
              • Simple funnel
              • Funnel with % values
              • Funnel in 3D
              • Funnel to show part-to-whole
              • Simple pyramid
              • Pyramid with % values
              • Pyramid in 3D
            • Bullet & Spark (Micro) Charts
              • Overview
              • Horizontal Bullet Graph
              • Horizontal Bullet with dot
              • Vertical Bullet Graph
              • Simple sparkline
              • Sparkline with period indicators
              • Sparkline with dots only
              • Simple spark-columns
              • Spark-columns with period indicators
              • Win/loss micro charts
            • Self-updating (Real-time) charts
              • Overview
              • Line
              • Dual axis - Line
              • Area
              • Stacked Area
              • Column
              • Stacked Column
              • Speedometer
              • Cylinder fill
              • LED
              • Thermometer
              • Bulb
          • PowerCharts XT
            • Heat & Tree Maps
              • Overview
              • Heat map with numeric values
              • Heat map with percent data
              • Heat map using variants of single color
              • Heat map with additional labels per quadrant
              • Heat map with categorical values & numeric mapping
              • Heat map to show scores
              • Heat map to show ranking
              • Simple tree map
              • Tree map with breadcrumb
              • Tree map with squarified layout
              • Tree map with slice & dice layout - vertical slicing
              • Tree map with slice & dice layout - horizontal slicing
              • Tree map with slice & dice layout - alternate slicing
            • Radar (Spider Charts)
              • Overview
              • Simple radar
              • Radar with multiple series
            • Waterfall / Cascade Charts
              • Overview
              • Simple waterfall
              • Without cumulative sum
            • Visually Editable Charts (What-if analysis)
              • Overview
              • Editable column chart
              • Editable line chart
              • Editable area chart
              • Editable gauge
              • Editable linear scale
            • Graph visualization / Node diagrams
              • Overview
              • Simple graph layout
              • Station map chart
              • Network visualization
              • Sequence flow visualization
              • Add/remove nodes from chart
              • Org Chart Visualization
            • Statistical Charts
              • Overview
              • Simple box and whisker
              • Box and whisker with mean and outliers
              • Box and whisker with connected mean
              • Box and whisker with mean deviation
              • Scatter (XY) with error bars
              • Line with error bars
              • Column with error bars
              • Line with log axis
              • Column with log axis
              • Column with inverted axis
              • Area with inverted axis
              • Line with inverted axis
            • Stock Charts
              • Overview
              • Simple candlestick
              • Candlestick with price plotted as line
              • Candlestick without volume panel
              • Candlestick with custom trends
              • Candlestick with split/dividend markers
              • Kagi Chart
            • Sankey Diagram
              • Overview
              • Simple Sankey Diagram
              • Vertical Sankey
              • Sankey with No Nodes
            • Sunburst Charts
              • Overview
              • Simple Sunburst
              • Sunburst with multiple roots
            • Chord Diagram
              • Overview
              • Simple Chord
              • Simple Chord with Blend
              • Chord with Self-links
              • Chord with large number of nodes
          • FusionMaps XT
            • Examples
              • Sale of Cigarettes in Europe
              • Population growth world-wide
              • WeWork Office Locations
              • Shipping Routes in US
              • Average temperature of US States
              • Television exposure by DMA in US
              • Fertility rates in Europe
              • Greenhouse gas emissions (with drill-down)
            • Features
              • Setting custom labels
              • Drill-down from map to chart
              • Showing specific regions only
              • Custom tool-tips
              • Overlay icons on maps
              • Overlay icons with connector lines
            • All Maps (2,000+)
        • Feature Gallery
          • Overview
          • Data Plots
          • Chart Titles/Labels
          • Number Formatting
          • Legends
          • Tooltips
          • Trendlines
          • Axis and Gridlines
          • Drill Down
          • Export Charts
          • Zoom/Scroll/Pan
          • Chart Loading Config
          • Chart Branding
          • Events/API
          • Annotations
          • Space Management
        • Chart Guides
          • Line Chart
          • Area Chart
          • Bar Chart
          • Column Chart
        • Integrations
          • Overview
          • Front-end Integrations
            • React
            • Angular (for Angular 2 or above)
            • jQuery
            • Vue.js
            • Ember
            • AngularJS (for Angular 1.x)
            • React Native
            • Svelte
            • Flutter
            • Blazor
          • Back-end Integrations
            • ASP.NET
            • PHP
            • Java
            • Django
            • Ruby on Rails
        • Extensions
          • Accessibility
            • Overview
            • Usage Guide
      • FusionTime
        • Overview
        • Examples
          • Overview
          • Simple time-series
            • Line chart with time axis
            • Plotting multiple series on time axis
            • Column and line combination on time axis
            • Dual Y-Axis
            • Y-Axis on right side
            • Log axis with time-series
            • Log Axis with different base
            • Plotting missing data
            • Join missing data
            • Join missing data with styled line
          • Multivariate time-series
            • Plotting two variables (measures)
            • Different plot type for each variable (measure)
            • Y-Axis on right side of one of the canvas
            • Chart with variable canvas height
          • High volume data
            • Time series chart with a million data points
          • Standard chart types
            • Column chart with time axis
            • Stacked column chart with time axis
            • Grouped column chart
            • Area chart with time axis
            • Smooth area chart with time axis
            • Stacked area chart with time axis
            • Overlapping area chart with time axis
            • Customized area chart with time axis
            • Dashed line chart with time axis
            • Step line chart with time axis
            • Spline plot with time axis
            • Area Range Chart
            • Column Range Chart
          • Stock chart types
            • Interactive Candlestick chart
            • Interactive OHLC Chart
            • Interactive candlestick chart with y-axis on right
            • Stock chart with volume
            • Annotations on stock chart
            • Real-time OHLC chart
            • Real-time candlestick chart
          • Annotating data
            • Annotating single data point
            • Annotating multiple data points
            • Annotations on a multivariate chart
            • Annotations with pin type data marker
          • Event overlays
            • Single event overlay
            • Date range event overlay
            • Full line single event overlay
            • Full band date range event overlay
            • Single event overlay in multivariate
            • Date range event overlay in multivariate
          • Configurable features
            • Adding a reference line
            • Dashed reference line
            • Multiple reference lines on same chart
            • Reference line in multivariate chart
            • Adding a reference zone
            • Multiple reference zones on same chart
            • Reference zone in multivariate chart
            • Representing predictive data
            • Styled standard range selector
            • Styled custom range selector
            • Specify initial time interval
            • Time format on time axis
            • Time format in tooltip
            • Data binning on time axis
            • Maximum data bin on time axis
            • Minimum data bin on time axis
            • Enabling clipping of specific date
            • Enabling cyclic weekend clipping
            • Enable Auto-axis clipping when null data is present
            • See unformatted data values
            • Round off data values
            • Enabling grid bands
            • Disabling Legend
            • Initially hidden legend item
            • Customize Legend Position
            • Disabling time navigator
            • Specify time navigator height
            • Exportable time series charts
            • Customizing caption and sub-caption position
            • Weekly Data binning on time axis
          • Working with events & methods
            • Data plot hover mouse event
            • Data plot click mouse event ‎
            • Binning API methods
            • Selection change event on OHLC chart
            • Selection change event on stacked column chart
            • Export chart using API method
            • Update chart using API methods
            • Add data to chart in real-time
            • Update data in real-time
            • Self updating chart using Rest API
            • Change Plot Type
      • FusionExport
        • Overview
      • Showcase
        • Dashboards
          • Overview
          • Smart Energy Monitoring Dashboard
          • Sales Management Dashboard
          • SaaS Dashboard
          • Wealth Management Dashboard
          • Expense Dashboard of US Dept. of Veteran Affairs
          • Investment Portfolio Dashboard
          • Technology Dashboard
          • Pediatrics Center Dashboard
          • Marketing Dashboard
          • Web Series Dashboard
          • Manufacturing Quality Dashboard
          • Shipment Analysis Dashboard
          • Venture Financing Dashboard
          • Online Retail Dashboard
          • Sales Opportunity Dashboard
          • Google Analytics Web Dashboard
          • Smart Weather Dashboard
          • Real-time Twitter hashtag tracker
          • Sales Performance Dashboard (Mobile)
          • Sales & Collaboration Dashboard
          • Sales Performance Tracker (3D)
          • Realty Information Dashboard
          • Membership Monitoring Dashboard
          • Automotive Manufacturing Management Dashboard
          • Healthcare Expenditure Dashboard
          • Business Operation Monitoring Dashboard
          • Flight Planner
          • Music Player with Graphic Equalizer
          • Real-time Patient Monitoring Dashboard
          • Football League Dashboard
          • Product Ratings Dashboard
        • Data Stories
          • Overview
          • Gasoline Prices around the World
          • World’s Top Cities for People and Planet
          • Summers are Getting Hotter
          • Immigration to the US
          • How Trump Compares with Past Presidents
          • What is Really Warming the World
          • Unemployment Rate in the USA
          • How Americans Die
          • Clean Water Access around the World
          • Twelve Global Economic Indicators to Watch
          • Ratios of Inequity
          • Performance of Tech IPOs
          • Understanding the World Better
          • Jobs Gain & Loss
          • Popularity of Donald Trump
      • FusionGrid
        • Overview
        • Examples
          • Column Filter
          • Data Export
          • Row Selection
          • Column Grouping
          • Real-time Data update
          • Row Sorting
          • Search/Quick filter
          • Row Animation

      Specify Chart Titles/Labels

      Any form of text appearing on the chart canvas area adds more details to the data visualization. Text can be in the form of chart captions, subcaptions, axis titles, data values, and data labels.

      For quick reference on all the customizations, refer to the following list:

      • Captions and Subcaptions
      • Axis Titles
      • Labels
      • Data Values
      • Smart Label
      • Center Label
      • Label Placement
      • Readability
      • Inline HTML Tags
      • Auto Scaling

      Captions and Subcaptions

      A well-written caption makes a chart much easier to comprehend. For example - “Countries With Most Oil Reserves [2017-2018]” clearly depicts the data that is shown on the chart. The subcaption of the chart states the unit in which the measurements of oil reserves is shown.

      FusionCharts provides plenty of options to set captions and subcaptions, with smart space management.

      To know more about this feature, click here.

      Caption Alignment

      Using FusionCharts, you can choose to display the chart caption on the left or the right hand side of the chart canvas. This can come in handy for improving aesthetics of a chart.

      Let us suppose you are building a chart with data about oil reserves in different countries across the globe. Once you render the chart, you might see that the number of high value plots is concentrated on the left side of the chart. You can align the caption to the right side of the chart, so that it looks cleaner. You can provide two buttons below the chart; one to align the caption to the left, and the other to align it to the right. That way, the viewers can quickly alter the alignment after the chart is rendered.

      To know more about this feature, click here.

      Axis Titles

      The X and Y axes are among the essential elements of any chart. It is very important to properly name the axes in order to distinctly state the data which is plotted on each axis. In this example, we have displayed countries on the x-axis and the quantity of oil reserves on the y-axis.

      FusionCharts provides attributes to customize axis titles, including font, font size, color, transparency, and border properties. The following sample illustrates possible customizations of axis titles.

      To know more about this feature, click here.

      Labels

      Labels are integral to any chart. They showcase the relationship between the axes and the data plots. Labels are displayed along the x-axis of the chart. In this example, the x-axis labels are the name of the countries for which the oil reserves are shown.

      FusionCharts supports smart label management, which ensures that labels avoid overlapping and are displayed clearly, no matter how long or short they are.

      The smart label management options are:

      • Auto mode - The default “auto” mode automatically adjusts a particular data label and prevents overlapping of the labels. FusionCharts supports {br} tags within the label text, to put breakpoints at specific positions.
      • Pure Rotation - In case you are using long data labels, you can rotate them to prevent label texts from getting truncated, with ellipses at the end.
      • Rotate & Slant - If the visibility of label texts is not clear even after rotating the labels, you can slant them.
      • Stagger - Use this mode to distribute data labels on multiple levels (default is 2), to increase the inter-label space available on each level.

      To know more about the various modes, click here.

      Data Values

      The values, based on which the data plots are drawn, are known as data values. If you use text labels to display the data values, you can customize several properties of the data values, like font, font size, color, transparency, and border styles. To know more about the attributes, click here.

      Using Custom Strings

      Let’s imagine a situation, where you need to highlight one particular data plot using additional text. FusionCharts allows you to use custom text as strings in place of data values. For example - In this sample, Q4 has generated the highest revenue. So it is marked as “Year’s Best” using string instead of the value.

      To know more about this feature, click here.

      Direction of Values

      In case you are using long data values, you can rotate the data values vertically for better visibility.

      Value Placement Mode

      You can display data values either inside or outside the data plots, for a better look and feel, as per your preference.

      Overlapping Values

      Let’s take an example where you are trying to show two line plots with values very close to each other, resulting in overlapping of the data values. The chart will look like the first example given below (named Chart with overlapping values). FusionCharts allows you to overcome such situations by setting the position of each value for clear visibility. Check the difference in the same example after placing the data values properly in the second example given below (named Chart without overlapping values). Instantly, the chart is easier to read and understand.

      Chart with overlapping values

      Chart without overlapping values

      To know more about this feature, click here.

      Smart Label

      For specific charts like pie/doughnut, FusionCharts allows you to add smart labels and smart lines to specific charts like pie/doughnut. These are data connector lines that connect the pie/doughnut slices to their respective labels, avoiding overlapping. These labels and lines can be configured using a list of supported attributes.

      To know more about this feature, click here.

      Center Label

      For doughnut charts, you can display text in a label placed at the center, to summarize what the chart is showing. You can also set the label to update when the mouse pointer is hovered over any doughnut slice, showing the actual value of that particular slice.

      Let us suppose you are plotting the distribution of different versions of Android operating system among users in 2017, in a doughnut chart. You can display the chart title on a smart label placed at the center. Now, all you need to do is configure this label to display the data value for a section when you hover the mouse pointer over it.

      To know more about this feature, click here.

      Label Placement (Pie/Doughnut Charts)

      For pie and doughnut charts, you can display the data labels both inside or outside the chart. These labels show the category and the value of the particular slice. Also the readability can be improved by giving the label, a text outline as shown in the chart below.

      Let us suppose you are plotting the market share of different web servers, in a pie chart. You can display the labels along with their percentage values either inside the chart or outside. Also, you can notice a text outline on the labels when they are inside the chart for better readability.

      Readability

      For the better readability of the data labels, data values of the charts, you can include the text outline for the labels as per the requirement. Let us have a look at a stacked bar chart which shows the top finishers of the 2016-17 season with the respective values displayed on the data plots as well.

      Inline HTML Tags

      Text labels can be customized using direct inline HTML tags in your code. For example, you can use strikethrough, italic, hyperlink, custom abbreviations, del tags or any other html tag to display customized text.

      The example below shows the column “Coffee” with a abbreviated label “Coffee Crisp”, and a strikethrough of the x-axis label "100Grand".

      Auto Scaling

      Text labels can be auto-scaled for relative text sizes i.e . rem, em, %, vw. For example, you can set different font sizes for each label specifying the relative length unit.

      The example below demonstrates usage of relative text sizes in charts.

      Explore
      • Chart Gallery
      • Time-series Charts
      • Map Gallery
      • Data Stories
      • Dashboards
      • FusionExport
      • FusionGrid
      Integrations
      • Angular
      • Vue
      • React
      • jQuery
      • PHP
      • ASP.NET
      • Explore all Integrations
      Developers
      • Dev Center (Docs)
      • Integrations
      • Version History
      • Forum
      Pricing
      • Pricing and Plans
      • Locate a Reseller
      • Support And Upgrades for Older Licenses
      • Login to Product Update Center
      Resources
      • Whitepapers
      • Charting Best Practices
      • Chart Primers
      • Dashboard Primers
      • Developers
      • Blog
      Company
      • Customers
      • Partners
      • About Us
      • Contact Us
      • Careers
      • Legal
      • Privacy Policy
      © 2025 FusionCharts - An Idera, Inc. Company. All Rights Reserved.