Numerous classifications and tags available for c3-angular-directive-c3 charts

I have a project requirement to create a stacked bar chart that should look like the image below:

https://i.sstatic.net/MBwXy.png

Currently, I am utilizing the c3-angular-directive library along with c3.js for chart creation. The challenge lies in dealing with multiple categories.

The first level of categorization includes Proj1 and Proj2, followed by R1.0 and R2.0. I have attempted the following approach:

<c3chart bindto-id="stackedBarChart" show-labels="true">
    <chart-column column-id="x" column-values="R1.0, R2.0" />

    <chart-column column-id="Proj1Item1" column-values="10,20" column-type="bar" />
    <chart-column column-id="Proj2Item1" column-values="20,20" column-type="bar" />

    <chart-column column-id="Proj1Item2" column-values="30,10" column-type="bar" />
    <chart-column column-id="Proj2Item2" column-values="20,10" column-type="bar" />        

    <chart-group group-values="Proj1Item1,Proj2Item1" />
    <chart-group group-values="Proj1Item2,Proj2Item2" />

    <chart-axes values-x="x" />

    <chart-axis>
        <chart-axis-x axis-position="outer-center" axis-type="category"></chart-axis-x>
    </chart-axis>
</c3chart>

However, the result is not what I expected. I'm unsure how to achieve the desired outcome.

Are there any other types of charts that would better represent my data?

javascriptangularjschartsc3.js

Answer №1

The current version of c3.js (0.4.10) may not have all the features you're looking for, such as a multi-line X axis and a legend displaying slices of each group, but there are workarounds available.

If you're open to exploring alternatives, consider using angular-c3-directive (disclosure: I'm the author), which mimics c3.generate() functionality by rendering charts based on a similar object structure.

angular.module('app', ['c3'])

.controller('MainCtrl', ['$scope', function($scope) {
  $scope.chart = {
    data: {
      x: 'x',
      columns: [
        ['x', 'R1.0', 'R2.0'],
        ['Proj1 (item 1)', 1, 2],
        ['Proj1 (item 2)', 7, 8],
        ['Proj2 (item 1)', 3, 4],
        ['Proj2 (item 2)', 11, 16]
      ],
      groups: [
        ['Proj1 (item 1)', 'Proj1 (item 2)'],
        ['Proj2 (item 1)', 'Proj2 (item 2)'],
      ],
      colors: {
        'Proj1 (item 1)': '#cc0000',
        'Proj1 (item 2)': '#0000cc',
        'Proj2 (item 1)': '#ff0000',
        'Proj2 (item 2)': '#0000ff',
      },
      type: 'bar'
    },
    legend: {
      position: 'right'
    },
    tooltip: {
      grouped: false,
    },
    axis: {
      x: {
        type: 'categories'
      }
    }
  };
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/atavakoli/angular-c3-directive/0.3.0/angular-c3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet"/>

<div ng-app="app" ng-controller="MainCtrl">
  <div c3="chart"></div>
</div>

In my opinion, it's cleaner to handle this logic in code rather than cluttering the view. In this case, I've hardcoded the data and groups in the example, but you could potentially create a service to build part or all of the $scope.chart object from data, which can then be utilized in your controller/view.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In AngularJS, the process of replacing text using a filter can be achieved by following

Currently in the process of learning Angular, but I've hit a roadblock and can't seem to find a solution. I have a website that provides USPS shipping options, and I need to replace the default text with my own. The vendor's option shows &ap ...

htmlangularjs

Differences between const and let when utilizing the require function

With io.js now offering ES6 support, you can finally take advantage of the powerful const and let keywords. While let is seen as the successor to var with added capabilities, what about const? We all know what "constant" means, but when is it best practice ...

javascriptnode.jsecmascript-6io.js

Successfully Determining User Identity with Ajax Authentication

Currently, I am facing a security issue with my login page that uses an Ajax request for user authentication. The password entered by the user is sent as plain text in the form data of the Ajax request, making it vulnerable to interception by sniffing tool ...

javascriptphpjqueryajax

PHP can display content directly in the browser, without the need for jQuery

As I develop a web interface for an application that has longer processing times, a loading page is displayed to the user when it starts. An AJAX call then loads the output onto the page. Strangely, while browsing the PHP function directly in the browser r ...

javascriptphpjqueryajax

Ensure that PHP form validations are checked when submitting the form using jQuery

I have created a form in HTML with basic verification. Here is the code: <form class="" action="submit/save" method="POST" enctype="multipart/form-data" id="submit_form"> <input class="form- ...

javascripthtmljquery

Guide to sending checkbox data using jQuery AJAX

I am facing an issue with submitting the form below: <form action="/someurl" method="post"> <input type="hidden" name="token" value="7mLw36HxPTlt4gapxLUKWOpe1GsqA0I5"> <input type="checkbox" class="mychoice" name="name" value="appl ...

javascriptjqueryajax

Unable to replace default typography in MUI with custom typography theme on Next.js

In my Next.js React project, I am utilizing Material-UI (MUI) with a customized theme. Although the colors from the theme are being applied successfully, I am encountering difficulty in adjusting the default font sizes of H2 and H5 elements. Even though I ...

javascriptreactjsnext.jsmaterial-uijsx

Retrieve data using $http.get when an accordion group is expanded in AngularJS

Currently, I am utilizing Angular v1.2.0rc1 along with Angular-UI Bootstrap. [edit] My objective is to implement a load-on-demand feature with caching while incorporating an accordion functionality. The accordion group that I am using can be found here. ...

javascriptangularjsangular-ui

Directive in AngularJS is a reusable component that allows

Let me explain my situation. I am dynamically adding a block of code using JavaScript and binding it to my AngularJS scope. Everything seems to be working fine, except for one issue. There is a directive on a text box that works properly. However, the $wat ...

javascriptangularjsangularjs-directiveangularjs-scope

Does MongoDB provide an array of "m" objects as output?

I've configured the backend using NodeJS and MongoDB. For the frontend, AngularJS and ngResource are being utilized. When I execute this section of code: $scope.users = User.query(function() { console.log($scope.users); }); it outputs the follow ...

angularjsnode.jsmeteorngresource

What is the method for prompting a save as dialog in the browser in order to save JSON data stored in memory?

As the title suggests, I am looking for a way to store JSON data in memory. I want this action to be triggered by an onclick event on a DOM object. The goal is to save the data on the user's computer as if they were downloading a file. Saving it as t ...

javascriptjqueryjsonexportfullcalendar

extract non-alphanumeric characters from an array of strings using javascript

I am trying to loop over an array of strings in JavaScript and remove special characters from elements that contain them. I have been successful in achieving this with individual strings, but I am facing some challenges when working with arrays of string ...

javascriptarraysregexstring

Axios and Postman generate unique X-CSRF tokens

Why does the X-CSRF token I receive from my axios request differ from the one I get in Postman? Here is how I am retrieving it: headers: { "X-CSRF-Token": "FETCH" } Furthermore, I am unable to use the X-CSRF token from my axios request in Postman as it ...

javascriptgetaxiospostmantoken

The dynamic duo: Formik meets Material-UI

Trying to implement Formik with Material-UI text field in the following code: import TextField from '@material-ui/core/TextField'; import { Field, FieldProps, Form, Formik, FormikErrors, FormikProps } from 'formik'; import ...

javascriptreactjstypescriptmaterial-uiformik

This is my first experience with a Vue/webpack application, and surprisingly, there is no webpack

I am facing an issue with my app not properly loading css files. I suspect it has something to do with the fact that my app is utilizing webpack, but I am unable to locate a webpack.config.js file in the root directory. Instead, I have found webpack.base. ...

javascriptwebpackvue.js

Ensure that the GraphQL field "x" with type "[User]" includes a selection of subfields. Perhaps you intended to specify "x{ ... }" instead

I am encountering an issue while attempting to execute the following simple query: {duel{id, players}} Instead, I received the following error message: Field "players" of type "[User]" must have a selection of subfields. Did you mean & ...

javascriptnode.jsgraphqlgraphql-js

Ways to retrieve class attributes in a child context

When trying to access the class properties (or methods) from another scope, I find myself having to store it in a local variable within the function scope. class MyClass { constructor(API) { this.API = API; this.property = 'value& ...

javascripttypescriptecmascript-6

Increasing the identifier of duplicated input fields using jQuery

There is a specific section in my form that consists of a select box and three checkboxes, which needs to be duplicated on request. While I have successfully cloned the div and incremented its specific div, I am facing challenges in incrementing the checkb ...

javascriptphpjqueryhtmlwordpress

What are the steps to modify angular.module constant configuration fields?

Is there a way to change the value for dashboardApi from http://devdashboard.company.com/' to ../api (a relative path that is one level up)? I have tried using ../api but it doesn't seem to work. How can I resolve this issue? 'use strict&ap ...

angularjs

The eccentricities of Angular Translate in Firefox and Safari

While everything functions correctly in Chrome, there seems to be an issue with changing the language in Safari and Firefox. angular.module('angularApp') .config(['$translateProvider', function ($translateProvider) { $translateProv ...

javascriptangularjsfirefoxsafariangular-translate