I am creating a custom pie chart using jqPlot's PieRenderer. My only problem is that I can either show the label or the percentage on the dataLabels. I want to do a mix and show both like <label>\n<percentage>. Explanation:
By setting this.dataLabels = 'percent', I can do this:
By setting this.dataLabels = 'label', I can do this:
I want to do this:
Do you have any ideas?
According to the source code, dataLabels doesn't support rendering label together with percent at the same time.
I think you can easily create a list of labels using JavaScript and make sure you use <br/> instead of \n if you want to render 2 lines for each part.
#sza's solution is tidier, so I will have to accept it. I wanted to post my own though, because it is easier and it may help someone.
What I did is, put two pieCharts on each other, where the first one is visible and has the percentage values and the second one has no fill and is invisible except for the labels.
My XHTML code:
<p:pieChart value="#{chartBean.pieModel}" legendPosition="" fill="true" showDataLabels="true"
title="MyPieChart" style="width:100%; height:350px" sliceMargin="2"
diameter="300" dataFormat="percent" shadow="false" extender="pieChartExtender"
seriesColors="7eb75b,c2715e,6367c2,9b6ece,5cc2c1,c0c216" styleClass="mainPieChart" />
<p:pieChart value="#{chartBean.pieModel}" legendPosition="" fill="false" showDataLabels="true"
title="MyPieChart" style="width:100%; height:350px" sliceMargin="2"
diameter="300" dataFormat="label" shadow="false" extender="pieChartLabelExtender"
seriesColors="7eb75b,c2715e,6367c2,9b6ece,5cc2c1,c0c216" styleClass="pieLabels" />
extender.js:
function pieChartExtender() {
this.cfg.seriesDefaults.rendererOptions.dataLabelFormatString = '%#.2f%%';
this.cfg.seriesDefaults.rendererOptions.dataLabelThreshold = 5;
this.cfg.seriesDefaults.rendererOptions.dataLabelPositionFactor = 0.8;
this.cfg.seriesDefaults.rendererOptions.startAngle = -90;
}
function pieChartLabelExtender() {
this.cfg.seriesDefaults.rendererOptions.dataLabelThreshold = 5;
this.cfg.seriesDefaults.rendererOptions.dataLabelPositionFactor = 0.8;
this.cfg.seriesDefaults.rendererOptions.startAngle = -90;
}
CSS file:
.chartContainer {
position:relative;
margin: 0 auto;
top: 10px;
width: 350px;
height: 350px;
}
.chartLegend {
border: 1px solid #d7d7d8;
margin: 40px 40px;
width: 80%;
}
.pieExtra {
position:absolute;
left: 17px;
top: 13.5px;
}
.pieLabels { position:absolute !important; }
.mainPieChart { position:absolute !important; }
.jqplot-title { display:none !important; }
.jqplot-grid-canvas { display:none !important; }
.jqplot-series-shadowCanvas { display:none !important; }
.mainPieChart .jqplot-event-canvas { z-index: 10 !important; }
.jqplot-data-label { color: #fff; font-weight: bold; font-size: 14px; }
.pieLabels .jqplot-data-label { margin-top: -9px !important; }
.mainPieChart .jqplot-data-label { margin-top: 8px !important; }
.pieLabels .jqplot-series-canvas { display:none !important; }
Notice that:
both pieCharts (called pieLabels and mainPieChart) are absolutely positioned, in order to be placed on each other
jqplot-data-label of pieLabels is placed 9px above and jqplot-data-label of mainPieChart is placed 8px below to create the label-percentage label
jqplot-series-canvas for pieLabels is not displayed, in order to make it invisible.
Related
I'm trying to use multiple filters on a background-image
body {
background-image: url('https://picsum.photos/200/300?image=0');
filter: grayscale(50%) blur(3px) brightness(10%);
}
it ignores the rule I've put in ...can't even do 1 at a time...can I not use filters on background images?
The filter is working fine but the background image is no more inside the body. Here you are facing a special background behavior that propagate the value of background from the body to the canvas AND it's removed from the body. In other words, your background is moved to an upper element and the filter is kept on the body.
To notice this, simply apply a background to the html element and you will disable the propagation effect thus the filter will work as expected:
body {
background-image: url('https://picsum.photos/200/300?image=0');
filter: grayscale(50%) blur(3px) brightness(10%);
height:200px; /*you need a height to see the image !*/
}
html {
background:red;
}
By the way, it's not a good solution to apply filter to whole body as it will also affect the content. If you want to filter only the image better consider a pseudo element that will be your background layer and where you can apply the filer without affecting the content:
body {
position:relative;
z-index:0;
height:200px; /*you need a height to see the image !*/
}
body:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background-image: url('https://picsum.photos/200/300?image=0');
filter: grayscale(50%) blur(3px) brightness(10%);
}
You can use filter property on background-image
body {
height: 100vh;
padding: 0;
display: grid;
align-content: center;
justify-content: center;
}
.module {
width: 300px;
height: 300px;
display: grid;
place-items: center;
color: #ff43ea;
position: relative;
}
.module::before {
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background-image: url(https://images.unsplash.com/photo-1494645009625-cc17363a5f20?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=bd502af39c922553e5a13624d4f44f40);
background-size: cover;
filter: grayscale(100%);
}
.module-inside {
position: relative;
font: bold 42px sans-serif;
}
<div class="module">
<div class="module-inside">
Module
</div>
</div>
angular material2 mat-checkbox
How do I modify the left icon size, and the left icon state color?
<mat-checkbox>Like Me.</mat-checkbox>
You can use this ( .mat-checkbox-inner-container ) CSS class to modify the mat-checkbox
.mat-checkbox-inner-container {
height: 50px!important;
width: 50px!important;
}
Note that you need to put the style modification in styles.css root folder (
/src/styles.css ) and not in the components css.
Also put !important ( width: 50px!important; ) to override the
default style.
Below is the default style for the mat-checkbox
.mat-checkbox-inner-container {
display: inline-block;
height: 20px;
line-height: 0;
margin: auto;
margin-right: 8px;
order: 0;
position: relative;
vertical-align: middle;
white-space: nowrap;
width: 20px;
flex-shrink: 0;
}
Hope this helps.
If you want to change color then use these in your CSS file
::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: black;
}
::ng-deep .mat-checkbox-checked .mat-checkbox-background {
background-color: black !important;
}
::ng-deep .mat-checkbox-checkmark-path {
stroke: #000 !important;
}
Hope this css will resolve your issue
to change styles use classes and define them in your scss component file.
When you see that this not work's, use the selectors :host /deep/ before the class name in each of the scss defined classes.
The size of the icons is defined by the font-size not width / height
Hope I helped you
In my project, we overrode sizes of checkboxes and radio buttons to 16px in this way:
body .mat-checkbox-inner-container, body .mat-radio-container, body .mat-radio-outer-circle, body .mat-radio-inner-circle {
height: 16px;
width: 16px;
}
body .mat-checkbox-ripple, body .mat-radio-ripple {
left: calc(50% - 20px);
top: calc(50% - 20px);
height: 40px;
width: 40px;
border-radius: 50%;
}
So I was experimenting with css filter, the experiment worked quite well but not in Firefox.
I wanted to apply a filter onto a segment of the background image. The idea was to fix the background image of the wrapper and the inner elements to create the illusion that the filter is applying only to a certain area and can be moved, here with scrolling.
This is what I tried:
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0px;
height: 200%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column
}
body,
div {
background-image: url("https://i.imgur.com/wu7EkAX.jpg");
background-attachment: fixed;
}
div {
filter: saturate(0%);
width: 50%;
height: 40%;
}
<div></div>
<div></div>
This works quite well with Chrome (and I think also in other browsers) but not with Firefox. It seems like it is a result of some optimization which misbehaves.
If you scroll with your mousewheele and then click, it refreshes, otherwise it stays in this state (at least if you run it standalone).
The "solution" is quite simple, you force Firefox to re render, there are whole posts about this topic but here are two of my approaches:
With a css animation
#keyframes renderFix {
from {
outline-color: red;
}
to {
outline-color: blue;
}
}
html {
outline: 1px solid red;
animation: 1s infinite alternate renderFix;
}
With some JavaScript
{
let html, s = false,
cycle = function () {
html.style.outlineColor = s ? "red" : "blue"
s = !s;
window.requestAnimationFrame(cycle)
}
window.requestAnimationFrame(function () {
html = document.body.parentElement
html.style.outlineStyle = "solid";
html.style.outlineWidth = "1px";
cycle()
})
}
The JavaScript fix applied:
{
let html, s = false,
cycle = function () {
html.style.outlineColor = s ? "red" : "blue"
s = !s;
window.requestAnimationFrame(cycle)
}
window.requestAnimationFrame(function () {
html = document.body.parentElement
html.style.outlineStyle = "solid";
html.style.outlineWidth = "1px";
cycle()
})
}
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0px;
height: 200%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column
}
body,
div {
background-image: url("https://i.imgur.com/wu7EkAX.jpg");
background-attachment: fixed;
}
div {
filter: saturate(0%);
width: 50%;
height: 40%;
}
<div></div>
<div></div>
I am creating a stylesheet for print media that includes an inline SVG as the content of an element's pseudo-class (i.e., ::before, ::after).
When testing in Chrome, it seems to work just fine, but when the page is first loaded in Firefox and Safari, the SVG element does not appear in the print preview. It then appears on all subsequent attempts.
I am not exactly sure what is going on, but if I had to guess, my conjecture would be: when page hasn't been cached there is latency rendering the pseudo-element that is happening concurrently to the browser creating the print page.
I am very curious to know why this is happening, and if there is any solution where an SVG pseudo-element can be used reliably.
Here is a stripped down code example. Please see if you can reproduce this issue:
var button = document.querySelector('button');
button.addEventListener('click', function () {
window.print();
});
div {
text-align: center;
}
button {
margin: 2em;
padding: 1em 2em;
}
#media print {
button {
display: none;
}
div::before {
content: 'Pseudo-elements';
font-weight: bold;
margin-top: 1em;
}
div::after {
position: relative;
display: block;
margin-top: 1em;
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='50' /></svg>");
}
}
<div>
<button>
print
</button>
</div>
I can repro.
It seems to be a bug with the loading of the svg, I guess it would be the same with any image.
One workaround is to load it outside of your #print rules with display: none :
var button = document.querySelector('button');
button.addEventListener('click', function() {
window.print();
});
div {
text-align: center;
}
button {
margin: 2em;
padding: 1em 2em;
}
div::after {
display: none;
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='50' /></svg>");
}
#media print {
button {
display: none;
}
div::before {
content: 'Pseudo-elements';
font-weight: bold;
margin-top: 1em;
}
div::after {
opacity: 1;
position: relative;
display: block;
margin-top: 1em;
}
}
<div>
<button>
print
</button>
</div>
An other one would be to preload it via js before hand.
I'm trying to make a centered, 100% high layout that has NO FIXED width (argh). Everything seems to be ok with the solution below, apart from the img that I need to scale to height: 100%, that doesn't scale inside table-cell (outside of the div everything's ok).
EDIT: I am able to set fixed height like 100px or so, both in css and tag. Why doesn't this work with %?
<div id="center">
<div id="tcontainer">
<div id="tleft">a</div>
<div id="tright"><img id="bgright" src="images/bgright1.jpg" height="100px" /></div>
</div>
</div>
And styles:
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
#bgrepeat { /* unnecessary ATM */
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
}
#bgright { /* HERE THE PROBLEM */
height: 100%;
}
img { border: 0; /*float: left;*/ }
#center {
text-align: center;
height: 100%;
}
#tcontainer {
text-align: left; /* POTRZEBNE ? */
background: red;
height: 100%;
display: table;
margin: 0 auto;
}
#tleft {
display: table-cell;
}
#tright {
background: pink;
display: table-cell;
}
OK, so the problem has been baldy formulated. I've had just forgotten to pass "height: 100%" in consecutive children. It didn't have anything to do with display: table nor images.