How to fix Elements on Canvas not resizing properly

  1. Steps for Resizing Elements on Canvas in Grafana:
  • Add a Canvas Panel to Your Dashboard:
  • Open Grafana and navigate to the dashboard where you want to add a Canvas panel.
  • Click on the “+” button on the left sidebar to add a new panel.
  • From the panel options, select “Canvas” (under Visualization).
  1. Configure Canvas Settings:
    • Once the Canvas panel is added, you will see a blank canvas where you can add elements.
    • In the Canvas editor, go to the “Settings” section of the panel to configure the canvas size (e.g., width, height).
    • This will define the canvas area in which you will position and resize elements.

  2. Add an Element (e.g., Text, Shape, Image):

  • In the Canvas editor, click the “+” button to add an element to the canvas.
  • You can choose from several types of elements:
    • Text (for adding static or dynamic text),
    • Shapes (e.g., rectangles, circles),
    • Images (e.g., logos or icons).


4. Set Element Size and Position:

  • After adding an element, click on it to edit its properties.
  • In the Element Configuration panel, you’ll find options to control the size (height, width) and position (X, Y).
  • You can either input values manually or use “Scale” options to adjust the element’s size proportionally.
  1. Use the Scaling Options for Resizing:
  • For resizing elements in proportional terms:
    • The “Width” and “Height” fields let you define the size of the element.
    • You can use percentage values or pixels for specific sizes.
  • Scaling on Canvas :
    • If you’re looking to scale the element dynamically, you can adjust its size using the “scale” option (depending on the element type).
    • You can also control the “scale” via CSS or dynamic data to adjust it based on certain metrics or time ranges.

Final outcome:

@infofcc3 please don’t add your company branding/add to your posts