Chart

Parameters

Examples

Bar chart

board = JXG.JSXGraph.initBoard('jxgbox', {
  boundingbox:[-0.5,8,9,-2], axis:true
});
var f = [4, 2, -1, 3, 6, 7, 2],
    chart = board.create('chart', f, {
      chartStyle:'bar',
      width:0.8,
      labels:f,
      colorArray:['#8E1B77', '#BE1679', '#DC1765', '#DA2130',
                  '#DB311B', '#DF4917', '#E36317', '#E87F1A',
                  '#F1B112', '#FCF302', '#C1E212'],
      label: {
          fontSize:30,
          display:'internal',
          anchorX:'left',
          rotate:90
      }
   });

Dynamic bar chart and static line and point charts

  board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 9, 13, -3], axis:true});

  var s = board.create('slider', [[4,7], [8,7], [1, 1, 1.5]], {
          name:'S', strokeColor:'black', fillColor:'white'
      }),
      f = [
           () => (s.Value()*4.5).toFixed(2),
           () => (s.Value()*(-1)).toFixed(2),
           () => (s.Value()*3).toFixed(2),
           () => (s.Value()*2).toFixed(2),
           () => (s.Value()*(-0.5)).toFixed(2),
           () => (s.Value()*5.5).toFixed(2),
           () => (s.Value()*2.5).toFixed(2),
           () => (s.Value()*(-0.75)).toFixed(2),
           () => (s.Value()*3.5).toFixed(2),
           () => (s.Value()*2).toFixed(2),
           () => (s.Value()*(-1.25)).toFixed(2)
     ],
     chart = board.create('chart', [f], {
       chartStyle:'bar', width:0.8,
       labels:f,
       colorArray:['#8E1B77', '#BE1679', '#DC1765', '#DA2130',
                   '#DB311B', '#DF4917', '#E36317', '#E87F1A',
                   '#F1B112', '#FCF302', '#C1E212']});

  // Line chart and point chart
  var dataArr = [4, 1, 3, 2, 5, 6.5, 1.5, 2, 0.5, 1.5, -1],
      chart2 = board.create('chart', dataArr, {
         chartStyle:'line, point'
      });

  // Change attributes after creation
  chart2[0].setAttribute('strokeColor:black','strokeWidth:2pt');
  for (let i = 0; i < 11; i++) {
      chart2[1][i].setAttribute({
          strokeColor:'black',
          fillColor:'white',
          face:'[]',
          size:4,
          strokeWidth:'2pt'
      });
  }

Pie chart

var dataArr = [4, 1.2, 3, 7, 5, 4, 1.54, function () { return 2; }],
    a = board.create('chart', dataArr, {
        chartStyle:'pie',
        colors:['#B02B2C','#3F4C6B','#C79810','#D15600'],
        fillOpacity:0.9,
        center:[5,2],
        strokeColor:'#ffffff',
        strokeWidth:6,
        highlightBySize:true,
        highlightOnSector:true
    });

Radar chart

board = JXG.JSXGraph.initBoard('jxgbox', {
   boundingbox: [-12, 12, 20, -12], axis: false
});
var dataArr = [[23, 14, 15.0], [60, 8, 25.0], [0, 11.0, 25.0], [10, 15, 20.0]];

var a = board.create('chart', dataArr, {
    chartStyle:'radar',
    colorArray:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'],
    //fillOpacity:0.5,
    //strokeColor:'black',
    //strokeWidth:1,
    //polyStrokeWidth:1,
    paramArray:['Speed','Flexibility', 'Costs'],
    labelArray:['Ruby','JavaScript', 'PHP', 'Python'],
    //startAngle:Math.PI/4,
    legendPosition:'right',
    //"startShiftRatio": 0.1,
    //endShiftRatio:0.1,
    //startShiftArray:[0,0,0],
    //endShiftArray:[0.5,0.5,0.5],
    start:0
    //end:70,
    //startArray:[0,0,0],
    //endArray:[7,7,7],
    //radius:3,
    //showCircles:true,
    //circleLabelArray:[1,2,3,4,5],
    //highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],
});