<iframe 
    src="http://jsxgraph.org/share/iframe/chart-styles" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Chart styles" 
    allowfullscreen
></iframe>

    <input type="button" value="Line chart" onClick="lineChart()">
    <input type="button" value="Spline chart" onClick="splineChart()">
    <input type="button" value="Bar chart" onClick="barChart()">
    <input type="button" value="Multiple styles" onClick="multiStyleChart()">
    <input type="button" value="Two bar charts" onClick="twoBarCharts()">
    <input type="button" value="Horizontal bars" onClick="horizontalBarChart()">
    <input type="button" value="Dynamic bars" onClick="dynamicBarChart()">
<br/>
    <input type="button" value="Regression line" onClick="fitChart(1)">
    <input type="button" value="Regression parabola" onClick="fitChart(2)">


<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    var board =JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-1, 10, 11, -2], axis: true});
    
    // Example data
    var dataArr = [4, 1, 3, 2, 5, 7, 1.5, 2];
            
    // Line chart
    function lineChart() {
        JXG.JSXGraph.freeBoard(board);
        board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-1, 10, 11, -2], axis: true});
        var a = board.create('chart', dataArr, {chartStyle:'line', 
                strokeWidth:4, strokeColor:'#0000ff'});
    };
    
    // Line chart with cubic splines
    function splineChart() {
        JXG.JSXGraph.freeBoard(board);
        board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-1, 10, 11, -2], axis: true});
        var a = board.create('chart', dataArr, {chartStyle:'spline', 
                strokeWidth:4, strokeColor:'#0000ff'});
    };
    
    // Bar chart
    function barChart() {
        JXG.JSXGraph.freeBoard(board);
        board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-1, 10, 11, -2], axis: true});
        var a = board.create('chart', dataArr, {chartStyle:'bar', 
                width:0.6, labels:dataArr});
    };
    
    // Single chart with multiple styles
    function multiStyleChart() {
        JXG.JSXGraph.freeBoard(board);
        board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-1, 10, 11, -2], axis: true});
        var a = board.create('chart', dataArr, {chartStyle:'bar,line,point', 
                width:0.8, size:4, labels:dataArr});
    };
    
    // Two bar charts
    function twoBarCharts() {
        JXG.JSXGraph.freeBoard(board);
        board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-1, 10, 11, -2], axis: true});
        var a = board.create('chart', [[1, 3, 5, 7], [4, -1, 3, 2]], {chartStyle:'bar',
                width:0.8});
        var b = board.create('chart', [[2, 4, 6, 8], [3, 1, 2, 5]], {chartStyle:'bar',
                fillColor:'#C3D9FF', width:0.8});
    };
    
    // Bar chart with horizontal bars
    function horizontalBarChart() {
        JXG.JSXGraph.freeBoard(board);
        board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-1, 10, 11, -2], axis: true});
        var a = board.create('chart', dataArr, {chartStyle:'bar',
                labels:dataArr, width:0.8, dir:'horizontal'});
    };
    
    // Single chart with dynamic entries
    function dynamicBarChart() {
        JXG.JSXGraph.freeBoard(board);
        board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-1, 10, 11, -2], axis: true});
        var s = board.create('slider', [[5,-1],[8,-1], [1,1,2]], {name:'S'});
        var f = [() => (s.Value() * 4).toFixed(2),
                 () => (s.Value()*(-1)).toFixed(2),
                 () => (s.Value()*3).toFixed(2),
                 () => (s.Value()*2).toFixed(2)];
        var chart = board.create('chart', [f], {chartStyle:'bar',
                width:0.8, labels:f});
    };
    
    // Regression curve
    function fitChart(deg) {
        JXG.JSXGraph.freeBoard(board);
        board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-1, 10, 11, -2], axis: true});
        var a = board.create('chart', dataArr, 
            {chartStyle:'bar,fit', 
                degree:deg, colorArray:['#B02B2C','#3F4C6B','#C79810','#D15600'], dash:2}
        );
    }
    
    lineChart();
    
 </script>