Styling chart in XAML

A forum dedicated to WPF version of LightningChart Ultimate.

Moderator: Arction_LasseP

Posts: 10
Joined: Tue Aug 01, 2017 2:33 pm

Styling chart in XAML

Post by wojtst » Tue Aug 01, 2017 2:54 pm

I am developing an application in WPF (mvvm) in which I use LightningChart. Unfortunately, built-in styles do not match the rest of the app. I wanted to use my own styles defined in ResourceDictionary but it is not working.

For example:

Code: Select all


    <SolidColorBrush x:Key="ThemeDarkBackgroundBrush" Color="#46494c" />
    <SolidColorBrush x:Key="ThemeLightBackgroundBrush" Color="#4c5c68" />

    <chart:Fill x:Key="ViewBackgroundStyle" Color="#4ddcdcdd" GradientFill="Solid" />

    <Style TargetType="{x:Type chart:ViewXY}">
        <Setter Property="GraphBackground" Value="{DynamicResource ViewBackgroundStyle}"/>

    <Style TargetType = "{x: Type chart: AxisTitle}">
        <Setter Property = "Color" Value = "Red" />
        <Setter Property = "Text" Value = "Red" />
    </ Style>

    <Style TargetType = "{x: Type chart: AxisXTitle}">
        <Setter Property = "Color" Value = "Red" />
    </ Style>

    <Style TargetType = "{x: Type chart: AxisX}">
        <Setter Property = "AxisColor" Value = "Red" />
    </ Style>

    <Style TargetType = "{x: Type ListView}">
        <Setter Property = "Background" Value = "{DynamicResource ThemeLightBackgroundBrush}" />
    </ Style>

    <Style TargetType = "{x: Type GridViewColumnHeader}">
        <Setter Property = "Background" Value = "{DynamicResource ThemeDarkBackgroundBrush}" />
    </ Style>
This styling works for all build in XAML controls, but unfortunately for the LightningChart not.

My YAxis collection is dynamic (binded to AxisYCollection) and I can not set each axis in XAML separately, but I dont want to set my styles in the View Model class .

Does anyone know if it is possible to use style in XAML without referring directly to objects in code-behind like:

Code: Select all

YAxis.MajorGrid.Color = new Color (35, 255, 255, 255);
Here is my chart definition of XAML

Code: Select all

<Lcusb: LightningChartUltimate
            Grid.Column = "1">

            <Lcusb: LightningChartUltimate.ViewXY>
                <Lcusb: ViewXY PointLineSeries = "{Binding LineSeries}"
                              YAxes = "{Binding LineSeriesYAxes}"
                              XAxes = "{Binding LineSeriesXAxes}"
                              LegendBoxes = "{Binding LineSeriesSegmentsLegends}">

                    <Lcusb: ViewXY.ZoomPanOptions>
                        <Lcusb: ZoomPanOptions
                            RightToLeftZoomAction = "RectangleZoomIn"
                            MouseWheelZooming = "Horizontal"
                            PanDirection = "Horizontal"
                            AxisMouseWheelAction = "None"
                            LeftMouseButtonAction = "Zoom"
                            RectangleZoomDirection = "Horizontal"
                            RightMouseButtonAction = "Mr."
                            ShiftEnabled = "False"
                            AltEnabled = "False"
                            CtrlEnabled = "False" />
                    <Lcusb: ViewXY.AxisLayout>
                        <Lcusb: AxisLayout
                            YAxesLayout = "Segmented"
                            SegmentsGap = "30"
                            Segments = "{Binding LineSeriesSegments}">
                        </ Lcusb: AxisLayout>
                </ Lcusb: ViewXY>
        </ Lcusb: LightningChartUltimate>
Thanks in advance

User avatar
Posts: 38
Joined: Fri Feb 05, 2016 11:37 am
Location: Finland

Re: Styling chart in XAML

Post by ArctionNikolai » Wed Aug 02, 2017 12:02 pm


LightningChart, unfortunately, does not support the Styling for WPF. However, we consider to include that feature at some point.
You can try to create resources separately and make binding to them, for example:

- I have placed a chart in a Grid container.
- Created a resource for Data

Code: Select all

  <lcu:SeriesPointCollection x:Key="Points">
    <lcu:SeriesPoint X="10" Y="15"/>
    <lcu:SeriesPoint X="20" Y="25"/>
- Created a binding from StaticResource

Code: Select all

    <lcu:PointLineSeries Points="{Binding Mode=OneWay, Source={StaticResource Points}}"/>
I am sure, you can do in the same way with all the other properties.

Best regards,
Nikolai Arsenov
Software developer
Arction Ltd
Microkatu 1, 70210 Kuopio, Finland