How can I change my c3 chart axis color in vue environment - vue.js

Question

I want use c3.js in my vue app, it's successful to build a chart but I can't change my c3 chart axis color.
It's not just axis color, all style of c3 charts I can't change and fixed, it's upset for me.
Do you have any idea for it?
<template>
<div id="home">
<div class="block1">
<div id='lineChart'></div>
</div>
</div>
</template>
<script>
import * as d3 from "d3";
import c3 from 'c3';
export default {
mounted(){
this.loadBlock1();
},
methods:{
loadBlock1 () {
let chart = c3.generate({
bindto:'#lineChart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
}
});
}
}
}
</script>
<style scoped>
#import "https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.0/c3.min.css";
#lineChar .c3-line-data2 {
stroke-width: 5px;
}
#lineChart .c3-axis-x line,
#lineChart .c3-axis-x path {
stroke:blue;
}
</style>

Answer 1

Your code is not working because when you use <style scoped> Vue emulates shadow DOM adding a hash on the DOM elements and on the CSS selectors. The elements created by c3 do not contain the hash and the css selector do not match with them. So, add a style tag without the scoped attr for styling the chart.
<template>...</template>
<script>...</script>
<style scoped>...</style>
<style>...</style>
Also, avoid getting the DOM element using query selectors. Vue uses VDOM approach and DOM access should be done through directives and refs:
Vue.directive("c3", {
bind(el, binding, vnode) {
const chart = c3.generate({
bindto: el,
data: binding.value,
});
el.chart = chart;
},
update(el, binding, vnode) {
el.chart.resize();
},
unbind(el, binding, vnode) {
el.chart.destroy();
}
});
const home = new Vue({
el: "#home",
data() {
return {
options: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 50, 20, 10, 40, 15, 25]
],
},
};
},
computed: {
chart() {
return this.$refs.chart.chart;
}
},
methods: {
load(data) {
this.chart.load(data);
},
unload(data) {
this.chart.load(data);
}
},
mounted() {
this.chart.resize();
}
});
setTimeout(() => {
home.load({
columns: [
['data1', 230, 190, 300, 500, 300, 400]
]
});
}, 1000);
setTimeout(function() {
home.load({
columns: [
['data3', 130, 150, 200, 300, 200, 100]
]
});
}, 1500);
setTimeout(function() {
home.unload({
ids: 'data1'
});
}, 2000);
#home .c3-line-data2 {
stroke-width: 5px;
}
#home .c3-axis-x line,
#home .c3-axis-x path {
stroke: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.0/c3.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.0/c3.min.js"></script>
<div id="home">
<div class="block1">
<div ref="chart" v-c3="options"></div>
</div>
</div>