All Ignite UI for Web Components charts include built-in capability to modify appearance of axis lines as well as frequency of major/minor gridlines and tickmarks that are rendered on the X-Axis and Y-Axis.
the following examples can be applied to IgcCategoryChartComponent as well as IgcFinancialChartComponent controls.
Axis major gridlines are long lines that extend horizontally along the Y-Axis or vertically along the X-Axis from locations of axis labels, and they render through the plot area of the chart. Axis minor gridlines are lines that render between axis major gridlines.
Axis tickmarks are displayed along all horizontal and vertical axes at each label at all major line positions of the Web Components chart.
Web Components Axis Gridlines Example
This example shows how configure the axis gridline to display major and minor gridlines at specified intervals:
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="options vertical"><igc-property-editor-paneldescription-type="CategoryChart"is-horizontal="true"is-wrapping-enabled="true"name="propertyEditorPanel1"id="propertyEditorPanel1"><igc-property-editor-property-descriptionproperty-path="XAxisStroke"name="XAxisStroke"id="XAxisStroke"label="X Axis Stroke"should-override-default-editor="true"value-type="EnumValue"drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"primitive-value="gray"></igc-property-editor-property-description><igc-property-editor-property-descriptionproperty-path="XAxisMajorStroke"name="XAxisMajorStroke"id="XAxisMajorStroke"label="X Axis Major Stroke"should-override-default-editor="true"value-type="EnumValue"drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"primitive-value="darkslategray"></igc-property-editor-property-description><igc-property-editor-property-descriptionproperty-path="YAxisStroke"name="YAxisStroke"id="YAxisStroke"label="Y Axis Stroke"should-override-default-editor="true"value-type="EnumValue"drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"primitive-value="gray"></igc-property-editor-property-description><igc-property-editor-property-descriptionproperty-path="YAxisMajorStroke"name="YAxisMajorStroke"id="YAxisMajorStroke"label="Y Axis Major Stroke"should-override-default-editor="true"value-type="EnumValue"drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"primitive-value="darkslategray"></igc-property-editor-property-description><igc-property-editor-property-descriptionproperty-path="YAxisMinorStroke"name="YAxisMinorStroke"id="YAxisMinorStroke"label="Y Axis Minor Stroke"should-override-default-editor="true"value-type="EnumValue"drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"primitive-value="gray"></igc-property-editor-property-description></igc-property-editor-panel></div><divclass="legend-title">
Renewable Electricity Generated
</div><divclass="legend"><igc-legendname="legend"id="legend"orientation="Horizontal"></igc-legend></div><divclass="container fill"><igc-category-chartname="chart"id="chart"computed-plot-area-margin-mode="Series"included-properties="year, europe, china, america"chart-type="Line"is-horizontal-zoom-enabled="false"is-vertical-zoom-enabled="false"x-axis-stroke="rgba(145, 145, 145, 1)"x-axis-stroke-thickness="2"x-axis-interval="1"x-axis-major-stroke="rgba(71, 71, 71, 1)"x-axis-major-stroke-thickness="0.5"y-axis-stroke="gray"y-axis-stroke-thickness="2"y-axis-interval="20"y-axis-major-stroke="darkslategray"y-axis-major-stroke-thickness="1"y-axis-minor-interval="5"y-axis-minor-stroke="gray"y-axis-minor-stroke-thickness="0.5"thickness="2"></igc-category-chart></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Web Components Axis Gridlines Properties
Setting the axis interval property specifies how often major gridlines and axis labels are rendered on an axis. Similarly, the axis minor interval property specifies how frequent minor gridlines are rendered on an axis.
In order to display minor gridlines that correspond to minor interval, you need to set xAxisMinorStroke and xAxisMinorStrokeThickness properties on the axis. This is because minor gridlines do not have a default color or thickness and they will not be displayed without first assigning them.
You can customize how the gridlines are displayed in your Web Components chart by setting the following properties:
These properties set the thickness in pixels of an axis line.
Regarding the Major and Minor Interval in the table above, it is important to note that the major interval for axis labels will also be set by this value, displaying one label at the point on the axis associated with the interval. The minor interval gridlines are always rendered between the major gridlines, and as such, the minor interval properties should always be set to something much smaller (usually 2-5 times smaller) than the value of the major Interval properties.
On category axes, the intervals are represented as an index between first item and last category item. Generally, this value should equal to 10-20% of total numbers of category items for the major Interval so that all axis labels fit on axis so that they are not clipped by other axis labels. For minor intervals, this is represented as a fraction of the major interval properties. This value generally should equal between 0.25 and 0.5.
On numeric axes, the interval values are represented as a double between axis minimum value and axis maximum value. By default, numeric axes will automatically calculate and find a nice and round interval based on axis minimum values and maximum value.
On date time axes, this value is represented as time span between axis minimum value and axis maximum value.
The following example demonstrates how to customize the gridlines by setting the properties above:
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="options vertical"><igc-property-editor-paneldescription-type="CategoryChart"is-horizontal="true"is-wrapping-enabled="true"name="propertyEditorPanel1"id="propertyEditorPanel1"><igc-property-editor-property-descriptionproperty-path="XAxisStroke"name="XAxisStroke"id="XAxisStroke"label="X Axis Stroke"should-override-default-editor="true"value-type="EnumValue"drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"primitive-value="gray"></igc-property-editor-property-description><igc-property-editor-property-descriptionproperty-path="XAxisMajorStroke"name="XAxisMajorStroke"id="XAxisMajorStroke"label="X Axis Major Stroke"should-override-default-editor="true"value-type="EnumValue"drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"primitive-value="darkslategray"></igc-property-editor-property-description><igc-property-editor-property-descriptionproperty-path="YAxisStroke"name="YAxisStroke"id="YAxisStroke"label="Y Axis Stroke"should-override-default-editor="true"value-type="EnumValue"drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"primitive-value="gray"></igc-property-editor-property-description><igc-property-editor-property-descriptionproperty-path="YAxisMajorStroke"name="YAxisMajorStroke"id="YAxisMajorStroke"label="Y Axis Major Stroke"should-override-default-editor="true"value-type="EnumValue"drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"primitive-value="darkslategray"></igc-property-editor-property-description><igc-property-editor-property-descriptionproperty-path="YAxisMinorStroke"name="YAxisMinorStroke"id="YAxisMinorStroke"label="Y Axis Minor Stroke"should-override-default-editor="true"value-type="EnumValue"drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"primitive-value="gray"></igc-property-editor-property-description></igc-property-editor-panel></div><divclass="legend-title">
Renewable Electricity Generated
</div><divclass="legend"><igc-legendname="legend"id="legend"orientation="Horizontal"></igc-legend></div><divclass="container fill"><igc-category-chartname="chart"id="chart"computed-plot-area-margin-mode="Series"included-properties="year, europe, china, america"chart-type="Line"is-horizontal-zoom-enabled="false"is-vertical-zoom-enabled="false"x-axis-stroke="rgba(145, 145, 145, 1)"x-axis-stroke-thickness="2"x-axis-interval="1"x-axis-major-stroke="rgba(71, 71, 71, 1)"x-axis-major-stroke-thickness="0.5"y-axis-stroke="gray"y-axis-stroke-thickness="2"y-axis-interval="20"y-axis-major-stroke="darkslategray"y-axis-major-stroke-thickness="1"y-axis-minor-interval="5"y-axis-minor-stroke="gray"y-axis-minor-stroke-thickness="0.5"thickness="2"></igc-category-chart></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
The axes of the IgcDataChartComponent also have the ability to place a dash array on the major and minor gridlines by utilizing the majorStrokeDashArray and minorStrokeDashArray properties, respectively. The actual axis line can be dashed as well by setting the strokeDashArray property of the corresponding axis. These properties take an array of numbers that will describe the length of the dashes for the corresponding grid lines.
The following example demonstrates a IgcDataChartComponent with the above dash array properties set:
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="legend-title">
Renewable Electricity Generated
</div><divclass="legend"><igc-legendname="Legend"id="Legend"orientation="Horizontal"></igc-legend></div><divclass="container fill"><igc-data-chartname="chart"id="chart"computed-plot-area-margin-mode="Series"><igc-category-x-axisname="xAxis"id="xAxis"label="year"interval="1"major-stroke="rgba(71, 71, 71, 1)"major-stroke-thickness="0.5"stroke="rgba(145, 145, 145, 1)"stroke-thickness="2"stroke-dash-array="5, 5"major-stroke-dash-array="5, 5"tick-length="0"></igc-category-x-axis><igc-numeric-y-axisname="yAxis"id="yAxis"stroke="gray"stroke-thickness="2"interval="20"major-stroke="darkslategray"major-stroke-thickness="1"minor-interval="5"minor-stroke="gray"minor-stroke-thickness="0.5"stroke-dash-array="5, 5"major-stroke-dash-array="5, 5"minor-stroke-dash-array="2.5, 2.5"tick-length="0"></igc-numeric-y-axis><igc-line-seriesname="LineSeries1"id="LineSeries1"title="Europe"marker-type="Circle"value-member-path="europe"show-default-tooltip="true"></igc-line-series><igc-line-seriesname="LineSeries2"id="LineSeries2"title="China"marker-type="Circle"value-member-path="china"show-default-tooltip="true"></igc-line-series><igc-line-seriesname="LineSeries3"id="LineSeries3"title="America"marker-type="Circle"value-member-path="america"show-default-tooltip="true"></igc-line-series></igc-data-chart></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Web Components Axis Tickmarks Example
Axis tick marks are enabled by setting the xAxisTickLength and yAxisTickLength properties to a value greater than 0. These properties specifies the length of the line segments forming the tick marks.
Tick marks are always extend from the axis line and point to the direction of the labels. Labels are offset by the value of the length of tickmarks to avoid overlapping. For example, with the yAxisTickLength property is set to 5, axis labels will be shifted left by that amount.
The following example demonstrates how to customize the tickmarks by setting the properties above: