Hide chart label but show header

Question

Is it possible in a chart to hide the label of Y axes and show only the Header of the axes?

I have a chart in which I created different row(ChartRowDefinition). For every row I add a NumericalAxis. For the axes I only need to set visible the Header and hide all the rest.

For better understand I want the labels in the red rectangle to hide. A plus would be if the Header label could be rotated and maybe changed in fontsize.

Yuvaraj Palanisamy · Accepted Answer

Hi Zulu,

We have analyzed the reported problem and we found that exported image with black is due to rotated axis header label rendering. Hence to resolve this, we have exported the SfChart parent to image directly as per the below code snippet.

CodeSnippet:

<Grid Grid.Row="0" x:Name="grid"

Padding="5"

Background="White">

<syncfusion:SfChart x:Name="sfChart"

Header="Line Chart">

. . .

</syncfusion:SfChart>

</Grid>

private async void Save()

{

var renderTargetBitmap = new RenderTargetBitmap();

await renderTargetBitmap.RenderAsync(grid);

var pixels = await renderTargetBitmap.GetPixelsAsync();

var fileSavePicker = new FileSavePicker();

fileSavePicker.FileTypeChoices.Add("BMP", new List<string>() { ".bmp" });

fileSavePicker.FileTypeChoices.Add("GIF", new List<string>() { ".gif" });

fileSavePicker.FileTypeChoices.Add("PNG", new List<string>() { ".png" });

fileSavePicker.FileTypeChoices.Add("JPG", new List<string>() { ".jpg" });

fileSavePicker.FileTypeChoices.Add("JPG-XR", new List<string>() { ".jxr" });

fileSavePicker.FileTypeChoices.Add("TIFF", new List<string>() { ".tiff" });

fileSavePicker.SuggestedFileName = SfChartResourceWrapper.FileName;

var file = await fileSavePicker.PickSaveFileAsync();

if (file != null)

{

Guid encoderId = GetBitmapEncoderId(file.FileType);

using (var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite))

{

var encoder = await BitmapEncoder.CreateAsync(encoderId, stream);

encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore, (uint)renderTargetBitmap.PixelWidth,

(uint)renderTargetBitmap.PixelHeight, 96, 96, pixels.ToArray());

await encoder.FlushAsync();

}

Exported Image:

Also, we have attached the sample for your reference. Please find the sample from the below link.

Sample: https://www.syncfusion.com/downloads/support/forum/171234/ze/ChartDemo1465972136

Please let us know if you have any concern.

Regards,

Yuvaraj.

Zulu · Answer

I managed hiding the part in the red rectangleby setting properties SmallTickLineSize="0", TickLineSize="0" and setting FontSize="0.01" for LabelStyle.

Now the only thing remaining is to rotate the Header label. I tried to look for an example but found nothing. Could someone help me to accomplish this task?

Gayathri Manickam · Answer

Hi Zulu, You can achieve this requirement “Axis header rotation” with the help of RotateTransform and RenderTransformOrigin as shown in the below code snippet. For more information about axis label and header customization, please refer below UG link. https://help.syncfusion.com/uwp/charts/axis#styling-header-and-labels Regards, Gayathri M

Zulu · Answer

Hi Gayathri,thank you for your help. I have now faced a new problem. The Chart I'm creating needs to be saved as a PNG via the Save() function.The problem is that the labels size is bigger than the space dedicated to the Header and the resulting image contains a black area, for the part of the label that spill. So my question is: is it possible to augment the size of the area dedicated to the header?Here an image for better undestand