Change font size of title in Lineseries of Cartesian chart

[zafzal]

Is it possible to change the font size of the title of Lineseries? I have tried applying Cls and StyleSpec however, Cls is not a valid property of Lineseries apparently and stylespec does not work.

[fabricio.murta]

Hello @zafzal, and welcome to Ext.NET!

You posted in open discussions, so I am not sure which version of Ext.NET you need help with, so I will post a "generic" answer that might be useful to any version.

The Ext.chart.series.Line.title config ([var]LineSeries' Title config) is a string passed to the legend, and not used as a title for the chart's axis it is displayed at. So any styling in the line series is not going to govern its legend title; legend styling is pertinent to the legend config and that, in turn, will depend whether you are using a sprite legend or DOM legend;

In other words, as the title is not displayed in the line series itself, but in the legend, there's no point in it having its own styling, as usually a chart legend follows a single style for every title it gets.

This does not mean you can't "hack through" individual styling to titles in legends, though. If you add HTML codes and use HTML DOM Legend instead of Sprite Legend, you can then use ordinary CSS styling to wrap the title in a <span>, <div> or other HTML entity to do your own custom styling.

But I'd say the best approach would be to apply styles to the legend component itself by choosing which fits best your use case scenario (DOM or Sprite) and customizing it.

If you need more details or actual solutions you can let us know which version of Ext.NET you need help with (and we'd move this thread to the corresponding version's thread) and it'd probably be a good idea to provide a test case.

Hope this helps!

[zafzal]

Hi @fabricio.murta, thank you for your reply and apologies for not providing the full detailed context. The version is 4.0.0.0. I am using the HTML version of Ext.Net which is used as HTML tags (if that makes sense) not the Javascript ones. Also below is the code

<Series>
    <ext:LineSeries Title="ABC" XField="abc" YField="def" Colors="#b6eefa"> // change the font size of the title "ABC"
         <Marker>
            <ext:Sprite SpriteType="Square" Duration="200" Easing="BackOut" />
         </Marker>
        <HighlightConfig>
            <ext:Sprite Scaling="2" />
        </HighlightConfig>
                            
        <Tooltip runat="server" TrackMouse="true">
             <Renderer Handler="var title = context.series.getTitle(); toolTip.setHtml(title + ' for ' + record.get('def') + ': $' + record.get(context.series.getYField()) + 'k');" />
        </Tooltip>
     </ext:LineSeries>
     <ext:LineSeries Title="DEF" XField="abc" YField="def" Colors="#25c5e6" > // change the font size of the title "DEF"
         <Marker>
            <ext:Sprite SpriteType="Triangle" Duration="200" Easing="BackOut" />
         </Marker>
         <HighlightConfig>
            <ext:Sprite Scaling="2"/>
         </HighlightConfig>

         <Tooltip runat="server" TrackMouse="true">
            <Renderer Handler="var title = context.series.getTitle(); toolTip.setHtml(title + ' for ' + record.get('def') + ': $' + record.get(context.series.getYField()) + 'k');" />
        </Tooltip>
     </ext:LineSeries>
</Series>

Hope this gives you more insight to the context. Look forward to you reply.

Thanks

[fabricio.murta]

Hello @zafzal!

I have moved your thread to the 4.x help forums, to reflect Ext.NET version you're using.

We'd need a working test case to go further than we went with the first reply; I have nothing to add to what was already said with just the code snippet you provided.

You may want to derive your example from this one: Examples Explorer 4 - Charts - Line - Multiple Axes

In that sample, for instance, you can just switch to the DOM legend and wrap the title in a custom-styled <span/> tag.

So first, add a style block with the custom style in the <head/> section:

<style type="text/css">
    .newfont-title {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: large;
        font-weight: bold
    }
</style>

Then wrap the title in the ext:LineSeries block, Titles config (around line 146) with a span; from:

Titles="Blue Line"

to:

Titles="<span class=newfont-title>Blue Line</span>"

And of course, change the legend to use the DOM drawn one; around the bottom of the code (around line 176)

From:

<LegendConfig runat="server" Dock="Bottom" />

to:

<LegendDomConfig runat="server" Dock="Bottom" />

If you override the legend's style itself, you would apply that style to all (if more than one) titles, not just from that specific series.

Overriding styles in the sprite-based legend won't work with CSS; they are customizable via charts theming directly.

The version is 4.0.0.0.

You may notice the LegendDomConfig is not available for your version of Ext.NET; that's because it was introduced later, with Ext.NET 4.2.0; it is recommended to use the latest update of Ext.NET version to get the latest features it employs, I am afraid there's not much we can do about that as Ext.NET 4 went as far as 4.8.3. The steps above will probably not work unless Ext.NET is 4.2.0 or newer.

Hope this helps!

[zafzal]

Thanks for replying. I have applied your suggestion however, the line markers have become different in the series that those in the chart itself. Anyway i have solved that by matching the new ones to existing markers

Also, the legend is showing an extra border marked in red

.

Do you by chance how to get rid of that border? I have tried to apply the css classes to LegendDOMConfig using Cls in one of the other post but it doesn't seem to do anything.

 .x-legend-container {
    border: 0;
        }

  .x-docked-left.x-legend .x-legend-item,
  .x-docked-right.x-legend .x-legend-item,
  .x-docked-left.x-legend-panel .x-legend-item,
  .x-docked-right.x-legend-panel .x-legend-item {
    border-right: 0;
  }

Can I know where am I going wrong?

Thanks in advance

[zafzal]

Update - I have managed to remove the right border by adding an additional class however, right border is being removed from both the legend items. How do I get it to remove from just the first item please?

This is the styling I have used:

 .x-docked-bottom.x-legend .x-legend-item {
    border-right: 0;
  }

[zafzal]

Removed the right border of the 1st legend item by below code

.x-docked-bottom.x-legend .x-legend-item:nth-child(2n+1) {
    border-right: 0;
  }

Closing this issue as it has been resolved

Thanks for your help fabricio.murta

[fabricio.murta]

Hello again, @zafzal!

Seems you have solved the issues by yourself, hope the tips helped it out! Please bear in mind Ext.NET 4 is out of support so some things that won't work are simply already fixed in newer versions; this is not necessarily the case here, just to be clear.

And, well, that's a good advantage of the DOM legend, that it is possible to just walk the CSS hierarchy and override styles until they work as intended; the sprite legend would take a reasonably different path to customize, and it would be much "closer to the Ext JS code" than CSS overriding is; much steeper learning curve I'd say.

Thanks for sharing the solution that worked for you; although there weren't any actual test cases highlighting the actual scenario, the overrides you shared can serve as a base for other people trying to attain the same or similar effects with their Ext.NET page!