Add legend for chart

This commit is contained in:
SuriyaR 2019-08-14 16:37:09 +05:30
parent c5897da2f8
commit f87d1c3769

View File

@ -414,7 +414,7 @@ export class GraphListComponent implements OnInit {
text: DifficultychartDate, text: DifficultychartDate,
// mode: 'lines+markers', // mode: 'lines+markers',
type: 'scatter', type: 'scatter',
name: '', name: 'Cuckoo',
// line: { color: '#ac3333' }, // line: { color: '#ac3333' },
hovertemplate: '%{text}<br> Cuckoo : %{y:,}', hovertemplate: '%{text}<br> Cuckoo : %{y:,}',
}, },
@ -424,7 +424,7 @@ export class GraphListComponent implements OnInit {
text: DifficultychartDate, text: DifficultychartDate,
// mode: 'lines+markers', // mode: 'lines+markers',
type: 'scatter', type: 'scatter',
name: '', name: 'Progpow',
yaxis: 'y2', yaxis: 'y2',
// line: { color: '#ac3333' }, // line: { color: '#ac3333' },
hovertemplate: '%{text}<br> Progpow : %{y:,}', hovertemplate: '%{text}<br> Progpow : %{y:,}',
@ -435,7 +435,7 @@ export class GraphListComponent implements OnInit {
text: DifficultychartDate, text: DifficultychartDate,
// mode: 'lines+markers', // mode: 'lines+markers',
type: 'scatter', type: 'scatter',
name: '', name: 'RandomX',
yaxis: 'y3', yaxis: 'y3',
// line: { color: '#ac3333' }, // line: { color: '#ac3333' },
hovertemplate: '%{text}<br> RandomX : %{y:,}', hovertemplate: '%{text}<br> RandomX : %{y:,}',
@ -528,7 +528,9 @@ export class GraphListComponent implements OnInit {
// hovermode: 'closest', // hovermode: 'closest',
height: 250, height: 250,
autosize: true, autosize: true,
showlegend: false, showlegend: true,
legend: {"orientation": "h",
y: 3.5,font :{ 'size': 10}},
xaxis: { xaxis: {
tickangle: -45, tickangle: -45,
tickformat: tickformat, tickformat: tickformat,
@ -577,7 +579,7 @@ export class GraphListComponent implements OnInit {
{ {
x: sDate, x: sDate,
y: Cuckoo, y: Cuckoo,
name: '', name: 'Cuckoo',
type: 'bar', type: 'bar',
text: Cuckoo, text: Cuckoo,
hovertemplate: '%{x}<br> Cuckoo : %{text:,}', hovertemplate: '%{x}<br> Cuckoo : %{text:,}',
@ -599,7 +601,7 @@ export class GraphListComponent implements OnInit {
{ {
x: sDate, x: sDate,
y: ProgPow, y: ProgPow,
name: '', name: 'Progpow',
type: 'bar', type: 'bar',
text: ProgPow, text: ProgPow,
hovertemplate: '%{x}<br> ProgPow : %{text:,}', hovertemplate: '%{x}<br> ProgPow : %{text:,}',
@ -610,7 +612,7 @@ export class GraphListComponent implements OnInit {
{ {
x: sDate, x: sDate,
y: RandomX, y: RandomX,
name: '', name: 'Randomx',
type: 'bar', type: 'bar',
text: RandomX, text: RandomX,
hovertemplate: '%{x}<br> RandomX : %{text:,}', hovertemplate: '%{x}<br> RandomX : %{text:,}',
@ -625,7 +627,9 @@ export class GraphListComponent implements OnInit {
//width: 350, //width: 350,
height: 250, height: 250,
autosize: true, autosize: true,
showlegend: false, showlegend: true,
legend: {"orientation": "h",
y: 3.5,font :{ 'size': 10}},
barmode: 'relative', barmode: 'relative',
xaxis: { xaxis: {
showgrid: true, showgrid: true,
@ -879,7 +883,7 @@ export class GraphListComponent implements OnInit {
y: Cuckooper, y: Cuckooper,
text: Cuckoo, text: Cuckoo,
hovertemplate: 'Cuckoo :%{y} % ( %{text:,} )', hovertemplate: 'Cuckoo :%{y} % ( %{text:,} )',
name: '', name: 'Cuckoo',
fill: 'tozeroy', fill: 'tozeroy',
type: 'line', type: 'line',
line: { line: {
@ -905,7 +909,7 @@ export class GraphListComponent implements OnInit {
hovertemplate: 'RandomX :%{y} % ( %{text:,} )', hovertemplate: 'RandomX :%{y} % ( %{text:,} )',
fill: 'tozeroy', fill: 'tozeroy',
type: 'line', type: 'line',
name: '', name: 'RandomX',
line: { line: {
color: '#1ad5e9', color: '#1ad5e9',
}, },
@ -917,7 +921,7 @@ export class GraphListComponent implements OnInit {
hovertemplate: 'ProgPow :%{y} % ( %{text:,} )', hovertemplate: 'ProgPow :%{y} % ( %{text:,} )',
fill: 'tozeroy', fill: 'tozeroy',
type: 'line', type: 'line',
name: '', name: 'ProgPow',
line: { line: {
color: '#f74f4f', color: '#f74f4f',
}, },
@ -927,7 +931,9 @@ export class GraphListComponent implements OnInit {
hovermode: 'closest', hovermode: 'closest',
height: 250, height: 250,
autosize: true, autosize: true,
showlegend: false, showlegend: true,
legend: {"orientation": "h",
y: 3.5,font :{ 'size': 10}},
xaxis: { xaxis: {
tickformat: '%m-%d', tickformat: '%m-%d',
tickangle: -45, tickangle: -45,
@ -1019,7 +1025,7 @@ export class GraphListComponent implements OnInit {
{ {
type: 'scatter', type: 'scatter',
mode: 'lines', mode: 'lines',
name: '', name: 'Input',
x: Tdate, x: Tdate,
y: Ttotalinput, y: Ttotalinput,
text: Ttotalinput, text: Ttotalinput,
@ -1029,7 +1035,7 @@ export class GraphListComponent implements OnInit {
{ {
type: 'scatter', type: 'scatter',
mode: 'lines', mode: 'lines',
name: '', name: 'Kernal',
x: Tdate, x: Tdate,
y: Ttotalkernal, y: Ttotalkernal,
text: Ttotalkernal, text: Ttotalkernal,
@ -1039,7 +1045,7 @@ export class GraphListComponent implements OnInit {
{ {
type: 'scatter', type: 'scatter',
mode: 'lines', mode: 'lines',
name: '', name: 'Output',
x: Tdate, x: Tdate,
y: Ttotaloutput, y: Ttotaloutput,
text: Ttotaloutput, text: Ttotaloutput,
@ -1071,7 +1077,9 @@ export class GraphListComponent implements OnInit {
b: 50, b: 50,
t: 50, t: 50,
}, },
showlegend: false, showlegend: true,
legend: {"orientation": "h",
y: 3.5,font :{ 'size': 10}}
}, },
options: null, options: null,
}; };
@ -1134,7 +1142,9 @@ export class GraphListComponent implements OnInit {
// hovermode: 'closest', // hovermode: 'closest',
height: 250, height: 250,
autosize: true, autosize: true,
showlegend: false, showlegend: true,
legend: {"orientation": "h",
y: 3.5,font :{ 'size': 10}},
xaxis: { xaxis: {
tickangle: -45, tickangle: -45,
tickformat: tickformat, tickformat: tickformat,