Need help to create Fill between lines in XY chart

What properties in XY chart I should manipulate to make it like Fill between lines like demo project?

To configure the XY chart for the Fill Between Lines effect, you need to do the following:

  1. First, set the y-axis on the lines to the same. This will align the Y values.
    XYChart->props->series->[0]->yAxis: same y-axis name for both lines
  • with the included default values for the XY Chart, this would be “output temp”
  1. Now set the line open value. This will make the first line’s fill to stop at the second line.
    XYChart->props->series->[0]->line->open->y: same Y data source as the second line
  • with the default values for the XY Chart, this would be “output_temp”
  1. And finally, set the fill values to the desired amount.
    XYChart->props->series->[0]->line->appearance->fill->opacity: 0.3
  • in our Perspective demo, we are using 0.3 for the first line, and 0.0 for the second line, giving it the effect of only filling between the lines. You can change these amounts for different effects.

Please note that you may need to manually add fill/opacity objects to the appearance properties of your lines.

1 Like

Thank you. By the way. between Time series chart and XY chart which one has better performance?(both memory and CPU usage)

The Time Series Chart component has better performance.

1 Like