I’m using MiamiNice theme in my “pie’s” graphics, but doesn’t provide enough colors, and repeat colors in some sectors, is there any way to define a number of colors?
Thanks!!!
You can simply create your own Theme and put there all the colors that you want.
e.g.
var myTheme = new dojox.charting.Theme({
colors: [
"#A4CE67",
"#739363",
"#6B824A",
"#343434",
"#636563"
]
});
Then you should use "myTheme" as your theme in your chart.
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 have the following palettes, with various hue values, being applied to multiple themes in my material-theme.scss file:
$green: mat-palette($mat-green, A400);
$blue: mat-palette($mat-light-blue, A400);
$red: mat-palette($mat-red);
$red-warn: mat-palette($mat-red, A100);
In my material-styles.scss file, I have a mixin that is used to define styles based on the current theme:
#mixin style-theme($theme) {
$p: map-get($theme, primary);
$a: map-get($theme, accent);
$w: map-get($theme, warn);
$primary: mat-color($p);
$accent: mat-color($a);
$warn: mat-color($w);
$primary-contrast: mat-contrast($p, 500);
$accent-contrast: mat-contrast($a, 500);
$warn-contrast: mat-contrast($w, 500);
// Apply styling based on values above
}
Themes are created as follows:
.light-green {
$default-theme: mat-light-theme($green, $blue);
#include style-theme($default-theme);
#include angular-material-theme($default-theme);
}
Is it possible for me to get the contrast of the currently applied palette? As it is now, I am only able to hard-code the $hue value for the mat-contrast function.
StackBlitz Demo
There are six 'special' keys that are automatically added to a palette when you use mat-palette():
default
lighter
darker
default-contrast
lighter-contrast
darker-contrast
Each base palette contains all of the colors mapped to the keys 50, 100, ... 900, A100, A200, A400, A700. It also contains a sub-palette mapped to the key 'contrast' with a set of contrast colors mapped to the same keys. The colors assigned to the special keys correspond to the hue values passed in to mat-palette(), which default to 500, 100, and 700 respectively for default, lighter, and darker. The '*-contrast' mapped colors are pulled from the contrast sub-palette using the same hue value keys.
When you call mat-color() without a hue key it uses default as the key. But you could use any of the special keys so that you don't need to know which hue values are actually mapped to the special keys.
So for example, you could call mat-color($green, default-contrast) to get the proper contrast color for the default color in your green palette.
I was able to figure it out by inspecting the theming for MatToolbar.
You can get the contrast color value for a palette using the following:
$contrast: mat-color($palette, default-contrast);
See revised StackBlitz Demo
I've seen the discussion in https://www.ibm.com/developerworks/community/forums/html/topic?id=7981c520-ee1b-4a5f-b1f7-510172d2a3bd&ps=25 and have a copy of the GalacticSolutions Excel export script. That script takes the color of the font in a module cell and maps it to the Excel cell-fill color. What isn't clear to me is how to take that same source color and map it instead to the Excel cell's text color.
My source attribute is an enumeration with the assigned colors setting the font color as in . Perhaps the simplest answer that would help me is if someone familiar with the GalacticSolutions script , , could identify the code which passes the color to the cell fill-color and provide the equivalent command to handle the font color.
thanks
Carl
I received an answer on an IBM forum and am copying it here.
dowhich = "Interior" //to shade the cell
dowhich = "Font" //to color the font
void excelSetRangeColorOLE( OleAutoObj objExcelRange, int iRGBValue ) { OleAutoObj objExcelInterior = null oleResult( oleGet( objExcelRange, dowhich, objExcelInterior ) ) oleResult( olePut( objExcelInterior, "Color", iRGBValue ) ) }
I am using jqplot to draw multiple lines of different line colors.
Also, I have legends whose colors should be in accordance with the corresponding line colors.
I seem to find no way to cope with the legend color.
So any hint?
Taken from the question title I understand you want to change the color of legend labels to correspond to the color of series, right?
For this reason, since the swatches which are just in front of the labels, we can use them to grab the color which we then set for the labels.
This is the bit of the code you need. You need to remember to put it before you draw your plot.
$.jqplot.postDrawHooks.push(function() {
var swatches = $('table.jqplot-table-legend tr td.jqplot-table-legend-swatch');
var labels = $('table.jqplot-table-legend tr td.jqplot-table-legend-label');
labels.each(function(index) {
//turn the label's text color to the swatch's color
var color = $(swatches[index]).find("div div").css('background-color');
$(this).css('color',color );
});
});
You could see the code running live here.
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... :(