How to add minor division lines to a chart?

Important: unclear posts may not receive useful answers.

Before posting

  • Get familiar with Markdown to format and structure your post
  • Be sure to update lvgl from the latest version from the master branch.
  • Be sure you have checked the relevant part of the documentation.
  • If applicable use the Simulator to eliminate hardware related issues.

Delete this section if you read and applied the mentioned points.


I have a chart that looks like this


I want to add it minor division lines that will provide additional resolution in reading the values. Here is an example one I mean but of course I will pick a color and line thickness that will make the minor division lines less visible than the primary divisions.


What MCU/Processor/Board and compiler are you using?

STM32411CE black pill.

What LVGL version are you using?

I can upgrade to the latest if needed.

What do you want to achieve?

Adding horizontal and vertical minor division lines that are less visible than the major division lines which are on axis tick values.

What have you tried so far?

Reading the LVGL Chart documentation

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

/*You code here*/

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

Unfortunately, the chart doesn’t support it. You can either tweak the drawing routing of the chart or the lines manually using the lv_line widget.

Thanks @kisvegabor. Are there some drawing hooks that I can use to modify the rendering or do I actually need to modify the chart’s source code? (I let platformio to manage the LVGL library so local code modifications will break it).

As for for lv_line widget, can I make it displayed below the data graphs and major divisions and above the chart background? (Is it possible to tell the chart not to draw the background without incurring a significant rendering time due to the use of non opaque colors?).

In v8 you can hook drawing. I’ve just updated the chart to add the hooking option for the division line too.
It look slike this:


Thanks @kisvegabor. I think this is what I am looking for. Will spend time trying to understand the example.

If I got it correctly, the hook doesn’t add division lines but just modify the look of some lines based on their ids. In other words, without the hook to the total number of vertical and horizontal lines will be the same and they will all be dash/broken lines. Is it so?

Yes, that’s the case.