i have a angular web application with a line graph (using echarts) with multiple series.
the labels of the series are overlapping, is there a way to adjust their position or size etc to prevent them from over lapping ?
my code:
thisInstance._paidUnpaidSplitGraphOptions = {
title: {
text: 'Paid/Unpaid Claims'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Unpaid Claims', 'Paid Claims']
},
grid: {
left: '5%',
right: '6%',
bottom: '5%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
title: "Download Image of Chart"
},
dataZoom: {
yAxisIndex: false,
title: { "zoom": "Zoom Chart", "back": "Remove Zoom" }
},
brush: {
type: ['lineX', 'clear'],
title: {
"lineX": "LineX", "clear": "Clear" }
}
}
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: xAxisData
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Paid Claims',
type: 'line',
stack: 'WWWWWWWW',
label: {
position: 'TopLeft',
normal: {
show: true,
formatter: function (data) {
return thisInstance.GetFormattedValue(data);
},
color: '#151515'
}
},
areaStyle: { normal: {} },
data: paidAmounts
},
{
name: 'Unpaid Claims',
type: 'line',
stack: 'WWWWWWWW',
label: {
normal: {
show: true,
formatter: function (data) {
return thisInstance.GetFormattedValue(data);
},
position: 'BottomRight',
color: '#151515'
}
},
areaStyle: { normal: {} },
data: unPaidAmounts
}
]
}
html code:
<div class="clr-row">
<div class="clr-col-2">
</div>
<div class="clr-col-8">
<div echarts [options]="this._appService.GraphsService._paidUnpaidSplitGraphOptions" class="demo-chart"></div>
</div>
<div class="clr-col-2">
<button class="btn btn-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesLagReport()"><clr-icon shape="download"></clr-icon>LAG REPORT</button><br />
<button class="btn btn-success-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesAgeReport()"><clr-icon shape="download"></clr-icon>AGE ANALYSIS REPORT</button>
</div>
</div>
What i have tried so far is to change the position of the labels as you can see in the above code t making the one 'TopLeft' and the other 'BottomRight', but this didn't seem to help at all the labels are still overlapping.
below is a screenshot of what it looks like
To move text slightly you can use offset: [0,-15], reference.
However you might want to use the label formatter to mask the labels that are under a certain value.
Example
var data = [
[820, 932, 901, 934, 1290, 330, 320],
[0, 0, 0, 0, 0, 900, 1320]
];
var option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {},
itemStyle: {
},
series: [{
data: data[0],
type: "line",
stack: "stack",
color: 'blue',
areaStyle: {
color: 'blue',
opacity: 0.3
},
label: {
position: "top",
offset: [0, -15],
show: true,
}
},
{
data: data[1],
type: "line",
stack: "stack",
areaStyle: {
color: 'red',
opacity: 0.3
},
label: {
position: "top",
show: true,
formatter: function (params) {
return (params.value === 0) ? "" : params.value;
}
}
}
]
}
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
if (option && typeof option === "object")
myChart.setOption(option, true);
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 90%"></div>
</body>
</html>
Stacked line graph with masked labels
You should try avoidLabelOverlap = true
Related
So I have a JSON data file that I am using with Dash/Cytoscope:
"data": {
"label": "Customer",
"properties": {
"score": 8.0,
}
}
I need to compare 'score' with the selector to see if it is bigger than 9.
So far I have tried:
'selector': 'node[properties[score > 9]]'
'selector': '[score > 9]'
'selector': '[properties[score > 9]]'
Unfortunately nothing has worked so far, just invalid syntax.
As canbax pointed out, using functions inside the stylesheet should do the trick.
I added a border-color depending on a nodes score property like this, but you can customize it as you like:
'border-color': function (node) {
if (node.data('properties').score >= 9) { return 'green'}
else { return 'black' }
},
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'height': '60px',
'width': '60px',
'border-color': function(node) {
if (node.data('properties').score >= 9) {
return 'green'
} else {
return 'black'
}
},
'border-opacity': '1',
'border-width': '10px'
}
},
{
selector: '$node > node',
css: {
'padding-top': '10px',
'padding-left': '10px',
'padding-bottom': '10px',
'padding-right': '10px',
'text-valign': 'top',
'text-halign': 'center',
'background-color': '#bbb'
}
},
{
selector: 'edge',
css: {
'target-arrow-shape': 'triangle'
}
},
{
selector: ':selected',
css: {
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
}
}
],
elements: {
nodes: [{
data: {
id: 'n0',
"properties": {
"score": 9.0
}
}
},
{
data: {
id: 'n1',
"properties": {
"score": 10.0
}
}
},
{
data: {
id: 'n2',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n3',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n4',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n5',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n6',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n7',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n8',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n9',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n10',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n11',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n12',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n13',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n14',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n15',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n16',
"properties": {
"score": 8.0
}
}
}
],
edges: [{
data: {
source: 'n0',
target: 'n1'
}
},
{
data: {
source: 'n1',
target: 'n2'
}
},
{
data: {
source: 'n1',
target: 'n3'
}
},
{
data: {
source: 'n2',
target: 'n7'
}
},
{
data: {
source: 'n2',
target: 'n11'
}
},
{
data: {
source: 'n2',
target: 'n16'
}
},
{
data: {
source: 'n3',
target: 'n4'
}
},
{
data: {
source: 'n3',
target: 'n16'
}
},
{
data: {
source: 'n4',
target: 'n5'
}
},
{
data: {
source: 'n4',
target: 'n6'
}
},
{
data: {
source: 'n6',
target: 'n8'
}
},
{
data: {
source: 'n8',
target: 'n9'
}
},
{
data: {
source: 'n8',
target: 'n10'
}
},
{
data: {
source: 'n11',
target: 'n12'
}
},
{
data: {
source: 'n12',
target: 'n13'
}
},
{
data: {
source: 'n13',
target: 'n14'
}
},
{
data: {
source: 'n13',
target: 'n15'
}
},
]
},
layout: {
name: 'dagre',
padding: 5
}
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 75%;
position: absolute;
left: 0;
top: 0;
float: left;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
I am trying to use cytoscape.min.js in one of my HTML page for showing interactions. Looking into some examples, I am able to develop a page for the same.
However, I am not able to specify this into a particular division, The "#cy" division is not in the space of proper division. In more detail, when I will develop a page with multiple contents, I want to restrict the interaction view (using cytoscpae) into a particular division in HTML. I guess something to modify in the style of "#cy" division, but not able to do so.
I would like to get any suggestion/help regarding this.
Thanks in advance,
Santosh
My current HTML page is like following:
<!doctype html>
<html>
<head>
<title>Cytoscape example</title>
<script src='cytoscape.min.js'></script>
</head>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<body>
<div>
<h1> Interactions </h1>
<h1> Test data </h1>
</div>
<div id="cy"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
// nodes
{ data: { id: 'a', type: "met" } },
{ data: { id: 'b', type: "met" } },
{ data: { id: 'c', type: "prot" } },
{ data: { id: 'd', type: "prot" } },
{ data: { id: 'e', type: "prot" } },
{ data: { id: 'f', type: "prot" } },
// edges
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
},
{
data: {
id: 'ae',
source: 'a',
target: 'e'
}
},
{
data: {
id: 'cd',
source: 'c',
target: 'd'
}
},
{
data: {
id: 'ef',
source: 'e',
target: 'f'
}
},
{
data: {
id: 'ac',
source: 'a',
target: 'c'
}
},
{
data: {
id: 'be',
source: 'b',
target: 'e'
}
}
],
style: [
{
selector: 'node[type="prot"]',
style: {
'shape': 'circle',
'background-color': 'red',
label: 'data(id)'
}
},
{
selector: 'node[type="met"]',
style: {
'shape': 'square',
'background-color': 'blue',
label: 'data(id)'
}
}]
});
cy.layout({
name: 'circle',
animate: true
}).run();
</script>
</body>
</html>
</html>
Actually, the current code looks fine for me and does the job.
If you want to make the div smaller, you can do like this:
#cy {
width: 500px;
height: 500px;
border: 1px solid black;
}
I suggest you add the border while in development, just to know where the div is. Without the border, the div still works fine, but it might be difficult to tell where it is on the page and click it.
I need some help.I'm trying to increase font-size for this badges, and I have no idea how to do that. Maybe can you help me? I have tried before fontSize but doesn't affect the style.
Badges:
Here is my code:
<script>
new Chart(document.getElementById("doughnut-chart"), {
type: 'doughnut',
data: {
labels: {!!$labels->toJson()!!},
innerHeight: "50%",
datasets: [
{
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: {!!$values->toJson()!!},
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
left: 35,
right: 0,
top: 0,
bottom: 0
}
},
legend: {
display: true,
position: 'right',
labels: {
fontColor: "#000080",
boxWidth: 25,
fontSize: 25,
}
},
</script>
I am trying to remove the colored label square from the chart tool tip. How can I make that happen in this code with all the other code in tact?
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Title
</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js">
</script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="600" height="200">
</canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [], //start empty backgroundColor: '#e8ebf8', borderColor: '#615BD4', borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { display: false, beginAtZero: true } }], xAxes: [{ ticks: { stepSize: 2, maxTicksLimit: 90 } }] }, legend: { display: false }, tooltips: { intersect: false, showTooltips: true, tooltipEvents: ["mousemove", "touchstart", "touchmove"], tooltipFillColor: "rgba(0,0,0,0.8)" } } }); window.onmessage = function(event) { myChart.data.datasets[0].data = event.data.data; myChart.data.labels = event.data.labels; myChart.update(); }; function handleClick(e) { var activeBars = myChart.getElementAtEvent(e); var value = myChart.config.data.datasets[activeBars[0]._datasetIndex].data[activeBars[0]._index]; var label = activeBars[0]._model.label; window.parent.postMessage({ "type": "click", // "label":label, "value": value }, "*"); } function ready() { window.parent.postMessage({ "type": "ready" }, "*"); }
</script>
</body>
</html>
Use the callbacks feature to remove the label:
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
}
I am using Highcharts js and I am trying to draw a pie chart with highCharts
which is a semicircle and some text embedded inside it.
and
Till now what I have made is
my html markup is
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<div id="trends-pie-chart-1" class="trends-pie-chart">
<!-- draw pie chart here -->
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div id="trends-pie-chart-2" class="trends-pie-chart">
<!-- draw pie chart here -->
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div id="trends-pie-chart-3" class="trends-pie-chart">
<!-- draw pie chart here -->
</div>
</div>
</div>
css used
.trends-pie-chart {
width: 100%;
margin-bottom: 30px;
}
and Js used
// Create the chart for Microsoft office
var chart_completion = new Highcharts.Chart({
chart: {
renderTo: 'trends-pie-chart-1',
type: 'pie',
margin: [60,10,10,10]
},
colors: ['#fcfcfc', '#F4E998'] ,
tooltip: {
enabled: false,
},
plotOptions: {
pie: {
slicedOffset: 0,
size: '50%',
dataLabels: {
enabled: false
}
},
series: noBorder
},
title: {
text: 'Microsoft Office',
align: 'center',
verticalAlign: 'bottom',
y : 10,
style: {
fontSize: '2em'
}
},
credits: {
enabled: false
},
series: [{
name: 'Browsers',
data: [["",25],[,75]],
innerSize: '60%',
showInLegend:false,
dataLabels: {
enabled: false
},
states:{
hover: {
enabled: false
}
}
}]
},function (chart) { // on complete
chart.renderer.text('42 K Users', 140, 200)
.css({
color: '#9BA0A2',
fontSize: '2em',
zIndex:100000
})
.add();
});
// Create the chart for azure
var chart_time = new Highcharts.Chart({
chart: {
renderTo: 'trends-pie-chart-2',
type: 'pie',
margin: [60,10,10,10]
},
colors: ['#fcfcfc', '#3EC1F9'] ,
plotOptions: {
pie: {
slicedOffset: 0,
size: '50%',
dataLabels: {
enabled: false
}
},
series : noBorder
},
tooltip: {
enabled: false,
},
title: {
text: 'Azure',
align: 'center',
verticalAlign: 'bottom',
y : 10,
style: {
fontSize: '2em'
}
},
credits: {
enabled: false
},
series: [{
name: 'Browsers',
data: [["",25],[,75]],
innerSize: '60%',
showInLegend:false,
dataLabels: {
enabled: false
},
states:{
hover: {
enabled: false
}
}
}]
});
// Create the chart for Cloud Storage
var chart_budget = new Highcharts.Chart({
chart: {
renderTo: 'trends-pie-chart-3',
type: 'pie',
margin: [60,10,10,10]
},
colors: ['#fcfcfc', '#6355FC'] ,
plotOptions: {
pie: {
slicedOffset: 0,
size: '50%',
dataLabels: {
enabled: false
}
},
series: noBorder
},
title: {
text: 'Cloud Storage',
align: 'center',
verticalAlign: 'bottom',
y : 10,
style: {
fontSize: '2em'
}
},
tooltip: {
enabled: false,
animation: false,
backgroundColor: null
},
credits: {
enabled: false
},
series: [{
name: 'Browsers',
data: [["",25],[,75]],
innerSize: '60%',
showInLegend:false,
dataLabels: {
enabled: false
},
states:{
hover: {
enabled: false
}
}
}]
});
/*pie charts trends page*/
var noBorder = {
states:{
hover:{
halo: {
size: 1
}
}
}
};
You can change zIndex of your text by using .attr():
http://api.highcharts.com/highcharts#Element.attr
chart.renderer.text('42 K Users', 140, 200)
.css({
color: '#9BA0A2',
fontSize: '2em',
}).attr({
zIndex: 5
})
.add();
It will work because your text is svg/vml object.
example:
http://jsfiddle.net/dL6rebf5/22/
This looks like a z-index issue. But well, I have got a better solution. Not sure if it helps:
.wrap {position: relative; z-index: 1; width: 150px; height: 150px;}
.wrap span {top: 0; right: 0; width: 50%; line-height: 95px; background-color: #fff; z-index: 5; position: absolute; text-align: center; font-size: 2em; height: 50%; overflow: hidden;}
.wrap .outer-circle,
.wrap .inner-circle {position: absolute; border-radius: 100%; background-color: #00f; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; margin: 25px;}
.wrap .inner-circle {background-color: #fff; z-index: 3;}
<div class="wrap">
<span>75%</span>
<div class="outer-circle">
<div class="inner-circle"></div>
</div>
</div>
Preview: