All Ignite UI for Angular charts include options to configure many axis layout options such as location as well as having the ability to share axis between series or have multiple axes in the same chart. These features are demonstrated in the examples given below.
the following examples can be applied to IgxCategoryChartComponent as well as IgxFinancialChartComponent controls.
Render millions of data points and build your visualizations with 60+ real-time Angular charts. This is the most extensive chart library for any application scenario.
For all axes, you can specify axis location in relationship to chart plot area. The xAxisLabelLocation property of the Angular charts, allows you to position x-axis line and its labels on above or below plot area. Similarly, you can use the yAxisLabelLocation property to position y-axis on left side or right side of plot area.
The following example depicts the amount of renewable electricity produced since 2009, represented by a Line Chart. There is a drop-down that lets you configure the yAxisLabelLocation so that you can visualize what the axes look like when the labels are placed on the left or right side on the inside or outside of the chart's plot area.
/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/scss
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
Axis Advanced Scenarios
For more advanced axis layout scenarios, you can use Angular Data Chart to share axis, add multiple y-axis and/or x-axis in the same plot area, or even cross axes at specific values. The following examples show how to use these features of the IgxDataChartComponent.
Axis Sharing Example
You can share and add multiple axes in the same plot area of the Angular IgxDataChartComponent. It a common scenario to use share IgxTimeXAxisComponent and add multiple IgxNumericYAxisComponent to plot many data sources that have wide range of values (e.g. stock prices and stock trade volumes).
The following example depicts a stock price and trade volume chart with a Stock Chart and a Column Chart plotted. In this case, the Y-Axis on the left is used by the Column Chart and the Y-Axis on the right is used by the Stock Chart, while the X-Axis is shared between the two.
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
import { Injectable } from"@angular/core";
@Injectable()
exportclassSampleFinancialData{
publicstatic create(): any[] {
// initial valueslet v = 10000;
let o = 500;
let h = o + (Math.random() * 5);
let l = o - (Math.random() * 5);
let c = l + (Math.random() * (h - l));
const items = 100;
const end = newDate(2020, 11, 1);
let time = this.addDays(end, -items);
const data: any[] = [];
for (let i = 0; i < items; i++) {
const date = time.toDateString();
// const date = this.getDate(time);// adding new data item
data.push({ Time: time, Date: date, Close: c, Open: o, High: h, Low: l, Volume: v });
// generating new valuesconst mod = Math.random() - 0.4;
o = o + (mod * 5 * 2);
v = v + (mod * 5 * 100);
h = o + (Math.random() * 5);
l = o - (Math.random() * 5);
c = l + (Math.random() * (h - l));
time = this.addDays(time, 1);
}
return data;
}
publicstatic addDays(dt: Date, days: number): Date {
returnnewDate(dt.getTime() + days * 24 * 60 * 60 * 1000);
}
publicstatic getDate(dt: Date): string {
return dt.getDay() + "/" + dt.getMonth() + "/" + dt.getFullYear();
}
}
ts
/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/scss
Axis Crossing Example
In addition to placing axes outside plot area, the Angular IgxDataChartComponent also provides options to position axes inside of plot area and make them cross at specific values. For example, you can create trigonometric chart by setting crossingAxis and crossingValue properties on both x-axis and y-axis to render axis lines and axis labels such that they are crossing at (0, 0) origin point.
The following example shows a Sin and Cos wave represented by a Scatter Spline Chart with the X and Y axes crossing each other at the (0, 0) origin point.
GitHub