[HELP] ChartView Values Axis label shorthand
-
Hi ,
below is my sample chartview code
ChartView{
id: salesChart
width: 475
height: parent.height
antialiasing: true
legend.visible: false
x: -15
margins.top: 0
margins.bottom: 0
margins.left: 0
margins.right: 125
property bool openGL: true
onOpenGLChanged: {
series("signal 1").useOpenGL = openGL;
}
ValuesAxis{
gridVisible: false
id: xAxis
min: 1
max: 30
labelFormat: "%.0f Mar"
labelsFont: Qt.font(
{
family:mFont.font.family,
pixelSize:11,
weight:400
}
)
color: "#808080"
tickCount: 5
}
id: yAxis
min: 1
max: 1000
labelFormat: "%.0f"
labelsFont: Qt.font(
{
family:mFont.font.family,
pixelSize:11,
weight:400
}
)
color: "#808080"
tickCount: 6
}
AreaSeries{
axisX: xAxis
axisY: yAxis
color: "#e0e0e0"
borderColor: "#000000"
borderWidth: 1
id:areaSeries
upperSeries: LineSeries{
id: lineSeries
XYPoint{ x: 1; y : 1 }
XYPoint{ x: 5; y : 200 }
XYPoint{ x: 11; y : 250 }
XYPoint{ x: 23; y : 700 }
XYPoint{ x: 25; y : 720 }
XYPoint{ x: 30; y : 800 }
}
}
}The code above creates an output of below screenshot
as you can see Y axis range is from 1 - 1000 , but 1000 eats screen spaces , this is a problem for a small screen like mobile phone when the range has a thousand / millions /billions the left side of the chartview is pushed
what i want is , how can i make 1000 = 1K , 1 million become 1M and 1 Billions = 1B ?
Any thoughts ?see below actual view of the problem
-
Hi ,
below is my sample chartview code
ChartView{
id: salesChart
width: 475
height: parent.height
antialiasing: true
legend.visible: false
x: -15
margins.top: 0
margins.bottom: 0
margins.left: 0
margins.right: 125
property bool openGL: true
onOpenGLChanged: {
series("signal 1").useOpenGL = openGL;
}
ValuesAxis{
gridVisible: false
id: xAxis
min: 1
max: 30
labelFormat: "%.0f Mar"
labelsFont: Qt.font(
{
family:mFont.font.family,
pixelSize:11,
weight:400
}
)
color: "#808080"
tickCount: 5
}
id: yAxis
min: 1
max: 1000
labelFormat: "%.0f"
labelsFont: Qt.font(
{
family:mFont.font.family,
pixelSize:11,
weight:400
}
)
color: "#808080"
tickCount: 6
}
AreaSeries{
axisX: xAxis
axisY: yAxis
color: "#e0e0e0"
borderColor: "#000000"
borderWidth: 1
id:areaSeries
upperSeries: LineSeries{
id: lineSeries
XYPoint{ x: 1; y : 1 }
XYPoint{ x: 5; y : 200 }
XYPoint{ x: 11; y : 250 }
XYPoint{ x: 23; y : 700 }
XYPoint{ x: 25; y : 720 }
XYPoint{ x: 30; y : 800 }
}
}
}The code above creates an output of below screenshot
as you can see Y axis range is from 1 - 1000 , but 1000 eats screen spaces , this is a problem for a small screen like mobile phone when the range has a thousand / millions /billions the left side of the chartview is pushed
what i want is , how can i make 1000 = 1K , 1 million become 1M and 1 Billions = 1B ?
Any thoughts ?see below actual view of the problem
@jhayar I don't know the answer to this. When I used charts, customisation options seemed to be limited. In my case I was able to get away with using
CategoryAxis
as it allows one to provide arbitrary labels. My use case was not a typicalCategoryAxis
use case but I was able to make it work.One thing I wonder is if anything can be done with the
AbstractAxis
QML type. In theory it is a "base type used for specialized axis types", but I have never seen an example of it in use. Perhaps there are people here who are more expert than me and can advise.