CODEWITHSUNDEEP
javascriptjsonchartsc3.js
Le-Mr-Ruyk
Le-Mr-Ruyk

Reputation: 179

How to show legends on chart using c3 js with json

I'm using C3 chart to present some data on my project and I want to show up legends (Label in my case) instead of numbers in the AcisX :

Data json format : 

[
    {"Label":"DQUA","Aut":3.75,"NoAut":3.75,"CM":32},
    {"Label":"DPRO","Aut":43.9,"NoAut":0,"CM":144},
    {"Label":"DMAI","Aut":1.6999999999999993,"NoAut":0,"CM":0},
    {"Label":"DENG","Aut":0,"NoAut":0,"CM":16}
]

My attempt to get the task work :

       var chart = c3.generate({
         bindto: '.ks-chart-orders-block',
         data: {
          url:  '/Home/AbsencesByDepartementFiltredByReasons',
          mimeType: 'json',
          type:'bar',
          keys:{
            value: ['Aut','NoAut','CM']
          },
         }
       }
     });

Getted Result : enter image description here Expected Result: enter image description here

Upvotes: 0

Views: 515

Answers (1)

mugimugi
mugimugi

Reputation: 446

You need to modify the x-axis with a custom category:

var chart = c3.generate({
     bindto: '.ks-chart-orders-block',

     data: {
      url:  '/Home/AbsencesByDepartementFiltredByReasons',
      mimeType: 'json',
      type:'bar',
      keys:{
        x: 'Label',
        value: ['Aut','NoAut','CM']
      },
     },

     axis: {
       x: {
         type: 'category',
         tick: {
           centered: true
         }
       }
     }
 });

Upvotes: 1

Related Questions