Level 1
@rafaeladi how did you make the axis hooks? I can't for the life of me figure it out
Is there any way to have a custom hooks inside a controller since on their documentation its not quite clear on how to do so. The only thing that works for me now it to put the styling for the chart inside my view page and it gets very messy if i have multiple chart inside my view page.
<script>
const chart = new Chartisan({
el: '#chart',
url: '@chart('sample_chart')',
hooks: new ChartisanHooks()
.colors(['#ECC94B', '#4299E1'])
.legend({ bottom: 0 })
.title({
textAlign: 'center',
left: '50%',
text: 'This is a sample chart using chartisan!',
})
.tooltip({
trigger:'axis',
})
.axis({
yAxis:{
type:'value',
yAxisIndex:1,
name:"Health",
position:'left',
axisLine: {
show: true,
},
axisLabel:{
formatter: "{value} %",
min:0,
max:100,
},
},
yAxis:{
type:'value',
yAxisIndex:2,
name:'Passed tests',
position:'left',
axisLine: {
show: true,
},
axisLabel:{
min:0,
max:200,
},
}
})
.datasets([
{
type: 'line',
smooth: false,
lineStyle: { width: 2 },
symbolSize: 7,
animationEasing: 'cubicInOut',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(128, 255, 165)'
}, {
offset: 1,
color: 'rgba(1, 191, 236)'
}])
}
},
'bar',
]),
})
</script>
Is there any way to put all of this and still able to render the chart with just calling some function?
Please or to participate in this conversation.