Dan Pettersson
Top achievements
Rank 1
Rank 1
Dan Pettersson
asked on 26 Apr 2013, 07:57 AM
Hi,
I'm having some challenges with customizing the look of a column bar diagram;
This is the design from my art director:
Attached picture: wantedlook.png
This is my current design with the chart control:
Attached picture: currentlook.png
1. If I set Visible="false" on the YAxis like this:
The MajorGridLines turns into some light green color like this:
Attached picture: greenYlines.png
a. How can I control the color of the YAxis major grid lines while having the YAxis Visible="false"?
b. How can I control the color of the value labels on the YAxis (...should I need to have it visible)?
2. The column bars are defined like this:
a. How can I remove the gradient effect on the coloring of the column bars?
b. How can I remove the border on the column bars?
c. How can I remove the effect that makes the column bars go lighter when hovered?
d. How can I control the width of each column? (want them wider and less separated)
3. Column labels placement and coloring
a. Is there any way I could place the column text labels above the column and its' value, as in the wanted look?
b. How can I control the color of the column text and value labels? In the wanted design the text color is dark gray and the value labels are in the same color as the column itself.
c. Is there any way I could left align the column value label with the column, as in the wanted design?
Any input on these challenges are most welcome.
/Dan
I'm having some challenges with customizing the look of a column bar diagram;
This is the design from my art director:
Attached picture: wantedlook.png
This is my current design with the chart control:
Attached picture: currentlook.png
1. If I set Visible="false" on the YAxis like this:
<YAxis Color="#dddddd" Visible="false"> <MajorGridLines Color="#dddddd" /> <MinorGridLines Visible="false" /></YAxis>The MajorGridLines turns into some light green color like this:
Attached picture: greenYlines.png
a. How can I control the color of the YAxis major grid lines while having the YAxis Visible="false"?
b. How can I control the color of the value labels on the YAxis (...should I need to have it visible)?
2. The column bars are defined like this:
<Series> <telerik:ColumnSeries Stacked="false"> <Appearance> <FillStyle BackgroundColor="#d5a2bb"></FillStyle> </Appearance> <LabelsAppearance Position="OutsideEnd"> <TextStyle FontSize="16px" FontFamily="Verdana" /> </LabelsAppearance> <TooltipsAppearance Visible="false" BackgroundColor="White" DataFormatString="{0}" /> <Items> <telerik:SeriesItem BackgroundColor="#a4b9bd" YValue="7300" /> <telerik:SeriesItem BackgroundColor="#fed473" YValue="6900" /> <telerik:SeriesItem BackgroundColor="#d8e782" YValue="5836" /> </Items> </telerik:ColumnSeries></Series>a. How can I remove the gradient effect on the coloring of the column bars?
b. How can I remove the border on the column bars?
c. How can I remove the effect that makes the column bars go lighter when hovered?
d. How can I control the width of each column? (want them wider and less separated)
3. Column labels placement and coloring
a. Is there any way I could place the column text labels above the column and its' value, as in the wanted look?
b. How can I control the color of the column text and value labels? In the wanted design the text color is dark gray and the value labels are in the same color as the column itself.
c. Is there any way I could left align the column value label with the column, as in the wanted design?
Any input on these challenges are most welcome.
/Dan
1 Answer, 1 is accepted
0
Hello Dan,
Please find below my answers to your questions:
All the best,
Danail Vasilev
the Telerik team
Please find below my answers to your questions:
- Visible property set to false for the Axes - there is an issue with the serialization of elements in HtmlChart whose parents' visible property is set to false. Therefore when you set visible="false" for the YAxis the default settings for the YAxis and its child elements are used. The issue has already been logged as a PITS item here, so that you can monitor, comment and vote on it. For the time being you can leave the visibility of the YAxis to true and set its width property to 0.
- control the color of the MajorGridLines - the above approach will let you use the color property of the MajorGridLines element of the Axes.
- control the color of the value labels on the Axes - you can use the TextStyle property in order to change the Color, FontFamily and FontSize of the Axes labels. The property can be reached as an inner tag in the LabelsAppearance element of the particular Axis. The Axes must be visible but their width property can be set to 0, in order to workaround the mentioned issue above.
- Column/Bar Series appearance:
- remove the gradient effect on the coloring of the column bars - there is not such a property that controls the gradient in the RadHtmlChart. However such feature request has already been logged as a feedback item here, so that you can monitor, comment or vote on it.
- remove the border on the column bars - currently it is not possible to remove or control the border of the column bars. However, I have logged your idea in our feedback portal here, so that you can monitor and comment on it. If it gets enough votes and approval from our management you can expect it to be implemented in the future.
- remove the effect that makes the column bars go lighter when hovered - currently this functionality is not supported, however, I have logged your idea in our feedback portal here.
- control the width of each column or modify the space between them - the functionality is not supported. The width calculation of the Bar/Column Series as well as the spacing between them is based on the number of the Items in the Series. Therefore it would not be appropriate to control the width of a particular bar/column item. I have, however, logged the idea about the ability to control the spacing between the series here.
- Column labels placement and coloring:
- place the column text labels above the column and its' value - If the RadHtmlChart is databound to a datasource you can use the ClientTemplates functionality in order to populate data from different columns of the datasource as Series labels. More information on using client templates is available here and here. You cannot, however, put line breaks in the labels as they are essentially SVG elements and there is a limitation in SVG that does not let you put line breaks. More information on this regard is available here and here. The exception are the tooltips which render as HTML, so that you can put '<br/>' or other tags there.
- control the color of the column text and value labels - It is possible to control to color of the whole label only. This can be done through the TextStyle property which is exposed by the appearance tag of each series.
- left align the column value label with the column - The position property of the labels expose four values - Center, InsideBase, InsideEnd, OutsideEnd, so the desired alignment is not supported.
All the best,
Danail Vasilev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.