Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Chris Sworen
935
Data Chart increase font size of legend/axes?
posted

I am currently on IG/AG ~14.2.

I couldn't find a property in data charts (currently using stacked line & stacked area composite, and bar & line category charts) which allows for increasing the font size of the axis markers or the legend. Current illustrations are fairly large and don't paste well into reports (mostly PowerPoint).

Users would prefer to see a toggle of some sort which would allow them to properly scale the charts' font sizes to something more usable. I would appreciate an example of this. There are multiple examples in my previous posts, for reference.

  • 7535
    Offline posted

    Hello Chris,

    Thank you for contacting . You can set the style to the Axis like this :

    <igx-category-chart
    chartType="Line"
    xAxisLabelTopMargin="5"
    yAxisLabelRightMargin="5"
    xAxisLabelTextColor="gray"
    yAxisLabelTextColor="gray"
    xAxisLabelTextStyle="10pt 'Titillium Web'"
    yAxisLabelTextStyle="10pt 'Titillium Web'"
    xAxisLabelAngle="0"
    yAxisLabelAngle="0"
    yAxisLabelLocation="OutsideRight"
    titleTopMargin="10"
    topMargin="20"
    [dataSource]="countryRenewableElectricity"
    includedProperties="year, europe, china, america"
    [legend]="legend"
    isHorizontalZoomEnabled="false"
    isVerticalZoomEnabled="false"
    computedPlotAreaMarginMode="Series"
    name="chart"
    #chart>

    And to set the style to the legend you can do like this:

    <igx-data-legend
    includedColumns="Open, Close, High, Low, Change"
    valueFormatMode="Currency"
    valueTextColor="rgba(0, 173, 3, 1)"
    valueTextStyle="normal bold 14px Verdana"
    [target]="chart"
    unitsText="K"
    unitsTextColor="rgba(0, 173, 3, 1)"
    unitsTextStyle="normal bold 14px Verdana"
    labelTextColor="rgba(74, 74, 74, 1)"
    name="Legend"
    #legend>
    </igx-data-legend>

    You can also refer to this online help document.

    www.infragistics.com/.../chart-data-legend

    Let me know if you have any question.