如何在C3.js中设置单个列/栏的样式？

Question

I am new to c3.js / visualization and am trying to style the data1 bar/column in C3.js, I have the following css and can select all bars:

#chart .c3-chart-bars .c3-shape {
  stroke: black !important;
  stroke-width: 2 !important;
}

And I can set the fill opacity of the bar I want to style like so:

.c3-bars-data1 {
  fill-opacity: 0 !important;
}

However, if I try to set the stroke using the same selector, nothing happens:

.c3-bars-data1 {
  fill-opacity: 0 !important;
  stroke: black !important;
  stroke-weight: 1 !important;
}

Just using c3-bars-data1 I'm not able to change the fill color or any other option it seems.

var chart = c3.generate({
  bindto: '#chart',
  data: {
    columns: [
      ['data1', -30, 200, 200, 400, -150, 250],
      ['data2', 130, 100, -100, 200, -150, 50],
      ['data3', -230, 200, 200, -300, 250, 250]
    ],
    type: 'bar',
    groups: [
      ['data1', 'data2']
    ]
  },
  grid: {
    y: {
      lines: [{
        value: 0
      }]
    }
  }
});

Answer 1

If you meant to set the color for all bars representing data1 (not just a single bar) you can add the colors attribute to the data definition:

data:{
  colors: {
    'data1':'#FF0000'
  },
...

see : http://c3js.org/reference.html#data-colors for more information

edit: TS mentioned he wanted styling not just color, same deal, a bit more complicated

data:{
  classes: {
    data1: 'additional-data1-class',
    data2: 'additional-data2-class',
  }
...

this will add c3-target-additional-data1-class to data1 bars, which you can define in your CSS. see: http://c3js.org/reference.html#data-classes for more info.