Gallery Back to Gallery

Vertical Box Plot with Style Rules

Powered by ZingChart 
<!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>
    .chart--container {
      min-height: 530px;
      width: 100%;
      height: 100%;
    }

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

<body>
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      type: 'boxplot',
      backgroundColor: '#DCE6F1',
      title: {
        text: 'Base Salary Comparison',
        backgroundColor: 'none',
        color: 'black',
        fontSize: '24px',
        fontWeight: 'none',
        offsetY: '36%',
      },
      options: {
        box: {
          borderColor: '#204A7B',
          borderWidth: '2px',
          rules: [{
              backgroundColor: '#9A8AAD',
              rule: '%i == 0',
            },
            {
              backgroundColor: '#AABD82',
              rule: '%i == 1',
            },
          ],
        },
        lineMedianLevel: {
          lineColor: '#FC0B1A',
          lineWidth: '2px',
        },
        lineMinConnector: {
          lineColor: '#204A7B',
          lineWidth: '2px',
        },
        lineMaxConnector: {
          lineColor: '#204A7B',
          lineWidth: '2px',
        },
        lineMaxLevel: {
          lineColor: '#204A7B',
          lineWidth: '2px',
        },
        lineMinLevel: {
          lineColor: '#204A7B',
          lineWidth: '2px',
        },
      },
      plot: {
        tooltip: {
          borderRadius: '3px',
          rules: [{
              backgroundColor: '#9A8AAD',
              rule: '%i == 0',
            },
            {
              backgroundColor: '#AABD82',
              rule: '%i == 1',
            },
          ],
          shadow: false,
        },
        barWidth: '70px',
        hoverState: {
          visible: false,
        },
      },
      plotarea: {
        marginTop: '20%',
        marginRight: '12%',
        marginLeft: '25%',
      },
      scaleX: {
        guide: {
          visible: false,
        },
        item: {
          fontSize: '14px',
        },
        labels: ['Marketing', 'Research'],
        lineColor: 'none',
        offsetStart: '40px',
        offsetEnd: '40px',
        tick: {
          visible: false,
        },
      },
      scaleY: {
        values: '50:250:25',
        format: '$%v K',
        guide: {
          visible: false,
        },
        lineColor: '#7F7F7F',
        offsetStart: '20px',
        offsetEnd: '20px',
        tick: {
          lineColor: '#7F7F7F',
        },
      },
      series: [{
        dataBox: [
          [75, 100, 150, 225, 250],
          [50, 75, 100, 125, 175],
        ],
      }, ],
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      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" class="chart--container">
			<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
		</div>
	</body>
</html>
let chartConfig = {
  type: 'boxplot',
  backgroundColor: '#DCE6F1',
  title: {
    text: 'Base Salary Comparison',
    backgroundColor: 'none',
    color: 'black',
    fontSize: '24px',
    fontWeight: 'none',
    offsetY: '36%',
  },
  options: {
    box: {
      borderColor: '#204A7B',
      borderWidth: '2px',
      rules: [
        {
          backgroundColor: '#9A8AAD',
          rule: '%i == 0',
        },
        {
          backgroundColor: '#AABD82',
          rule: '%i == 1',
        },
      ],
    },
    lineMedianLevel: {
      lineColor: '#FC0B1A',
      lineWidth: '2px',
    },
    lineMinConnector: {
      lineColor: '#204A7B',
      lineWidth: '2px',
    },
    lineMaxConnector: {
      lineColor: '#204A7B',
      lineWidth: '2px',
    },
    lineMaxLevel: {
      lineColor: '#204A7B',
      lineWidth: '2px',
    },
    lineMinLevel: {
      lineColor: '#204A7B',
      lineWidth: '2px',
    },
  },
  plot: {
    tooltip: {
      borderRadius: '3px',
      rules: [
        {
          backgroundColor: '#9A8AAD',
          rule: '%i == 0',
        },
        {
          backgroundColor: '#AABD82',
          rule: '%i == 1',
        },
      ],
      shadow: false,
    },
    barWidth: '70px',
    hoverState: {
      visible: false,
    },
  },
  plotarea: {
    marginTop: '20%',
    marginRight: '12%',
    marginLeft: '25%',
  },
  scaleX: {
    guide: {
      visible: false,
    },
    item: {
      fontSize: '14px',
    },
    labels: ['Marketing', 'Research'],
    lineColor: 'none',
    offsetStart: '40px',
    offsetEnd: '40px',
    tick: {
      visible: false,
    },
  },
  scaleY: {
    values: '50:250:25',
    format: '$%v K',
    guide: {
      visible: false,
    },
    lineColor: '#7F7F7F',
    offsetStart: '20px',
    offsetEnd: '20px',
    tick: {
      lineColor: '#7F7F7F',
    },
  },
  series: [
    {
      dataBox: [
        [75, 100, 150, 225, 250],
        [50, 75, 100, 125, 175],
      ],
    },
  ],
};

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%',
});
.chart--container {
  min-height: 530px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}
Vertical Box Plot with HTML Tooltips 250/281 Bar Chart with Cone Design

Related Documentation: