import * as am4core from "@amcharts/amcharts4/core" ; import * as am4charts from "@amcharts/amcharts4/charts" ; import am4themes_animated from "@amcharts/amcharts4/themes/animated" ; am4core . useTheme ( am4themes_animated ) ; let chart = am4core . create ( "chartdiv" , am4charts . XYChart ) ; let data = [ ] ; chart . data = [ { "year" : "2014" , "income" : 23.5 , "expenses" : 21.1 } , { "year" : "2015" , "income" : 26.2 , "expenses" : 30.5 } , { "year" : "2016" , "income" : 30.1 , "expenses" : 34.9 } , { "year" : "2017" , "income" : 20.5 , "expenses" : 23.1 } , { "year" : "2018" , "income" : 30.6 , "expenses" : 28.2 } , { "year" : "2019" , "income" : 34.1 , "expenses" : 31.9 , "stroke" : "3,3" , "opacity" : 0.5 } ] ; let categoryAxis = chart . xAxes . push ( new am4charts . CategoryAxis ( ) ) ; categoryAxis . renderer . grid . template . location = 0 ; categoryAxis . renderer . ticks . template . disabled = true ; categoryAxis . renderer . line . opacity = 0 ; categoryAxis . renderer . grid . template . disabled = true ; categoryAxis . renderer . minGridDistance = 40 ; categoryAxis . dataFields . category = "year" ; let valueAxis = chart . yAxes . push ( new am4charts . ValueAxis ( ) ) ; valueAxis . tooltip . disabled = true ; valueAxis . renderer . line . opacity = 0 ; valueAxis . renderer . ticks . template . disabled = true ; valueAxis . min = 0 ; let columnSeries = chart . series . push ( new am4charts . ColumnSeries ( ) ) ; columnSeries . dataFields . categoryX = "year" ; columnSeries . dataFields . valueY = "expenses" ; columnSeries . tooltipText = "expenses: {valueY.value}" ; columnSeries . sequencedInterpolation = true ; columnSeries . defaultState . transitionDuration = 1500 ; columnSeries . fill = chart . colors . getIndex ( 4 ) ; let columnTemplate = columnSeries . columns . template ; columnTemplate . column . cornerRadiusTopLeft = 10 ; columnTemplate . column . cornerRadiusTopRight = 10 ; columnTemplate . strokeWidth = 1 ; columnTemplate . strokeOpacity = 1 ; columnTemplate . stroke = columnSeries . fill ; let desaturateFilter = new am4core . DesaturateFilter ( ) ; desaturateFilter . saturation = 0.5 ; columnTemplate . filters . push ( desaturateFilter ) ; columnTemplate . propertyFields . strokeDasharray = "stroke" ; columnTemplate . propertyFields . fillOpacity = "opacity" ; let desaturateFilterHover = new am4core . DesaturateFilter ( ) ; desaturateFilterHover . saturation = 1 ; let hoverState = columnTemplate . states . create ( "hover" ) ; hoverState . transitionDuration = 2000 ; hoverState . filters . push ( desaturateFilterHover ) ; let lineSeries = chart . series . push ( new am4charts . LineSeries ( ) ) ; lineSeries . dataFields . categoryX = "year" ; lineSeries . dataFields . valueY = "income" ; lineSeries . tooltipText = "income: {valueY.value}" ; lineSeries . sequencedInterpolation = true ; lineSeries . defaultState . transitionDuration = 1500 ; lineSeries . stroke = chart . colors . getIndex ( 11 ) ; lineSeries . fill = lineSeries . stroke ; lineSeries . strokeWidth = 2 ; let lineSeriesRange = categoryAxis . createSeriesRange ( lineSeries ) ; lineSeriesRange . category = "2018" ; lineSeriesRange . endCategory = "2019" ; lineSeriesRange . contents . strokeDasharray = "3,3" ; lineSeriesRange . locations . category = 0.5 ; let bullet = lineSeries . bullets . push ( new am4charts . CircleBullet ( ) ) ; bullet . fill = lineSeries . stroke ; bullet . circle . radius = 4 ; chart . cursor = new am4charts . XYCursor ( ) ; chart . cursor . behavior = "none" ; chart . cursor . lineX . opacity = 0 ; chart . cursor . lineY . opacity = 0 ;