currently im trying to style a tooltip which appears when you hover over an map image with dynamic content (title of the company).
My aim is to style the background to a specific color, give the font a color and also apply a CSS property "box-shadow".
For the first aim I tried to use the "fill" property like so:
mapImageSeries is of type am4maps.MapImageSeries.
this.mapImageSeries.tooltip.fill = am4core.color('#ffff00');
Which does not work however using
this.mapImageSeries.tooltip.background.cornerRadius = 0; // will change the "border-radius" of the tooltip.
this.mapImageSeries.tooltip.background.fill = am4core.color('#ffff00'); // does also not work.
For my second goal setting up a color property for the font I didn't find a property, same with the box-shadow css property.
Is it possible to attach a css class for the tooltip so I can easily style it via CSS? And how do I style the tooltip with the
requirements im facing?
By default, tooltips pull colors from their relevant object, so to manipulate their styles you'll first have to turn that off, e.g.:
this.mapImageSeries.tooltip.getFillFromObject = false;
You can then do:
this.mapImageSeries.tooltip.background.cornerRadius = 0;
this.mapImageSeries.tooltip.background.fill = am4core.color("#ffff00");
Instead of modifying CSS box-shadow, you can apply the DropShadow SVG filter. Tooltips have a single filter, actually a DropShadow filter out the box, which we can modify:
var dropShadow = this.mapImageSeries.tooltip.filters.getIndex(0);
dropShadow.dx = 3;
dropShadow.dy = 3;
dropShadow.blur = 5;
dropShadow.opacity = 0.7;
To modify Tooltip text styles, they actually have their own Label child via their label property. There are two ways you can modify color, first is like the method above, e.g. if you want to set a default color for tooltip text:
this.mapImageSeries.tooltip.label.fill = am4core.color("#e97f02"); // color from lolcolors: https://www.webdesignrankings.com/resources/lolcolors/#palette_18
Another way to color the text, as well as apply other CSS styles, is to use Visual formatting in your tooltipText string, e.g.:
this.mapImageSeries.tooltipText = "[font-size: 20px; #bd1550]{companyTitle}:[/]\n{locationTitle} branch";
One style that won't work via visual formatting is text-align, you'll need to do that through via SVG properties, e.g.
this.mapImageSeries.tooltip.label.textAlign = "middle";
I've made a demo for you here:
https://codepen.io/team/amcharts/pen/f6d4167ea7ccd5dd47054d2430443c0a/
Hope this helps, let me know if it's all making sense.
If you're still looking to use literally CSS for your own needs, let me know and I'll try to sort that out with you.
Related
Can't figure out how I change the text colour of tooltips. For my column chart I tried:
series.tooltip.label.fill = am4core.color("#FFFFFF");
But it doesnt work. Curious also how I do it for the pie charts? Is there one place that I can update to affect all chart types, or do each need to be handled independently?
The tooltip label gets a calculated color that contrasts with the tooltip background. You need to set autoTextColor to false in order to the fill color to take effect.
series.tooltip.autoTextColor = false;
series.tooltip.label.fill = am4core.color("#FFFFFF");
The same is valid for pie charts.
You can create your own theme but that could be more than what you need.
You can use more than one theme, which allows you to use one default theme and then override just what you need:
am4core.useTheme(am4themes_animated);
am4core.useTheme(function customTheme (object) {
// Identify the instances
if (object instanceof am4core.Tooltip && object.label) {
object.autoTextColor = false;
object.label.fill = am4core.color("#FFFFFF");
}
});
After a lengthy search, I got the Below Line of code as successful line
pieSeries.labels.template.fill = am4core.color("white");
I have added above line of code if you are using axis range you can use that however as I can see your problem please take a look below line of code will solve your problem
series.tooltip.getFillFromObject = false;
series.tooltip.label.propertyFields.fill = "color";
series.tooltip.background.propertyFields.stroke = "color";
https://www.amcharts.com/docs/v4/concepts/tooltips/
I'm trying to convert some html like a span element and set its font and size
I need to put this paragraph on top of a text area defined in a pdf form.
This is what i do
//define style
PdfFont fontRegular = FindFontInForm(pdf, new PdfName("OpenSans"));
Style regular = new Style();
regular.SetFont(fontRegular).SetFontSize(9);
//convert html IList<IElement> lst = HtmlConverter.ConvertToElements(val);
Paragraph p = (Paragraph)lst[0]; p.AddStyle(regular);
//size of field, need to put html paragraph on top of it
PdfArray position = toSet.GetWidgets()[0].GetRectangle();
float width = (float)(position.GetAsNumber(2).GetValue() - position.GetAsNumber(0).GetValue());
float height = (float)(position.GetAsNumber(3).GetValue() - position.GetAsNumber(1).GetValue());
Rectangle rect = new Rectangle((float)position.GetAsNumber(0).GetValue(), (float)position.GetAsNumber(1).GetValue(), width, height);
//canvas to add paragraph
Canvas canvasField = new Canvas(canvas, pdf, rect);
canvasField.Add(p);
canvas.Rectangle(rect);
But the font is not applied.
Also Could it be possible to set the font and size in the style of a span html element?
Probabbly it is to late but in any case let me tell you how i fixed this.
Basically you are missing following in order to apply the font
FontProvider provider = new FontProvider();
provider.AddFont([your font]);
ConverterProperties properties = new ConverterProperties();
properties.SetFontProvider(provider);
and then use this:
HtmlConverter.ConvertToElements(stringToConvert, properties);
this way i managed to apply my font to converted html element (paragraph)
I would avoid constructions like this:
PdfFont fontRegular = FindFontInForm(pdf, new PdfName("OpenSans"));
Style regular = new Style();
regular.SetFont(fontRegular).SetFontSize(9);
//convert html IList<IElement> lst = HtmlConverter.ConvertToElements(val);
Paragraph p = (Paragraph)lst[0]; p.AddStyle(regular);
This is counter-intuitive when converting HTML to PDF.
Instead, I would work with CSS to define the font and the size and the style of a span element. With iText 7, you can now even define different MediaQueries. For instance: if you want the HTML to use one specific set of styles when shown in an HTML browser, but you want to use another set of styles when converting the HTML to PDF, you could work with a print.css file.
All of this is explained in the HTML to PDF tutorial.
In chapter 2, you learn how to define styles using CSS. Take a look at this example:
You see that the text "Read more about this movie" has a smaller font-size. and that "IMDB" has a different font color.
That's because the HTML was defined this way:
<div class="imdb">Read more about this movie on
IMDB</div>
And the CSS was defined this way:
.imdb {
font-size: 0.8em;
}
a {
color: green;
}
As you can see, the <div> has a class attribute imdb which is defined in the CSS to have a smaller font size. The CSS for the <a>-tag defines that the text color should be green.
All of this is standard HTML and CSS functionality. There's nothing iText-specific here. Whatever is shown in the browser is also shown on the PDF in this case.
The iText code is as simple as this:
HtmlConverter.convertToPdf(new File(src), new File(dest));
Why would you make things complex if it can be as easy as this?
Chapter 3 explains what to do if you want to create a difference between what's rendered on the screen and what's rendered on the PDF. We use the print.css to achieve this (the PDF will mimic what happens when you print the HTML file).
In your HTML, you might have something like this:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/sxsw.css"/>
<link rel="stylesheet" media="print only" href="css/sxsw_print.css">
</head>
The sxsw.css is the CSS that will be used when showing the HTML in a browser; the print.css will be used when printing the HTML from the browser. Again there's nothing specific to iText in this HTML. This is common functionality known to any HTML developer.
With iText, the sxsw.css will be used if you only use the single line mentioned before. If you want to use the print.css instead, you have to change the ConvertorProperties:
ConverterProperties properties = new ConverterProperties();
properties.setBaseUri(baseUri);
MediaDeviceDescription mediaDeviceDescription =
new MediaDeviceDescription(MediaType.PRINT);
properties.setMediaDeviceDescription(mediaDeviceDescription);
HtmlConverter.convertToPdf(
new FileInputStream(src), new FileOutputStream(dest), properties);
Now, because we have changed the MediaDeviceDescription to MediaType.PRINT, the print.css styles will be used.
The code is only slightly different if you need the iText elements so that you can add them in a specific rectangle. That's explained in chapter 1:
List<IElement> elements =
HtmlConverter.convertToElements(new FileInputStream(src), properties);
You might ask yourself: Why can't I do it my way? Why shouldn't I define the font size, styles, etc... in my code?
The answer is simple: Your code will be hard to maintain! If your employer asks you to apply a change, you will have to change your code, compile it, etc...
If you do it the way it's described in the official tutorial, it's easy: you don't have to change your code; you only have to change the CSS. That's much easier!
I have drawn some ink strokes on an InkCanvas and am now wanting to change the pen colour. I can change the colour of any additional strokes I draw using CopyDefaultDrawingAttributes and UpdateDefaultDrawingAttributes and that works fine. But how do I alter the color of the strokes that are already present StrokeContainer? I've tried:
foreach (InkStroke stroke in inkCanvas.InkPresenter.StrokeContainer.GetStrokes())
{
stroke.DrawingAttributes.Color = strokeColour;
};
This code executes with no exceptions, but stroke.DrawingAttributes.Color still shows the previous colour.
Any ideas?
Thanks...
Robert
You cannot set the DrawingAttributes property of the stroke directly. You must create a copy of the InkDrawingAttributes of the stroke, set the desired values for that InkDrawingAttributes object, and then assign the new InkDrawingAttributes to the DrawingAttributes of the stroke.
So you can code for example like this:
foreach (InkStroke stroke in inkCanvas.InkPresenter.StrokeContainer.GetStrokes())
{
//stroke.DrawingAttributes.Color = Windows.UI.Colors.Yellow;
InkDrawingAttributes drawingAttributes = new InkDrawingAttributes();
drawingAttributes.Color = Windows.UI.Colors.Yellow;
stroke.DrawingAttributes = drawingAttributes;
}
For more information, you can refer to InkStroke.DrawingAttributes | drawingAttributes property.
How can I change the color or the transparency of the popup's overlay? I want to have another color and alpha 1.
http://mprami.wordpress.com/2008/04/22/alert_popup_modal_transparancy_color_blur_changes/
In flex ‘’ tag has mainly four attributes related to modal properties of pop-ups.
modalTransparency
modalTransparencyBlur
modalTransparencyColor
modalTransparencyDuration
In spark it looks like these were renamed slightly:
modal-transparency
modal-transparency-color
modal-transparency-duration
modal-transparency-blur (guessing on this one)
To extend on artjumble's answer, if you're using a css file, you can also declare it like that in the css file:
global {
modalTransparencyBlur: 0;
modalTransparency: 0.3;
modalTransparencyColor: black;
modalTransparencyDuration: 500;
}
So, tired of always seeing the bright orange default regular polygons, I'm trying to learn to style OpenLayers.
I've had some success with:
var layer_style = OpenLayers.Util.extend({},OpenLayers.Feature.Vector.style['default']);
layer_style.fillColor = "#000000";
layer_style.strokeColor = "#000000";
polygonLayer = new OpenLayers.Layer.Vector("PolygonLayer");
polygonLayer.style = layer_style;
But sine I am drawing my polygons with DrawFeature, my style only takes effect once I've finished drawing, and seeing it snap from bright orange to grey is sort of disconcerting. So, I learned about temporary styles, and tried:
var layer_style = new OpenLayers.Style({"default": {fillColor: "#000000"}, "temporary": {fillColor: "#000000"}})
polygonLayer = new OpenLayers.Layer.Vector("PolygonLayer");
polygonLayer.style = layer_style;
This got me a still orange square--until I stopped drawing, when it snapped into completely opaque black. I figured maybe I had to explicitly set the fillOpacity...no dice. Even when I changed both fill colors to be pink and blue, respectively, I still saw only orange and opaque black.
I've tried messing with StyleMaps, since I read that if you only add one style to a style map, it uses the default one for everything, including the temporary style.
var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
var style_map = new OpenLayers.StyleMap(layer_style);
polygonLayer = new OpenLayers.Layer.Vector("PolygonLayer");
polygonLayer.style = style_map;
That got me the black opaque square, too. (Even though that layer style works when not given to a map). Passing the map to the layer itself like so:
polygonLayer = new OpenLayers.Layer.Vector("PolygonLayer", style_map);
Didn't get me anything at all. Orange all the way, even after drawn.
polygonLayer = new OpenLayers.Layer.Vector("PolygonLayer", {styleMap: style_map});
Is a lot more succesful: Orange while drawing, translucent black with black outline when drawn. Just like when I didn't use a map. Problem is, still no temporary...
So, I tried initializing my map this way:
var style_map = new OpenLayers.StyleMap({"default": layer_style, "temporary": layer_style});
No opaque square, but no dice for the temporary, either... Still orange snapping to black transparent. Even if I make a new Style (layer_style2), and set temporary to that, still no luck. And no luck with setting "select" style, either.
What am I doing wrong? Temporary IS for styling things that are currently being sketched, correct? Is there some other way specific to the drawFeature Controller?
Edit: setting extendDefault to be true doesn't seem to help, either...
var style_map = new OpenLayers.StyleMap({"default": layer_style, "temporary": layer_style}, {"extendDefault": "true"});
I've found two solutions for this problem. In both solution, you have to change some parameters of DrawFeature to get the functionality you wish.
1.Change handler style of the DrawFeature. Function drawFeature in OpenLayers.Handler.Polygon uses parameter style of the handler for the feature. So you have to change this style.
When creating Feature use:
var drawPolygon = new OpenLayers.Control.DrawFeature(polygonLayer, OpenLayers.Handler.Polygon, {handlerOptions:{style:myStyle}});
Later, you can change it by:
drawPolygon.handler.style = myStyle;
2.Change create callback of the DrawFeature. Change style of the newly created temporary feature in create callback.
var drawPolygon = new OpenLayers.Control.DrawFeature(polygonLayer, OpenLayers.Handler.Polygon, {
callbacks:{create: function(vertex, feature) {
feature.style = myStyle;
this.layer.events.triggerEvent("sketchstarted", {vertex:vertex,feature:feature})
}}});
Similarly, you can change the callback later.
If you want all vectors to be of a constant style, but not the boring orange then try this:
vecLayer = new OpenLayers.Layer.Vector(
"Route Layer", //layer name
{styleMap: new OpenLayers.StyleMap({
pointRadius: "6",
fillColor: "#666666"
}),
renderers:renderer}
);
You have loads of properties you can mess about with, have a look at these pages:
dev.openlayers (check the Constants section)
docs.openlayers (more useful info)