Area bounded by 2 segments and the axes

Descriptive name for your fiddle.
Edit to suit. (Only available to the logged in author.)

Author: mbourne

board ID: The ID for the JSXGraph DIV.

If you change this, make sure it's the same ID in this line in the script: ...JXG.JSXGraph.initBoard('my_new_id',...

You can only change this if you're the author. max-width: px A number only. aspect-ratio: e.g. 1.5 for wide, 0.7 for thin
A number only. max_height: e.g. 95vh; or 300px

Best for phone is:
calc(100vh - 1.5em)

(needs units)

You can only change this if you're the author.

<div id="jxgbox" class="jxgbox"></div>

#jxgbox {
  max-width: 500px;
  aspect-ratio: 1;
  max_height: calc(100vh - 1.5em)
}

var board = JXG.JSXGraph.initBoard('jxgbox', {
            boundingbox: [-5, 18, 33, -3],
            axis: true,
            grid: true,
            showNavigation: true,
            showCopyright: false 
        });

// Find intersection of 2 segments

let diff = x => (-2*x/3 + 16) -  (-x/2 + 15);
let x_intersect = JXG.Math.Numerics.root(diff, 1.5);

// Plot segments and bottom border

let curve1 = board.create('functiongraph', ['0', 0, 24],{strokeColor:'yellow'});      
let curve2 = board.create('functiongraph', ['-2*x/3 + 16', 0, 24])
let curve3 = board.create('functiongraph', ['-x/2 + 15', 0, 30], {strokeColor:'red'});

// Create empty 'curve'
let curve = board.create('curve', [[], []], {strokeWidth:3, fillColor:'yellow', fillOpacity: 0.3});

// Add data points to the empty 'curve'

curve.updateDataArray = function() {
  // Start with (0, 0)
  this.dataX = [0];
  this.dataY = [0];
  
  // Add the points on curve3 which are to the left of the intersection point
  
  Object.keys(curve3.points).forEach( k => {
     if(curve3.points[k].usrCoords[1] < x_intersect) {
       this.dataX.push(curve3.points[k].usrCoords[1]);
       this.dataY.push(curve3.points[k].usrCoords[2]);
     } 
   });

// Now add the points from curve2 which are to the right of the intersection point
   
   Object.keys(curve2.points).forEach( k => {
     if(curve2.points[k].usrCoords[1] >= x_intersect) {
       this.dataX.push(curve2.points[k].usrCoords[1]);
       this.dataY.push(curve2.points[k].usrCoords[2]);    
     }
   });

// Close the curve by adding (0,0)
  this.dataX.push(0);
  this.dataY.push(0);
};
board.update();

JSXGraph version: 1.12.0

You aren't the author of this fiddle, so clicking "run" will only update the graph, not save your changes.

To save your changes, make a fork of this fiddle.

Create a new version of this fiddle.
It's like "Save as..."

Save any recent changes (by clicking "Run") first.

Export a HTML page of this Fiddle from the current saved settings.

In the downloaded file, if you see console errors complaining about CORS policy, make sure you run the exported file from a localhost/ or an actual server.

Device size: full 360×800 412×915

This shows how to enclose an area bounded by one or more curves (or segments) and the axes.

It is based on this example on the JSXGraph wiki.