Mixing
How to give a curvy border to the graph
1
The template code is something like this.
<div class="percentage-circle-container">
<div class="line"></div>
<div
id="activeBorder"
*ngFor="let perc of percs; let i = index"
class="circle-{{i+1}} circle-border"
[ngStyle]="perc"
></div>
</div>
The css file looks like this. Includes the height and width of each circle and their respective background color.
.percentage-circle-container {
display: inline-block;
position: relative;
.circle {
position: relative;
top: 15px;
left: 15px;
text-align: center;
width: 60px;
height: 60px;
border-radius: 100%;
background-color: white;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.3);
@media (max-width: 450px) and (min-width: 376px) {
width: 40px;
height: 40px;
}
}
.active-border {
position: relative;
text-align: center;
width: 90px;
height: 90px;
border-radius: 100%;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.3);
background-color: #ed607c;
@media (max-width: 450px) and (min-width: 320px) {
width: 70px;
height: 70px;
}
}
}
.score_percent {
display: inline-block;
.avg-score {
color: #383838;
font-size: 16px;
line-height: 19px;
font-family: $font-family-colfax-regular;
position: relative;
bottom: 40px;
padding-left: 10px;
@media (max-width: 500px) and (min-width: 400px) {
font-size: 14px;
padding-left: 0px;
bottom: 31px;
}
@media (max-width: 400px) and (min-width: 376px) {
font-size: 14px;
padding-left: 0px;
bottom: 28px;
}
}
.percentage {
display: inline-block;
color: #ed607c;
font-size: 28px;
font-weight: bold;
line-height: 24px;
position: relative;
bottom: 25px;
padding-left: 10px;
@media (max-width: 500px) and (min-width: 400px) {
font-size: 25px;
padding-left: 4px;
}
}
.percent_symbol {
display: inline-block;
color: #ed607c;
font-weight: bold;
position: relative;
line-height: 24px;
bottom: 25px;
font-size: 18px;
}
@media (max-width: 500px) and (min-width: 400px) {
font-size: 16px;
}
}
.type2 {
display: inline-block;
.percentage-circle-container {
width: 350px;
height: 350px;
}
.circle {
position: absolute;
top: 50px;
left: 50px;
text-align: center;
width: 250px;
height: 250px;
border-radius: 100%;
background-color: white;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
z-index: 2;
.text {
font-size: 20px;
font-family: $font-family-colfax-medium;
color: #383838;
margin-top: 60px;
img {
margin-bottom: 10px;
}
}
.percent {
color: #f56380;
font-size: 35px;
font-family: colfax-bold;
}
}
.circle-border {
border-radius: 100%;
position: absolute;
}
.line {
width: 1px;
height: 100px;
border-right: 2px solid #e75e79;
z-index: 1;
position: relative;
margin: auto;
&:before {
content: "";
background-color: #e75e79;
width: 6px;
height: 6px;
border-radius: 50%;
position: absolute;
top: -6px;
left: -2px;
}
}
.circle-5 {
width: 270px;
height: 270px;
background-color: #f56380;
top: 40px;
left: 40px;
}
.circle-4 {
width: 290px;
height: 290px;
background-color: #ef7f95;
top: 30px;
left: 30px;
}
.circle-3 {
width: 310px;
height: 310px;
background-color: #f7a1b2;
top: 20px;
left: 20px;
}
.circle-2 {
width: 330px;
height: 330px;
background-color: #f9c0cb;
top: 10px;
left: 10px;
}
.circle-1 {
width: 350px;
height: 350px;
background-color: #fbdfe5;
top: 0px;
left: 0px;
}
}
The typescript file looks like this.There are different colors and each color should have a curvy border at the end.
import { Component, OnInit, Input, OnChanges } from "@angular/core";
@Component({
selector: "app-percentage-circle",
templateUrl: "./percentage-circle.component.html",
styleUrls: ["./percentage-circle.component.scss"]
})
export class PercentageCircleComponent implements OnInit, OnChanges {
@Input() percentage = 0;
@Input() type = 1;
@Input() perCentageArray = ;
percs = ;
activeBorderStyle;
avg;
colorArray = ["#FBDFE5", "#F9C0CB", "#F7A1B2", "#EF7F95", "#F56380"];
constructor() {}
ngOnInit() {}
ngOnChanges() {
debugger;
if (this.type === 2) {
let i = 0;
let total = 0;
this.perCentageArray.forEach(deg => {
total += deg;
deg = deg * 3.6;
let style;
if (deg <= 180) {
deg = deg + 90;
style = {
"background-image":
"linear-gradient(" +
deg +
"deg, transparent 50%, #ffffff 50%)," +
"linear-gradient(90deg, #ffffff 50%, transparent 50%)"
};
} else {
deg = deg - 90;
style = {
"background-image":
"linear-gradient(" +
deg +
"deg, transparent 50%, " +
this.colorArray[i] +
" 50%)," +
"linear-gradient(90deg, #ffffff 50%, transparent 50%)"
};
}
this.percs.push(style);
this.avg = total / this.perCentageArray.length;
console.log(this.avg);
i++;
});
} else {
let deg = this.percentage * 3.6;
if (deg <= 180) {
deg = deg + 90;
this.activeBorderStyle = {
"background-image":
"linear-gradient(" +
deg +
"deg, transparent 50%, #f2f2f2 50%)," +
"linear-gradient(90deg, #f2f2f2 50%, transparent 50%)"
};
} else {
deg = deg - 90;
this.activeBorderStyle = {
"background-image":
"linear-gradient(" +
deg +
"deg, transparent 50%, #ed607c 50%)," +
"linear-gradient(90deg, #f2f2f2 50%, transparent 50%)"
};
}
}
}
}
The line should have a curvy border at the end.Any help is appreciated and please help your fellow developer. Thanks in advance. For your reference I have added the image that is required in case of any miscommunication
angular typescript asked Dec 11 '18 at 7:02
abhijithabhijith
62110
add a comment |
1
The template code is something like this.
<div class="percentage-circle-container">
<div class="line"></div>
<div
id="activeBorder"
*ngFor="let perc of percs; let i = index"
class="circle-{{i+1}} circle-border"
[ngStyle]="perc"
></div>
</div>
The css file looks like this. Includes the height and width of each circle and their respective background color.
.percentage-circle-container {
display: inline-block;
position: relative;
.circle {
position: relative;
top: 15px;
left: 15px;
text-align: center;
width: 60px;
height: 60px;
border-radius: 100%;
background-color: white;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.3);
@media (max-width: 450px) and (min-width: 376px) {
width: 40px;
height: 40px;
}
}
.active-border {
position: relative;
text-align: center;
width: 90px;
height: 90px;
border-radius: 100%;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.3);
background-color: #ed607c;
@media (max-width: 450px) and (min-width: 320px) {
width: 70px;
height: 70px;
}
}
}
.score_percent {
display: inline-block;
.avg-score {
color: #383838;
font-size: 16px;
line-height: 19px;
font-family: $font-family-colfax-regular;
position: relative;
bottom: 40px;
padding-left: 10px;
@media (max-width: 500px) and (min-width: 400px) {
font-size: 14px;
padding-left: 0px;
bottom: 31px;
}
@media (max-width: 400px) and (min-width: 376px) {
font-size: 14px;
padding-left: 0px;
bottom: 28px;
}
}
.percentage {
display: inline-block;
color: #ed607c;
font-size: 28px;
font-weight: bold;
line-height: 24px;
position: relative;
bottom: 25px;
padding-left: 10px;
@media (max-width: 500px) and (min-width: 400px) {
font-size: 25px;
padding-left: 4px;
}
}
.percent_symbol {
display: inline-block;
color: #ed607c;
font-weight: bold;
position: relative;
line-height: 24px;
bottom: 25px;
font-size: 18px;
}
@media (max-width: 500px) and (min-width: 400px) {
font-size: 16px;
}
}
.type2 {
display: inline-block;
.percentage-circle-container {
width: 350px;
height: 350px;
}
.circle {
position: absolute;
top: 50px;
left: 50px;
text-align: center;
width: 250px;
height: 250px;
border-radius: 100%;
background-color: white;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
z-index: 2;
.text {
font-size: 20px;
font-family: $font-family-colfax-medium;
color: #383838;
margin-top: 60px;
img {
margin-bottom: 10px;
}
}
.percent {
color: #f56380;
font-size: 35px;
font-family: colfax-bold;
}
}
.circle-border {
border-radius: 100%;
position: absolute;
}
.line {
width: 1px;
height: 100px;
border-right: 2px solid #e75e79;
z-index: 1;
position: relative;
margin: auto;
&:before {
content: "";
background-color: #e75e79;
width: 6px;
height: 6px;
border-radius: 50%;
position: absolute;
top: -6px;
left: -2px;
}
}
.circle-5 {
width: 270px;
height: 270px;
background-color: #f56380;
top: 40px;
left: 40px;
}
.circle-4 {
width: 290px;
height: 290px;
background-color: #ef7f95;
top: 30px;
left: 30px;
}
.circle-3 {
width: 310px;
height: 310px;
background-color: #f7a1b2;
top: 20px;
left: 20px;
}
.circle-2 {
width: 330px;
height: 330px;
background-color: #f9c0cb;
top: 10px;
left: 10px;
}
.circle-1 {
width: 350px;
height: 350px;
background-color: #fbdfe5;
top: 0px;
left: 0px;
}
}
The typescript file looks like this.There are different colors and each color should have a curvy border at the end.
import { Component, OnInit, Input, OnChanges } from "@angular/core";
@Component({
selector: "app-percentage-circle",
templateUrl: "./percentage-circle.component.html",
styleUrls: ["./percentage-circle.component.scss"]
})
export class PercentageCircleComponent implements OnInit, OnChanges {
@Input() percentage = 0;
@Input() type = 1;
@Input() perCentageArray = ;
percs = ;
activeBorderStyle;
avg;
colorArray = ["#FBDFE5", "#F9C0CB", "#F7A1B2", "#EF7F95", "#F56380"];
constructor() {}
ngOnInit() {}
ngOnChanges() {
debugger;
if (this.type === 2) {
let i = 0;
let total = 0;
this.perCentageArray.forEach(deg => {
total += deg;
deg = deg * 3.6;
let style;
if (deg <= 180) {
deg = deg + 90;
style = {
"background-image":
"linear-gradient(" +
deg +
"deg, transparent 50%, #ffffff 50%)," +
"linear-gradient(90deg, #ffffff 50%, transparent 50%)"
};
} else {
deg = deg - 90;
style = {
"background-image":
"linear-gradient(" +
deg +
"deg, transparent 50%, " +
this.colorArray[i] +
" 50%)," +
"linear-gradient(90deg, #ffffff 50%, transparent 50%)"
};
}
this.percs.push(style);
this.avg = total / this.perCentageArray.length;
console.log(this.avg);
i++;
});
} else {
let deg = this.percentage * 3.6;
if (deg <= 180) {
deg = deg + 90;
this.activeBorderStyle = {
"background-image":
"linear-gradient(" +
deg +
"deg, transparent 50%, #f2f2f2 50%)," +
"linear-gradient(90deg, #f2f2f2 50%, transparent 50%)"
};
} else {
deg = deg - 90;
this.activeBorderStyle = {
"background-image":
"linear-gradient(" +
deg +
"deg, transparent 50%, #ed607c 50%)," +
"linear-gradient(90deg, #f2f2f2 50%, transparent 50%)"
};
}
}
}
}
The line should have a curvy border at the end.Any help is appreciated and please help your fellow developer. Thanks in advance. For your reference I have added the image that is required in case of any miscommunication
angular typescript asked Dec 11 '18 at 7:02
abhijithabhijith
62110
Can you please create stackblitz to reproduce the issue.
– Just code
Jan 1 at 5:18
I would have love to but since all the values are calculated dynamically I am not sure how to do it. Extremely sorry
– abhijith
Jan 1 at 5:44
This is all I could achieve. Please help stackblitz.com/edit/…
– abhijith
Jan 1 at 6:05
add a comment |
1
1
1
The template code is something like this.
<div class="percentage-circle-container">
<div class="line"></div>
<div
id="activeBorder"
*ngFor="let perc of percs; let i = index"
class="circle-{{i+1}} circle-border"
[ngStyle]="perc"
></div>
</div>
The css file looks like this. Includes the height and width of each circle and their respective background color.
.percentage-circle-container {
display: inline-block;
position: relative;
.circle {
position: relative;
top: 15px;
left: 15px;
text-align: center;
width: 60px;
height: 60px;
border-radius: 100%;
background-color: white;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.3);
@media (max-width: 450px) and (min-width: 376px) {
width: 40px;
height: 40px;
}
}
.active-border {
position: relative;
text-align: center;
width: 90px;
height: 90px;
border-radius: 100%;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.3);
background-color: #ed607c;
@media (max-width: 450px) and (min-width: 320px) {
width: 70px;
height: 70px;
}
}
}
.score_percent {
display: inline-block;
.avg-score {
color: #383838;
font-size: 16px;
line-height: 19px;
font-family: $font-family-colfax-regular;
position: relative;
bottom: 40px;
padding-left: 10px;
@media (max-width: 500px) and (min-width: 400px) {
font-size: 14px;
padding-left: 0px;
bottom: 31px;
}
@media (max-width: 400px) and (min-width: 376px) {
font-size: 14px;
padding-left: 0px;
bottom: 28px;
}
}
.percentage {
display: inline-block;
color: #ed607c;
font-size: 28px;
font-weight: bold;
line-height: 24px;
position: relative;
bottom: 25px;
padding-left: 10px;
@media (max-width: 500px) and (min-width: 400px) {
font-size: 25px;
padding-left: 4px;
}
}
.percent_symbol {
display: inline-block;
color: #ed607c;
font-weight: bold;
position: relative;
line-height: 24px;
bottom: 25px;
font-size: 18px;
}
@media (max-width: 500px) and (min-width: 400px) {
font-size: 16px;
}
}
.type2 {
display: inline-block;
.percentage-circle-container {
width: 350px;
height: 350px;
}
.circle {
position: absolute;
top: 50px;
left: 50px;
text-align: center;
width: 250px;
height: 250px;
border-radius: 100%;
background-color: white;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
z-index: 2;
.text {
font-size: 20px;
font-family: $font-family-colfax-medium;
color: #383838;
margin-top: 60px;
img {
margin-bottom: 10px;
}
}
.percent {
color: #f56380;
font-size: 35px;
font-family: colfax-bold;
}
}
.circle-border {
border-radius: 100%;
position: absolute;
}
.line {
width: 1px;
height: 100px;
border-right: 2px solid #e75e79;
z-index: 1;
position: relative;
margin: auto;
&:before {
content: "";
background-color: #e75e79;
width: 6px;
height: 6px;
border-radius: 50%;
position: absolute;
top: -6px;
left: -2px;
}
}
.circle-5 {
width: 270px;
height: 270px;
background-color: #f56380;
top: 40px;
left: 40px;
}
.circle-4 {
width: 290px;
height: 290px;
background-color: #ef7f95;
top: 30px;
left: 30px;
}
.circle-3 {
width: 310px;
height: 310px;
background-color: #f7a1b2;
top: 20px;
left: 20px;
}
.circle-2 {
width: 330px;
height: 330px;
background-color: #f9c0cb;
top: 10px;
left: 10px;
}
.circle-1 {
width: 350px;
height: 350px;
background-color: #fbdfe5;
top: 0px;
left: 0px;
}
}
The typescript file looks like this.There are different colors and each color should have a curvy border at the end.
import { Component, OnInit, Input, OnChanges } from "@angular/core";
@Component({
selector: "app-percentage-circle",
templateUrl: "./percentage-circle.component.html",
styleUrls: ["./percentage-circle.component.scss"]
})
export class PercentageCircleComponent implements OnInit, OnChanges {
@Input() percentage = 0;
@Input() type = 1;
@Input() perCentageArray = ;
percs = ;
activeBorderStyle;
avg;
colorArray = ["#FBDFE5", "#F9C0CB", "#F7A1B2", "#EF7F95", "#F56380"];
constructor() {}
ngOnInit() {}
ngOnChanges() {
debugger;
if (this.type === 2) {
let i = 0;
let total = 0;
this.perCentageArray.forEach(deg => {
total += deg;
deg = deg * 3.6;
let style;
if (deg <= 180) {
deg = deg + 90;
style = {
"background-image":
"linear-gradient(" +
deg +
"deg, transparent 50%, #ffffff 50%)," +
"linear-gradient(90deg, #ffffff 50%, transparent 50%)"
};
} else {
deg = deg - 90;
style = {
"background-image":
"linear-gradient(" +
deg +
"deg, transparent 50%, " +
this.colorArray[i] +
" 50%)," +
"linear-gradient(90deg, #ffffff 50%, transparent 50%)"
};
}
this.percs.push(style);
this.avg = total / this.perCentageArray.length;
console.log(this.avg);
i++;
});
} else {
let deg = this.percentage * 3.6;
if (deg <= 180) {
deg = deg + 90;
this.activeBorderStyle = {
"background-image":
"linear-gradient(" +
deg +
"deg, transparent 50%, #f2f2f2 50%)," +
"linear-gradient(90deg, #f2f2f2 50%, transparent 50%)"
};
} else {
deg = deg - 90;
this.activeBorderStyle = {
"background-image":
"linear-gradient(" +
deg +
"deg, transparent 50%, #ed607c 50%)," +
"linear-gradient(90deg, #f2f2f2 50%, transparent 50%)"
};
}
}
}
}
The line should have a curvy border at the end.Any help is appreciated and please help your fellow developer. Thanks in advance. For your reference I have added the image that is required in case of any miscommunication
angular typescript asked Dec 11 '18 at 7:02
abhijithabhijith
62110
The template code is something like this.
<div class="percentage-circle-container">
<div class="line"></div>
<div
id="activeBorder"
*ngFor="let perc of percs; let i = index"
class="circle-{{i+1}} circle-border"
[ngStyle]="perc"
></div>
</div>
The css file looks like this. Includes the height and width of each circle and their respective background color.
.percentage-circle-container {
display: inline-block;
position: relative;
.circle {
position: relative;
top: 15px;
left: 15px;
text-align: center;
width: 60px;
height: 60px;
border-radius: 100%;
background-color: white;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.3);
@media (max-width: 450px) and (min-width: 376px) {
width: 40px;
height: 40px;
}
}
.active-border {
position: relative;
text-align: center;
width: 90px;
height: 90px;
border-radius: 100%;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.3);
background-color: #ed607c;
@media (max-width: 450px) and (min-width: 320px) {
width: 70px;
height: 70px;
}
}
}
.score_percent {
display: inline-block;
.avg-score {
color: #383838;
font-size: 16px;
line-height: 19px;
font-family: $font-family-colfax-regular;
position: relative;
bottom: 40px;
padding-left: 10px;
@media (max-width: 500px) and (min-width: 400px) {
font-size: 14px;
padding-left: 0px;
bottom: 31px;
}
@media (max-width: 400px) and (min-width: 376px) {
font-size: 14px;
padding-left: 0px;
bottom: 28px;
}
}
.percentage {
display: inline-block;
color: #ed607c;
font-size: 28px;
font-weight: bold;
line-height: 24px;
position: relative;
bottom: 25px;
padding-left: 10px;
@media (max-width: 500px) and (min-width: 400px) {
font-size: 25px;
padding-left: 4px;
}
}
.percent_symbol {
display: inline-block;
color: #ed607c;
font-weight: bold;
position: relative;
line-height: 24px;
bottom: 25px;
font-size: 18px;
}
@media (max-width: 500px) and (min-width: 400px) {
font-size: 16px;
}
}
.type2 {
display: inline-block;
.percentage-circle-container {
width: 350px;
height: 350px;
}
.circle {
position: absolute;
top: 50px;
left: 50px;
text-align: center;
width: 250px;
height: 250px;
border-radius: 100%;
background-color: white;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
z-index: 2;
.text {
font-size: 20px;
font-family: $font-family-colfax-medium;
color: #383838;
margin-top: 60px;
img {
margin-bottom: 10px;
}
}
.percent {
color: #f56380;
font-size: 35px;
font-family: colfax-bold;
}
}
.circle-border {
border-radius: 100%;
position: absolute;
}
.line {
width: 1px;
height: 100px;
border-right: 2px solid #e75e79;
z-index: 1;
position: relative;
margin: auto;
&:before {
content: "";
background-color: #e75e79;
width: 6px;
height: 6px;
border-radius: 50%;
position: absolute;
top: -6px;
left: -2px;
}
}
.circle-5 {
width: 270px;
height: 270px;
background-color: #f56380;
top: 40px;
left: 40px;
}
.circle-4 {
width: 290px;
height: 290px;
background-color: #ef7f95;
top: 30px;
left: 30px;
}
.circle-3 {
width: 310px;
height: 310px;
background-color: #f7a1b2;
top: 20px;
left: 20px;
}
.circle-2 {
width: 330px;
height: 330px;
background-color: #f9c0cb;
top: 10px;
left: 10px;
}
.circle-1 {
width: 350px;
height: 350px;
background-color: #fbdfe5;
top: 0px;
left: 0px;
}
}
The typescript file looks like this.There are different colors and each color should have a curvy border at the end.
import { Component, OnInit, Input, OnChanges } from "@angular/core";
@Component({
selector: "app-percentage-circle",
templateUrl: "./percentage-circle.component.html",
styleUrls: ["./percentage-circle.component.scss"]
})
export class PercentageCircleComponent implements OnInit, OnChanges {
@Input() percentage = 0;
@Input() type = 1;
@Input() perCentageArray = ;
percs = ;
activeBorderStyle;
avg;
colorArray = ["#FBDFE5", "#F9C0CB", "#F7A1B2", "#EF7F95", "#F56380"];
constructor() {}
ngOnInit() {}
ngOnChanges() {
debugger;
if (this.type === 2) {
let i = 0;
let total = 0;
this.perCentageArray.forEach(deg => {
total += deg;
deg = deg * 3.6;
let style;
if (deg <= 180) {
deg = deg + 90;
style = {
"background-image":
"linear-gradient(" +
deg +
"deg, transparent 50%, #ffffff 50%)," +
"linear-gradient(90deg, #ffffff 50%, transparent 50%)"
};
} else {
deg = deg - 90;
style = {
"background-image":
"linear-gradient(" +
deg +
"deg, transparent 50%, " +
this.colorArray[i] +
" 50%)," +
"linear-gradient(90deg, #ffffff 50%, transparent 50%)"
};
}
this.percs.push(style);
this.avg = total / this.perCentageArray.length;
console.log(this.avg);
i++;
});
} else {
let deg = this.percentage * 3.6;
if (deg <= 180) {
deg = deg + 90;
this.activeBorderStyle = {
"background-image":
"linear-gradient(" +
deg +
"deg, transparent 50%, #f2f2f2 50%)," +
"linear-gradient(90deg, #f2f2f2 50%, transparent 50%)"
};
} else {
deg = deg - 90;
this.activeBorderStyle = {
"background-image":
"linear-gradient(" +
deg +
"deg, transparent 50%, #ed607c 50%)," +
"linear-gradient(90deg, #f2f2f2 50%, transparent 50%)"
};
}
}
}
}
The line should have a curvy border at the end.Any help is appreciated and please help your fellow developer. Thanks in advance. For your reference I have added the image that is required in case of any miscommunication
angular typescript angular typescript asked Dec 11 '18 at 7:02
abhijithabhijith
62110
asked Dec 11 '18 at 7:02
abhijithabhijith
62110
edited Jan 1 at 5:16
abhijith
asked Dec 11 '18 at 7:02
abhijithabhijith
62110
asked Dec 11 '18 at 7:02
abhijithabhijith
62110
asked Dec 11 '18 at 7:02
abhijithabhijith
62110
62110
Can you please create stackblitz to reproduce the issue.
– Just code
Jan 1 at 5:18
I would have love to but since all the values are calculated dynamically I am not sure how to do it. Extremely sorry
– abhijith
Jan 1 at 5:44
This is all I could achieve. Please help stackblitz.com/edit/…
– abhijith
Jan 1 at 6:05
add a comment |
Can you please create stackblitz to reproduce the issue.
– Just code
Jan 1 at 5:18
I would have love to but since all the values are calculated dynamically I am not sure how to do it. Extremely sorry
– abhijith
Jan 1 at 5:44
This is all I could achieve. Please help stackblitz.com/edit/…
– abhijith
Jan 1 at 6:05
Can you please create stackblitz to reproduce the issue.
– Just code
Jan 1 at 5:18
Can you please create stackblitz to reproduce the issue.
– Just code
Jan 1 at 5:18
I would have love to but since all the values are calculated dynamically I am not sure how to do it. Extremely sorry
– abhijith
Jan 1 at 5:44
I would have love to but since all the values are calculated dynamically I am not sure how to do it. Extremely sorry
– abhijith
Jan 1 at 5:44
This is all I could achieve. Please help stackblitz.com/edit/…
– abhijith
Jan 1 at 6:05
This is all I could achieve. Please help stackblitz.com/edit/…
– abhijith
Jan 1 at 6:05
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53718979%2fhow-to-give-a-curvy-border-to-the-graph%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53718979%2fhow-to-give-a-curvy-border-to-the-graph%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you please create stackblitz to reproduce the issue.
– Just code
Jan 1 at 5:18
I would have love to but since all the values are calculated dynamically I am not sure how to do it. Extremely sorry
– abhijith
Jan 1 at 5:44
This is all I could achieve. Please help stackblitz.com/edit/…
– abhijith
Jan 1 at 6:05