Hi @ian, I use QuickChart in PowerApps with an Image property. The code is as below:
With(
{
label: Concat(
fxChartData,
"'"&chart_label&"',"
),
temp: Substitute(
Concat(
fxChartData,
"'"&temp&"',"
),
"''",
Blank()
),
ae: Substitute(
Concat(
fxChartData,
"'"&ae&"',"
),
"''",
Blank()
)
},
{
chart:
"https://quickchart.io/chart?width=1346&height=655&c=" & EncodeUrl(
"{
'type': 'line',
'data': {
'datasets': [
{
'fill': false,
'spanGaps': false,
'lineTension': 0,
'pointRadius': 1,
'pointHoverRadius': 1,
'pointStyle': 'circle',
'borderDash': [
0,
0
],
'barPercentage': 0.9,
'categoryPercentage': 0.8,
'data': [" & temp & "],
'type': 'line',
'label': 'Temp',
'borderColor': '#a74e5b',
'backgroundColor': '#4E79A733',
'borderWidth': 2,
'hidden': false,
'datalabels': {
'display': false,
'align': 'end',
'anchor': 'end',
'backgroundColor': 'rgba(238, 238, 238, 0)',
'borderColor': 'rgba(221, 221, 221, 0)',
'borderRadius': 0,
'borderWidth': 0,
'padding': 4,
'color': '#666666',
'font': {
'family': 'sans-serif',
'size': 10,
'style': 'bold'
}
},
'yAxisID': 'Y1'
},
{
'fill': false,
'spanGaps': true,
'lineTension': 0,
'pointRadius': 1,
'pointHoverRadius': 1,
'pointStyle': 'circle',
'borderDash': [
0,
0
],
'barPercentage': 0.9,
'categoryPercentage': 0.8,
'data': [" & ae & "],
'type': 'line',
'label': 'AE',
'borderColor': '#2b2c79',
'backgroundColor': '#F28E2B33',
'borderWidth': 2,
'hidden': false,
'datalabels': {
'display': true,
'align': 'end',
'anchor': 'end',
'backgroundColor': 'rgba(238, 238, 238, 0)',
'borderColor': 'rgba(221, 221, 221, 0)',
'borderRadius': 0,
'borderWidth': 0,
'padding': 4,
'color': '#666666',
'font': {
'family': 'sans-serif',
'size': 10,
'style': 'bold'
}
}
}
],
'labels': [" & label & "]
},
'options': {
'title': {
'display': false
},
'layout': {
'padding': {
'left': 5,
'right': 5,
'top': 5,
'bottom': 5
},
'left': 0,
'right': 0,
'top': 0,
'bottom': 0
},
'legend': {
'display': true,
'position': 'top',
'align': 'start',
'fullWidth': false,
'reverse': false,
'labels': {
'fontSize': 12,
'fontFamily': 'sans-serif',
'fontColor': '#666666',
'fontStyle': 'bold',
'padding': 10
}
},
'scales': {
'xAxes': [
{
'id': 'X1',
'display': true,
'position': 'bottom',
'type': 'category',
'stacked': false,
'offset': true,
'distribution': 'linear',
'gridLines': {
'display': true,
'color': 'rgba(0, 0, 0, 0.1)',
'borderDash': [
0,
0
],
'lineWidth': 1,
'drawBorder': false,
'drawOnChartArea': true,
'drawTicks': true,
'tickMarkLength': 10,
'zeroLineWidth': 1,
'zeroLineColor': 'rgba(0, 0, 0, 0.25)',
'zeroLineBorderDash': [
0,
0
]
},
'angleLines': {
'display': true,
'color': 'rgba(0, 0, 0, 0.1)',
'borderDash': [
0,
0
],
'lineWidth': 1
},
'pointLabels': {
'display': true,
'fontColor': '#666',
'fontSize': 10,
'fontStyle': 'normal'
},
'ticks': {
'display': true,
'fontSize': 12,
'fontFamily': 'sans-serif',
'fontColor': '#666666',
'fontStyle': 'normal',
'padding': 0,
'stepSize': null,
'minRotation': 50,
'maxRotation': 50,
'mirror': false,
'reverse': false
},
'scaleLabel': {
'display': false,
'labelString': 'Axis label',
'lineHeight': 1.2,
'fontColor': '#666666',
'fontFamily': 'sans-serif',
'fontSize': 12,
'fontStyle': 'normal',
'padding': 4
}
}
],
'yAxes': [
{
'id': 'Y2',
'display': false,
'position': 'right',
'type': 'linear',
'stacked': false,
'offset': false,
'distribution': 'linear',
'gridLines': {
'display': false,
'color': 'rgba(0, 0, 0, 0.1)',
'borderDash': [
0,
0
],
'lineWidth': 1,
'drawBorder': true,
'drawOnChartArea': true,
'drawTicks': true,
'tickMarkLength': 10,
'zeroLineWidth': 1,
'zeroLineColor': 'rgba(0, 0, 0, 0.25)',
'zeroLineBorderDash': [
0,
0
]
},
'angleLines': {
'display': true,
'color': 'rgba(0, 0, 0, 0.1)',
'borderDash': [
0,
0
],
'lineWidth': 1
},
'pointLabels': {
'display': true,
'fontColor': '#666',
'fontSize': 10,
'fontStyle': 'normal'
},
'ticks': {
'display': true,
'fontSize': 12,
'fontFamily': 'sans-serif',
'fontColor': '#666666',
'fontStyle': 'normal',
'padding': 0,
'stepSize': 0.5,
'minRotation': 0,
'maxRotation': 50,
'mirror': false,
'reverse': false,
'min': -4,
'max': 16
},
'scaleLabel': {
'display': false,
'labelString': 'Axis label',
'lineHeight': 1.2,
'fontColor': '#666666',
'fontFamily': 'sans-serif',
'fontSize': 12,
'fontStyle': 'normal',
'padding': 4
}
},
{
'id': 'Y1',
'display': true,
'position': 'left',
'type': 'linear',
'stacked': false,
'offset': false,
'distribution': 'linear',
'gridLines': {
'display': true,
'color': 'rgba(0, 0, 0, 0.1)',
'borderDash': [
0,
0
],
'lineWidth': 1,
'drawBorder': false,
'drawOnChartArea': true,
'drawTicks': true,
'tickMarkLength': 10,
'zeroLineWidth': 1,
'zeroLineColor': 'rgba(0, 0, 0, 0.25)',
'zeroLineBorderDash': [
0,
0
]
},
'angleLines': {
'display': true,
'color': 'rgba(0, 0, 0, 0.1)',
'borderDash': [
0,
0
],
'lineWidth': 1
},
'pointLabels': {
'display': true,
'fontColor': '#666',
'fontSize': 10,
'fontStyle': 'normal'
},
'ticks': {
'display': true,
'fontSize': 12,
'fontFamily': 'sans-serif',
'fontColor': '#666666',
'fontStyle': 'normal',
'padding': 0,
'stepSize': 1,
'minRotation': 0,
'maxRotation': 50,
'mirror': false,
'reverse': false,
'min': -4,
'max': 16
},
'scaleLabel': {
'display': false,
'labelString': 'Axis label',
'lineHeight': 1.2,
'fontColor': '#666666',
'fontFamily': 'sans-serif',
'fontSize': 12,
'fontStyle': 'normal',
'padding': 4
}
}
]
},
'cutoutPercentage': 50,
'rotation': -1.5707963267948966,
'circumference': 6.283185307179586,
'startAngle': -1.5707963267948966
}
}"
)
}.chart
)
Noted that fxChartData is a table as below:
