Stacked bar charts example

Vertical stacked bar chart

Compare proportional contributions within a category.

Optional features

Global theme reference

      [
        {"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS, "colorIndex": 0},
        {"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS, "colorIndex": 0},
        {"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.LIGHTER_TINTS, "colorIndex": 0}
      ]

HTML

  <div class="border border-light" style="display: flex; flex-direction: column; height: 100%;">
    <div class="chart_title">
      <h4 class="display-4 mx-3 mb-1 mt-3">Title</h4>
      <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
    </div>

    <div id="barChartSV_holder_with_legend" style="flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; ">
      <div id="barChartSV_holder" style="flex-grow: 1; flex-shrink: 1;">
        <div id="barChartSV_chart" style="width:100%; height:100%; position: relative;"></div>
      </div>
      <div id="barChartSV_legend" style="min-width: 150px;"></div>
    </div>    
  </div>
JavaScript / ODS Charts
///////////////////////////////////////////////////
// Used data
///////////////////////////////////////////////////

// this is the data to be displayed
var dataOptions = {
  "xAxis": {
    "type": "category",
    "data": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun"
    ]
  },
  "yAxis": {},
  "series": [
    {
      "data": [
        10,
        22,
        28.8956454657,
        23,
        19,
        15
      ],
      "type": "bar",
      "stack": true
    },
    {
      "data": [
        28.8956454657,
        23,
        19,
        15,
        18,
        12
      ],
      "type": "bar",
      "stack": true
    },
    {
      "data": [
        19,
        15,
        18,
        12,
        28.8956454657,
        23
      ],
      "type": "bar",
      "stack": true
    }
  ],
  "legend": {
    "data": [
      "label 0",
      "label 1",
      "label 2"
    ]
  }
};   

///////////////////////////////////////////////////
// ODSCharts
///////////////////////////////////////////////////
// Build the theme
var themeManager = ODSCharts.getThemeManager({
  mode: ODSCharts.ODSChartsMode.LIGHT,
  categoricalColors: [
      {"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS, "colorIndex": 0},
      {"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS, "colorIndex": 0},
      {"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.LIGHTER_TINTS, "colorIndex": 0}
    ],
  visualMapColor:  ODSCharts.ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE,
  lineStyle: ODSCharts.ODSChartsLineStyle.SMOOTH,
  cssTheme: ODSCharts.ODSChartsCSSThemes.BOOSTED5
});

// register this theme to echarts
echarts.registerTheme(themeManager.name , themeManager.theme);

// get the chart holder and initiate it with the generated theme
var div = document.getElementById('barChartSV_chart');
var myChart = echarts.init(div, themeManager.name, {
  renderer: 'svg',
});

// Set the data to be displayed.
themeManager.setDataOptions(dataOptions);
// Register the externalization of the legend.
themeManager.externalizeLegends(myChart, '#barChartSV_legend');
// Manage window size changed
themeManager.manageChartResize(myChart, 'barChartSV_chart');
// Register the externalization of the tooltip/popup
themeManager.externalizePopover({
    enabled: true,
    shared: false,
    tooltip: true,
    axisPointer: ODSCharts.ODSChartsPopoverAxisPointer.none,
  }, 
  ODSCharts.ODSChartsPopoverManagers.BOOSTED5
);
// Display the chart using the configured theme and data.
myChart.setOption(themeManager.getChartOptions());
Horizontal stacked bar chart

Compare proportional contributions within a category.

Optional features

Global theme reference

      [
        {"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS, "colorIndex": 0},
        {"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS, "colorIndex": 0},
        {"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.LIGHTER_TINTS, "colorIndex": 0}
      ]

HTML

  <div class="border border-light" style="display: flex; flex-direction: column; height: 100%;">
    <div class="chart_title">
      <h4 class="display-4 mx-3 mb-1 mt-3">Title</h4>
      <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
    </div>

    <div id="barChartSH_holder_with_legend" style="flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; ">
      <div id="barChartSH_holder" style="flex-grow: 1; flex-shrink: 1;">
        <div id="barChartSH_chart" style="width:100%; height:100%; position: relative;"></div>
      </div>
      <div id="barChartSH_legend" style="min-width: 150px;"></div>
    </div>    
  </div>
JavaScript / ODS Charts
///////////////////////////////////////////////////
// Used data
///////////////////////////////////////////////////

// this is the data to be displayed
var dataOptions = {
  "yAxis": {
    "type": "category",
    "data": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun"
    ]
  },
  "xAxis": {},
  "series": [
    {
      "data": [
        10,
        22,
        28.8956454657,
        23,
        19,
        15
      ],
      "type": "bar",
      "stack": true
    },
    {
      "data": [
        28.8956454657,
        23,
        19,
        15,
        18,
        12
      ],
      "type": "bar",
      "stack": true
    },
    {
      "data": [
        19,
        15,
        18,
        12,
        28.8956454657,
        23
      ],
      "type": "bar",
      "stack": true
    }
  ],
  "legend": {
    "data": [
      "label 0",
      "label 1",
      "label 2"
    ]
  }
};   

///////////////////////////////////////////////////
// ODSCharts
///////////////////////////////////////////////////
// Build the theme
var themeManager = ODSCharts.getThemeManager({
  mode: ODSCharts.ODSChartsMode.LIGHT,
  categoricalColors: [
      {"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS, "colorIndex": 0},
      {"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS, "colorIndex": 0},
      {"colorPalette": ODSCharts.ODSChartsCategoricalColorsSet.LIGHTER_TINTS, "colorIndex": 0}
    ],
  visualMapColor:  ODSCharts.ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE,
  lineStyle: ODSCharts.ODSChartsLineStyle.SMOOTH,
  cssTheme: ODSCharts.ODSChartsCSSThemes.BOOSTED5
});

// register this theme to echarts
echarts.registerTheme(themeManager.name , themeManager.theme);

// get the chart holder and initiate it with the generated theme
var div = document.getElementById('barChartSH_chart');
var myChart = echarts.init(div, themeManager.name, {
  renderer: 'svg',
});

// Set the data to be displayed.
themeManager.setDataOptions(dataOptions);
// Register the externalization of the legend.
themeManager.externalizeLegends(myChart, '#barChartSH_legend');
// Manage window size changed
themeManager.manageChartResize(myChart, 'barChartSH_chart');
// Register the externalization of the tooltip/popup
themeManager.externalizePopover({
    enabled: true,
    shared: false,
    tooltip: true,
    axisPointer: ODSCharts.ODSChartsPopoverAxisPointer.none,
  }, 
  ODSCharts.ODSChartsPopoverManagers.BOOSTED5
);
// Display the chart using the configured theme and data.
myChart.setOption(themeManager.getChartOptions());