6.7 KiB
| layout | title | description | platform | control | documentation |
|---|---|---|---|---|---|
| post | Axes | axes | Typescript | PivotChart | ug |
Axes
Label format
Format numeric labels
By using the labelFormat property, you can format the numeric labels. Numeric values can be formatted with n (number with decimal points), c (currency), and p (percentage) commands.
{% highlight html %}
/// ///
$(function () { var sample = new ej.PivotChart($("#PivotChart1"), { primaryYAxis: { labelFormat: "c" }, }); });
{% endhighlight %}
Following table describes the result when applying some commonly used label formats on numeric values:
| Label Value | Label Format Property Value | Result | Description |
|---|---|---|---|
| 1000 | n1 | 1000.0 | The Number is rounded to 1 decimal place |
| 1000 | n2 | 1000.00 | The Number is rounded to 2 decimal place |
| 1000 | n3 | 1000.000 | The Number is rounded to 3 decimal place |
| 0.01 | p1 | 1.0% | The Number is converted to percentage with 1 decimal place |
| 0.01 | p2 | 1.00% | The Number is converted to percentage with 2 decimal place |
| 0.01 | p3 | 1.000% | The Number is converted to percentage with 3 decimal place |
| 1000 | c1 | $1,000.0 | The Currency symbol is appended to number and number is rounded to 1 decimal place |
| 1000 | c2 | $1,000.00 | The Currency symbol is appended to number and number is rounded to 2 decimal place |
Label format customization
By using the labelFormat property of primaryYAxis, you can add the category labels with prefix and/or suffix.
{% highlight html %}
/// ///
$(function () { var sample = new ej.PivotChart($("#PivotChart1"), { primaryYAxis: { labelFormat: "${value}K" }, }); });
{% endhighlight %}
Common axis features
Axis visibility
Axis visibility can be set by using the visible property of the respective axis.
N> By default, the value of visible property is true in the pivot chart.
{% highlight html %}
/// ///
$(function () { var sample = new ej.PivotChart($("#PivotChart1"), { primaryYAxis: { visible: false }, }); });
{% endhighlight %}
Label customization
By using the font property of the axis, you can customize the font family, color, opacity, size, and font-weight of labels.
{% highlight html %}
/// ///
$(function () { var sample = new ej.PivotChart($("#PivotChart1"), { primaryXAxis: { font: { size: "20px", color: "blue", fontWeight: "bold", fontFamily:"Segoe UI" } }, }); });
{% endhighlight %}
Label and tick positioning
Axis labels and ticks can be positioned inside or outside the chart area by using the axisLabelPosition and tickLinesPosition properties. The labels and ticks are positioned outside the chart area, by default.
{% highlight html %}
/// ///
$(function () { var sample = new ej.PivotChart($("#PivotChart1"), { primaryXAxis: { axislabelPosition: "inside", tickLinesPosition: "inside", }, }); });
{% endhighlight %}
Grid lines customization
By using the majorGridLines and minorGridLines properties of the axis, you can customize the width, color, visibility, and opacity of the grid lines.
N> By default, the minor grid lines are not visible in the pivot chart.
{% highlight html %}
/// ///
$(function () { var sample = new ej.PivotChart($("#PivotChart1"), { primaryXAxis: { majorGridLines: { width: 5, color: 'blue', visible:true }, minorGridLines: { width: 25, color: 'red', visible: true }, minorTicksPerInterval: 1 }, }); });
{% endhighlight %}
Tick line customization
By using the majorTickLines and minorTickLines properties of the axis, you can customize the width, color, visibility, size, and opacity of the tick lines.
N> By default, the minor tick lines are not visible in the pivot chart.
{% highlight html %}
/// ///
$(function () { var sample = new ej.PivotChart($("#PivotChart1"), { primaryXAxis: { majorTickLines: { width: 10, size: 15, color: 'blue', visible:true }, minorTickLines: { width: 15, size: 25, color: 'red', visible: true }, minorTicksPerInterval: 1 }, }); });
{% endhighlight %}
Inversing axis
The axis can be inversed by using the isInversed property of the axis.
N> By default, the isInversed property is false in the pivot chart.
{% highlight html %}
/// ///
$(function () { var sample = new ej.PivotChart($("#PivotChart1"), { primaryYAxis: { isInversed: true }, primaryXAxis: { isInversed: true }, }); });
{% endhighlight %}
Placing axes at opposite side
The opposedPosition property of chart axis can be used to place the axis at the opposite direction from its default position.
N> By default, the opposedPosition property is false in the pivot chart.
{% highlight html %}
/// ///
$(function () { var sample = new ej.PivotChart($("#PivotChart1"), { primaryYAxis: { opposedPosition: true }, primaryXAxis: { opposedPosition: true }, }); });
{% endhighlight %}
