How to set the background transparent of a chart and display labels in the axis

How-to
1

Description

I’m trying to set the background of a label transparent but I don’t know how to do, also I want to display the label in the axys, and if It’s possible change the color of the axis. How can I do? I can’t find nothing in the documentation. Thanks in advance.

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

ESP32 nodeMCU with Arduino IDE and ILI9341 display.

What LVGL version are you using?

v7.8.1-dev

What do you want to achieve?

Draw a personalized chart

Code to reproduce

  chart = lv_chart_create(tab2, NULL);
  lv_obj_set_size(chart, 240, 110);
  lv_obj_align(chart, NULL, LV_ALIGN_CENTER, 0, 0);
  lv_chart_set_type(chart, LV_CHART_TYPE_LINE);
  lv_chart_set_y_range(chart, LV_CHART_AXIS_PRIMARY_Y, 400, 2500);
  ser1 = lv_chart_add_series(chart, LV_COLOR_GREEN);
  //lv_obj_set_style_local_value_str(chart, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, "Line chart");                        /*Opacity of the data series*/
  
 

    
    lv_chart_set_next(chart, ser1, 1000);
    lv_chart_set_next(chart, ser1, 1000);
    lv_chart_set_next(chart, ser1, 1000);
    lv_chart_set_next(chart, ser1, 1000);
    lv_chart_set_next(chart, ser1, 1200);
    lv_chart_set_next(chart, ser1, 1100);
    lv_chart_set_next(chart, ser1, 900);

Screenshot and/or video

ApplicationFrameHost_U4tvgbsdaR

2

To make it transparent:

lv_obj_set_style_local_bg_opa(chart, LV_CHART_PART_BG, LV_STATE_DEFAULT, LV_OPA_TRANSP);

For the labels, why not simply create lv_labels?

3

Thanks for your answer, is it possible to make continuous lines for the ticks of the chart axes? I tried setting the tick text like this

 lv_chart_set_y_tick_length( chart, 3, 0 );
 lv_chart_set_y_tick_texts( chart,
    "400\n-700\n-1000\n-1300\n-1600",
    3,
    LV_CHART_AXIS_DRAW_LAST_TICK
  );

But I can’t see the texts:

ShareX_KXsYYzB22F

Thanks for all

4

The continuous axis line can be achieved by the border. With the border_side property you can set on which sides the border should be drawn.

1 Like