Insites Docs Web Components V1Data DisplayCharts - Bar

Charts - Bar

Last updated on August 02, 2024.

Element: <ins-bar-chart>

Defines a Bar Chart.

Complete Example

Code Snippet

<ins-bar-chart id="barChartID"></ins-bar-chart>

<script>
  var name = 'Sessions';
  var barChartSample = [{
    name: "Direct Set Column 1",
    data: [["2018-01-10", 8], ["2018-01-11", 14], ["2018-01-12", 18], ["2018-01-13", 35]],
    color: "#3EB98C"
  },
  {
    name: "Direct Set Column 2",
    data: [["2017-05-29", 55], ["2017-06-05", 12], ["2017-06-12", 8], ["2017-06-19", 3]],
    color: "#2BBAD9"
  }]
  var barChartCat = ["Jan - Apr 18", "May - Jul 18", "Aug - Oct 18", "Sept - Dec 18"]
  var barChartID = document.getElementById('barChartID');
  barChartID.addEventListener('didLoad', function(e){
    barChartID.name = name;
    barChartID.chartData = barChartSample;
    barChartID.categories = barChartCat;
  });
</script>
Default State

Code Snippet

<ins-bar-chart></ins-bar-chart>
Direct Set Data

Code Snippet

<ins-bar-chart id="barChartDS"></ins-bar-chart>

<script>
  var name = 'Direct Set Data';
  var barChartSampledata = [
    {
      name: "Direct Set Column 1",
      data: [
        ["2018-01-10", 8],
        ["2018-01-11", 14],
        ["2018-01-12", 18],
        ["2018-01-13", 35]
      ],
      color: "#3EB98C"
    },
    {
      name: "Direct Set Column 2",
      data: [
        ["2017-05-29", 55],
        ["2017-06-05", 12],
        ["2017-06-12", 8],
        ["2017-06-19", 3]
      ],
      color: "#2BBAD9"
    }
  ]
  var barChartCategories = ["Jan - Apr 18", "May - Jul 18", "Aug - Oct 18", "Sept - Dec 18"]var barChartDS = document.getElementById('barChartDS');
  var barChartDS = document.getElementById('barChartDS');
  barChartDS.addEventListener('didLoad', function(e){
    barChartDS.name = name;
    barChartDS.chartData = barChartSampledata;
    barChartDS.categories = barChartCategories;
  });
</script>
Dynamic Data Source

Code Snippet

<ins-bar-chart
  id="barChart"
  name="Column Chart"
  data-src="https://9p1pa4b3fa.execute-api.us-east-2.amazonaws.com/insites-barchart-deployment/insites-dummy-barchart">
</ins-bar-chart>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
name string "Bar Chart" any Defines name of chart
chart-data Array [] any value separated by comma Defines chart data
categories Array [] any value separated by comma Defines chart categories
data-src string "" any Calls api for data
horizontal boolean false True / False Defines the direction of the bar
stacked boolean false True / False Defines if the bar should stack to each other

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.