How to remove a css class?

Question

I am showing a c3 chart (vue-c3) inside a div. I have attached the images showing the display:block getting over-ridden by c3 class. The first row in the table shows the desired behaviour (that is the row for which I removed the c3 class using the Chrome Elements tab). How do I remove the c3 class ? Or how do I force display:block ( !important and using inline-style did not work)?

after removing c3

css

Update: I don't even have to add display:block anywhere. Merely removing c3 gives the desired result. The code is

<template>
  <div >
    <vue-c3  :handler="handler"/>
  </div>
</template>

Answer 1

Turns out someone else had written this code in override.styl global css file:

.vuec3-chart.c3 > svg{
    width:100% !important;
}

commented it out, and everything worked as desired without writing any style or class. What made it difficult to track was the fact that there existed a file c3.styl where I was looking for global css but this code was in override.styl .