Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to hide/remove plotArea in QML Chartview
Forum Updated to NodeBB v4.3 + New Features

How to hide/remove plotArea in QML Chartview

Scheduled Pinned Locked Moved Solved QML and Qt Quick
5 Posts 2 Posters 686 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    P Offline
    Praveen.Illa
    wrote on last edited by Praveen.Illa
    #1

    Hi Team,

    I have a requirement to display only Y-axis without x-axis and plotArea.
    So, I want to hide/remove plotArea in Qml chartview.
    Can someone please suggest how to achieve below two points.

    1. Hiding of PlotArea.
    2. Setting the width of the chart below 140 is messing up the Y-axis label.
      I have implemented some sample code but not able to hide the plotarea.

    Please find below my code

    Window {
        id: root
        width: 640
        height: 480
        visible: true
        title: qsTr("Hello World")
    
        Item {
            width: 140    //Setting width below 140 is not adjusting the Y-axis labels properly
            height: 400
    
            ChartView {
                id: chartView
                anchors.fill: parent
                legend.visible: false
                plotArea: Qt.rect(0,0,0,0)
                plotAreaColor: "yellow"
    
                ValueAxis {
                    id: x_axis
                    min: 0
                    max: 0
                    tickCount: 0
                    gridVisible: false
                    labelsVisible: false
                    lineVisible: false
                }
    
                ValueAxis
                {
                    id:left_y_axis
                    min:0
                    max:100
                    tickCount: 6
                    gridVisible: false
                }
    
                LineSeries
                {
                    id:l1
                    axisY: left_y_axis
                    axisX: x_axis
                }
            }
        }
    }
    
    

    I am getting output like below
    ![alt text](1fe70f47-a569-4151-9e27-3321c4f22c82-image.png image url)

    The expected Output is like below
    Scale.png

    ndiasN 1 Reply Last reply
    0
    • ndiasN ndias

      Hi @Praveen-Illa ,
      To hide PlotArea you can define the color as "Transparent"

      P Offline
      P Offline
      Praveen.Illa
      wrote on last edited by
      #3

      @ndias Thank You.
      Now, it is working

      1 Reply Last reply
      0
      • P Praveen.Illa

        Hi Team,

        I have a requirement to display only Y-axis without x-axis and plotArea.
        So, I want to hide/remove plotArea in Qml chartview.
        Can someone please suggest how to achieve below two points.

        1. Hiding of PlotArea.
        2. Setting the width of the chart below 140 is messing up the Y-axis label.
          I have implemented some sample code but not able to hide the plotarea.

        Please find below my code

        Window {
            id: root
            width: 640
            height: 480
            visible: true
            title: qsTr("Hello World")
        
            Item {
                width: 140    //Setting width below 140 is not adjusting the Y-axis labels properly
                height: 400
        
                ChartView {
                    id: chartView
                    anchors.fill: parent
                    legend.visible: false
                    plotArea: Qt.rect(0,0,0,0)
                    plotAreaColor: "yellow"
        
                    ValueAxis {
                        id: x_axis
                        min: 0
                        max: 0
                        tickCount: 0
                        gridVisible: false
                        labelsVisible: false
                        lineVisible: false
                    }
        
                    ValueAxis
                    {
                        id:left_y_axis
                        min:0
                        max:100
                        tickCount: 6
                        gridVisible: false
                    }
        
                    LineSeries
                    {
                        id:l1
                        axisY: left_y_axis
                        axisX: x_axis
                    }
                }
            }
        }
        
        

        I am getting output like below
        ![alt text](1fe70f47-a569-4151-9e27-3321c4f22c82-image.png image url)

        The expected Output is like below
        Scale.png

        ndiasN Offline
        ndiasN Offline
        ndias
        wrote on last edited by
        #2

        Hi @Praveen-Illa ,
        To hide PlotArea you can define the color as "Transparent"

        P 2 Replies Last reply
        0
        • ndiasN ndias

          Hi @Praveen-Illa ,
          To hide PlotArea you can define the color as "Transparent"

          P Offline
          P Offline
          Praveen.Illa
          wrote on last edited by
          #3

          @ndias Thank You.
          Now, it is working

          1 Reply Last reply
          0
          • P Praveen.Illa has marked this topic as solved on
          • ndiasN ndias

            Hi @Praveen-Illa ,
            To hide PlotArea you can define the color as "Transparent"

            P Offline
            P Offline
            Praveen.Illa
            wrote on last edited by
            #4

            @ndias
            One more question,
            How can I increase the width of the Y-axis line ?

            ndiasN 1 Reply Last reply
            0
            • P Praveen.Illa

              @ndias
              One more question,
              How can I increase the width of the Y-axis line ?

              ndiasN Offline
              ndiasN Offline
              ndias
              wrote on last edited by
              #5

              @Praveen-Illa ,
              I think it is not possible to do it. Maybe you can create a "custom" chart using canvas.
              You can check this example: https://www.ics.com/blog/creating-qml-controls-scratch-linechart

              1 Reply Last reply
              0

              • Login

              • Login or register to search.
              • First post
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved