Current filter:
                                You should refresh the page.
                                Support Center
                                  • Hi DevExpress,

                                    I have to create a chart looking like the example in the attached screenshot. You can see the underlying data from the table in the screenshot, too.

                                    How would I best create such a chart from the given data?

                                    My argument values are of type qualitative. I need to draw a step for each value in the "Values step" column of the data source. Also I need to draw a column for each value in the "Values bar" column of the data source. There are the following rules:
                                    - each bar has to be exactly as wide as the corresponding step
                                    - the position (in relation to the x axis) of bar and corresponding step has to be the same
                                    - Each bar shows the difference between the both values. The color depends on which value is bigger.

                                    Do you have any idea? I tried combining two series of type SideBySideRangeBar and StepLine. But I had two major problems:
                                    - the distance between the bars is too big (should be 0)
                                    - the step and the corresponding bar are always overlapping concerning their x position

                                    Thanks and regards,

                                1 Solution

                                Creation Date Rating Importance Sort by

                                You can link your Bar series to a secondary axis X. And use its Range.MinValueInternal property to shift points. Use the BarWidth property to specify the bar width as a fraction of axis units (the distance between two major axis tickmarks).
                                Attached is a small sample project that demonstrates how to accomplish this.

                                • Simone Frank 01.04.2013

                                  Hi Valdemar,

                                  seems to work. Thanks a lot.


                                • Feel free to contact us if you have questions regarding the use of our controls. We will do our best to find an appropriate solution.

                                • Simone Frank 01.07.2013

                                  Hi again,

                                  just one question popping up when having a closer look to the chart: what can I do to make a step line visible even for the last data point? In your example you see that there are 8 data points but only 7 step lines / bars. If I change the internal max value of the axes, the missing bar will become visible. But there is no eight step line. Is there a way or do I have to create an additional data point with the same value to overcome this issue?

                                  Thanks and regards,

                                • Hi Simone,

                                  That's right: you will need to update the Series.Point collection associated with the Step Line Series and add extra points there.

                                If you need additional product information, write to us at or call us at +1 (818) 844-3383

                                FOLLOW US

                                DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

                                Copyright © 1998-2017 Developer Express Inc.
                                All trademarks or registered trademarks are property of their respective owners