Skip to main content Skip to footer

Remove Axis Titles, Labels, and Styles in AngularJS

Background:

Wijmo FlexChart comes with several different content items in the base chart, from different axis to labels and colors for data objects. These content items can be removed to only display the data on the chart.

Steps to Complete:

This section should display a list of tasks that will need to be complete to implement the feature outlined in the article (if applicable).

1. Remove the plot margin and the border from the FlexChart

2. Set the major-units property to null to remove the cross bars of the chart

Getting Started

Remove the plot margin and the border from the FlexChart

First, we'll remove the plot margin and the border, which will remove the excess spacing and the border around the FlexChart control

<wj-flex-chart items-source="data" plot-margin=0 style="border:none">. . .</wj-flex-chart>

Set the major-units property to null to remove the cross bars of the chart

Next, we set the major-units property of the Y-axis to null. This will remove the crossbars that signify significant data values, leaving just the bars of the FlexChart remaining.

<wj-flex-chart-axis wj-property="axisY" major-unit=null title="Units"></wj-flex-chart-axis>

You can find a live sample of this project at this location: http://jsfiddle.net/JParksGC/40tdatbq/

Joel Parks