Add, Style and Customize Axes

The chart control supports unlimited number of axes. They can be added and customized in several ways.

I. Axes in the Chart Components

Each ready-to-use chart component that uses the Cartesian coordinate system (line chart, bar chart) exposes two properties: xAxis and yAxis. You can use them to specify the basic settings of an axes:

JavaScript

lineChart.yAxis.minValue = 0;
lineChart.yAxis.maxValue = 24;
lineChart.yAxis.interval = 4;
lineChart.yAxis.title = "Years 2014 - 2016";

The Axis class exposes also numberFormat property, which you can use to specify how the labels will appear using the standard format strings.

In order to style an axis specified this way you must use the properties of the theme class:

JavaScript

lineChart.theme.axisLabelsFontSize = 14;
lineChart.theme.axisTitleFontSize = 14; 
lineChart.theme.axisLabelsBrush = new Drawing.Brush("#333333");
lineChart.theme.axisLabelsBrush = lineChart.theme.axisStroke = new Drawing.Brush("#333333");

 The Theme class exposes more than 10 properties that are about the axis: axisStrokeDashStyle, axisTitleBrush etc. - each one that starts with axis*.

II. Custom Axis

In case you are building your dashboard or plot that uses custom axes you must follow these simple steps:

1. Create the axis.

JavaScript

var commonAxis = new Charting.Axis();
commonAxis.minValue = 0;
commonAxis.interval = 0.5;
commonAxis.title = "Values";

2. Create an AxisRenderer.

JavaScript

var commonAxisRenderer1 = new Charting.XAxisRenderer(commonAxis);

The AxisRenderer class is the one where you find the styling options. Here is a XAxisRenderer that specifies the color of the axis, axis title and labels.

 

JavaScript

var commonAxisRenderer1 = new Charting.XAxisRenderer(commonAxis);
commonAxisRenderer1.gridColumn = 1;
commonAxisRenderer1.gridRow = 1;
commonAxisRenderer1.axisStroke = new Drawing.Brush("#737373");
commonAxisRenderer1.labelBrush = new Drawing.Brush("#737373");
commonAxisRenderer1.titleBrush = new Drawing.Brush("#737373");

 The AxisRenderer must be added to a layout panel, where it will be measured and arranged. For instance, a GridPanel:

JavaScript

// set up grid panel
var grid = new Components.GridPanel();
   grid.columns.add(new Components.GridColumn());
   for (var i = 0; i < 3; i++)
      grid.rows.add(new Components.GridRow());grid.children.add(commonAxisRenderer1);

3. Assign the axis (Optional).

You might want to designate the axis to be a particular axis in a plot:

JavaScript

var plot1 = new Charting.Plot2D();    
plot1.xAxis = commonAxis;

The plot then can be added to another element, for instance a grid.

 

JavaScript

plot1.gridColumn = 1;
plot1.gridRow = 0;
grid.children.add(plot1);

 
The custom axis we created is visible in this image: