Charts
Charts are powered by nvd3 and echarts please refer there guid for further documentation
Last updated
Charts are powered by nvd3 and echarts please refer there guid for further documentation
Last updated
import { NgxEchartsModule } from 'ngx-echarts';
import { NvD3Module } from 'ngx-nvd3';
@NgModule({
imports: [NvD3Module,NgxEchartsModule,...]
})
export class AppModule(){}<div echarts [options]="optionsLineStack" [initOpts]="initOptionsLineStack" class="demo-chart"></div> initOptionsLineStack = {
renderer: 'svg',
width: 460,
height: 300
};
optionsLineStack = {
tooltip : {
trigger: 'axis',
backgroundColor:'#fff',
padding:10,
textStyle:{
color:pg.getColor('master'),
fontSize:12,
fontFamily:"Arial",
},
axisPointer:{
type:"line",
lineStyle:{
opacity:0.6
}
},
extraCssText:"box-shadow: 0 0 6px rgba(0,0,0,.1);"
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : [10, 10, 25, 29, 20, 22, 20, 22],
axisLine:{
show:false
},
axisTick:{
show:false
},
axisLabel:{
show:false
}
}
],
yAxis : [
{
type : 'value',
axisLine:{
show:false
},
axisLabel:{
show:false
},
axisTick:{
show:false
},
splitLine:{
show:false
},
backgroundColor:"#fff"
}
],
series : [
{
name:'Visitors',
type:'line',
stack: '',
areaStyle: {
opacity:0.4
},
data:[10, 10, 25, 29, 20, 22, 20, 22],
clipOverflow:'start',
itemStyle:{
color:pg.getColor('warning')
},
lineStyle:{
width:0
}
},
{
name:'New Visitors',
type:'line',
stack: '',
areaStyle: {
opacity:0.4
},
data:[0, 10, 8, 20, 15, 10, 15, 5],
clipOverflow:'start',
itemStyle:{
color:pg.getColor('danger')
},
lineStyle:{
width:0
}
}
]
}