Docs > Styling & Customization > Facets > Facets 1

<!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,
    #myChart {
      height: 100%;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      type: 'bar3d',
      fillType: 'radial',
      scaleX: {
        item: {
          color: '#313133'
        },
        backgroundColor: 'none',
        guide: {
          visible: 0
        }
      },
      tooltip: {
        visible: 0
      },
      scaleY: {
        item: {
          color: '#313133'
        },
        backgroundColor: 'none',
        guide: {
          visible: 0
        }
      },
      plot: {
        facets: {
          front: {
            backgroundColor: '#3EA4F9 #0055BF'
          },
          right: {
            backgroundColor: '#3EA4F9 #0055BF'
          },
          left: {
            backgroundColor: '#3EA4F9 #0055BF'
          },
          top: {
            backgroundColor: 'white'
          },
          bottom: {
            backgroundColor: 'white'
          }
        }

      },
      series: [{
          values: [69, 68, 54, 48, 70, 74],
          text: 'Apple'
        },
        {
          values: [51, 53, 47, 60, 48, 52],
          text: 'Microsoft'
        },
        {
          values: [42, 43, 30, 40, 31, 48],
          text: 'Oracle'
        },
        {
          values: [25, 15, 26, 21, 24, 26],
          text: 'Dell'
        }
      ]
    };

    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'></div>
</body>

</html>

html,
body,
#myChart {
  height: 100%;
  width: 100%;
}

let chartConfig = {
  type: 'bar3d',
  fillType: 'radial',
  scaleX: {
    item: {
      color: '#313133'
    },
    backgroundColor: 'none',
    guide: {
      visible: 0
    }
  },
  tooltip: {
    visible: 0
  },
  scaleY: {
    item: {
      color: '#313133'
    },
    backgroundColor: 'none',
    guide: {
      visible: 0
    }
  },
  plot: {
    facets: {
      front: {
        backgroundColor: '#3EA4F9 #0055BF'
      },
      right: {
        backgroundColor: '#3EA4F9 #0055BF'
      },
      left: {
        backgroundColor: '#3EA4F9 #0055BF'
      },
      top: {
        backgroundColor: 'white'
      },
      bottom: {
        backgroundColor: 'white'
      }
    }

  },
  series: [{
      values: [69, 68, 54, 48, 70, 74],
      text: 'Apple'
    },
    {
      values: [51, 53, 47, 60, 48, 52],
      text: 'Microsoft'
    },
    {
      values: [42, 43, 30, 40, 31, 48],
      text: 'Oracle'
    },
    {
      values: [25, 15, 26, 21, 24, 26],
      text: 'Dell'
    }
  ]
};

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