[docs] chart type > boxplot

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #myChart {
      min-height: 150px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    zingchart.THEME = 'classic';

    let chartConfig = {
      type: 'boxplot',
      backgroundColor: '#DCE6F1',
      title: {
        text: 'Base Salary Comparison',
        backgroundColor: 'none',
        color: 'black',
        fontSize: 24,
        fontWeight: 'none',
        offsetY: '36%'
      },
      plotarea: {
        marginTop: '20%',
        marginLeft: '25%',
        marginRight: '12%'
      },
      plot: {
        barWidth: 70,
        hoverState: {
          visible: false,
        }
      },
      tooltip: {
        shadow: false,
        borderRadius: 3,
        rules: [{
            rule: '%i == 0',
            backgrounCcolor: '#9A8AAD'
          },
          {
            rule: '%i == 1',
            backgroundColor: '#AABD82'
          }
        ]
      },
      scaleX: {
        offsetStart: 40,
        offsetEnd: 40,
        lineColor: 'none',
        labels: ['Marketing', 'Research'],
        tick: {
          visible: false
        },
        item: {
          fontSize: 14
        },
        guide: {
          visible: false
        }
      },
      scaleY: {
        offsetStart: 20,
        offsetEnd: 20,
        values: '50:250:25',
        format: '$%v K',
        lineColor: '#7F7F7F',
        tick: {
          lineColor: '#7F7F7F'
        },
        guide: {
          visible: false
        }
      },
      options: {
        box: {
          borderColor: '#204A7B',
          borderWidth: 2,

          rules: [{
              rule: '%i == 0',
              backgroundColor: '#9A8AAD'
            },
            {
              rule: '%i == 1',
              backgroundColor: '#AABD82'
            }
          ],
        },
        lineMedianLevel: {
          lineColor: '#FC0B1A',
          lineWidth: 2
        },
        lineMinLevel: {
          lineColor: '#204A7B',
          lineWidth: 2
        },
        lineMinConnector: {
          lineColor: '#204A7B',
          lineWidth: 2
        },
        lineMaxLevel: {
          lineColor: '#204A7B',
          lineWidth: 2
        },
        lineMaxConnector: {
          lineColor: '#204A7B',
          lineWidth: 2
        }
      },
      series: [{
        dataBox: [
          [75, 100, 150, 225, 250],
          [50, 75, 100, 125, 175]
        ]
      }]
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      width: '100%'
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
</body>

</html>

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#myChart {
  min-height: 150px;
}

.zc-ref {
  display: none;
}

zingchart.THEME = 'classic';

let chartConfig = {
  type: 'boxplot',
  backgroundColor: '#DCE6F1',
  title: {
    text: 'Base Salary Comparison',
    backgroundColor: 'none',
    color: 'black',
    fontSize: 24,
    fontWeight: 'none',
    offsetY: '36%'
  },
  plotarea: {
    marginTop: '20%',
    marginLeft: '25%',
    marginRight: '12%'
  },
  plot: {
    barWidth: 70,
    hoverState: {
      visible: false,
    }
  },
  tooltip: {
    shadow: false,
    borderRadius: 3,
    rules: [{
        rule: '%i == 0',
        backgrounCcolor: '#9A8AAD'
      },
      {
        rule: '%i == 1',
        backgroundColor: '#AABD82'
      }
    ]
  },
  scaleX: {
    offsetStart: 40,
    offsetEnd: 40,
    lineColor: 'none',
    labels: ['Marketing', 'Research'],
    tick: {
      visible: false
    },
    item: {
      fontSize: 14
    },
    guide: {
      visible: false
    }
  },
  scaleY: {
    offsetStart: 20,
    offsetEnd: 20,
    values: '50:250:25',
    format: '$%v K',
    lineColor: '#7F7F7F',
    tick: {
      lineColor: '#7F7F7F'
    },
    guide: {
      visible: false
    }
  },
  options: {
    box: {
      borderColor: '#204A7B',
      borderWidth: 2,

      rules: [{
          rule: '%i == 0',
          backgroundColor: '#9A8AAD'
        },
        {
          rule: '%i == 1',
          backgroundColor: '#AABD82'
        }
      ],
    },
    lineMedianLevel: {
      lineColor: '#FC0B1A',
      lineWidth: 2
    },
    lineMinLevel: {
      lineColor: '#204A7B',
      lineWidth: 2
    },
    lineMinConnector: {
      lineColor: '#204A7B',
      lineWidth: 2
    },
    lineMaxLevel: {
      lineColor: '#204A7B',
      lineWidth: 2
    },
    lineMaxConnector: {
      lineColor: '#204A7B',
      lineWidth: 2
    }
  },
  series: [{
    dataBox: [
      [75, 100, 150, 225, 250],
      [50, 75, 100, 125, 175]
    ]
  }]
};

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  width: '100%'
});