Is it possible to style the Category axis labels as seen in the screenshot? Only basic text is allowed in the settings (no HTML) and using :before or :after selectors doesn't have any effect. Any ideas?
If you're using AmCharts 3, you can set the labelText property of a AmGraph to a string containing tags like [[value]], [[description]], [[percents]], [[open]], [[category]] and HTML tags. For example, you could use something like:
labelText: "<b>[[value]] BILLION</b><br>[[category]]"
To change color of a category, when config amcharts, you need to define some colors in "colors" array.
What else do you need in term of "style" ?
Related
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.
I want to have different tooltips in different columns on a kendo ui grid.
I am examine the example
http://dojo.telerik.com/#pfilipov/iGetO/2
but I can't find the way to do it.
Do you require Angular syntax as in example? - I don't speak Angular, but here is basic solution where I do not need to.
Dojo example
Also there is content function where you can catch and react according to attributes - in that case Title. So if you need calculate some equation (for example) you can create condition if(title == Tooltip1) and do what you need.
You can do like below:
$("#Kendo-grid-div-id").kendoTooltip({
filter: "td:nth-child(2),td:nth-child(3)", //comma separated multiple columns
position: "bottom", //possible values: bottom,top,left,right,center
content: function(e){
var content = e.target.html();
return content;
}
}).data("kendoTooltip");
This works for me!!!
I want to format the display of numeric values in an ASP.NET RadChart's tooltips. For example, instead of showing 100000, I want the text to read "1.0e5". For the axes, the property to set is as follows:
chart.InnerChart.PlotArea.YAxis.Appearance.CustomFormat = "0.##E+0";
There must be a similar property on the chartSeries to similarly format the tooltips, but so far I have failed to locate it. Does anyone know?
For each ChartSeriesItem in the chart, you can set the ToolTip in the following manner:
e.SeriesItem.ActiveRegion.Tooltip = string.Format("{0:0.###e+0}", value);
I'm not sure which RadChart you are using. Here is an excerpt of code for an ASP.Net MVC RadChart.
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0:0.##E+0}")
)
I want to setup jqgrig's cell (td) height to, say 32px, but with following limitations:
cell's text can be multiline;
cell should not contain any other elements, such div;
result i expect must be something like this:
Have any ideas?
Thanx.
I would like to set part of the text in a cell to one color(font color) and other part to another color. Is this possible with jxl api ? or it is a limitation?
example:
i have 'name*' in cell, now i want the color of 'name' in blue and '*' in red.
Thanks in advance.
Yes you can do that. please check the following code.
WritableFont TableFormat = new WritableFont(WritableFont.ARIAL, 8, WritableFont.BOLD,false, UnderlineStyle.NO_UNDERLINE, Colour.WHITE);
WritableCellFormat tableFormatBackground = new WritableCellFormat(); //table cell format
tableFormatBackground.setBackground(Colour.DARK_BLUE) ; //Table background
tableFormatBackground.setBorder(Border.ALL, BorderLineStyle.THIN,Colour.BLACK); //table border style
tableFormatBackground.setFont(TableFormat); //set the font
tableFormatBackground.setAlignment(Alignment.CENTRE);// set alignment left
Unfortunately, I don't think it's possible.
Same as you I was looking for this solution as well as how to use regular and bold fonts in the same cell (like: "version: 1.2.3.4"), but as much as I saw, jxl doesn't support different format in the same cell... :(