Column chart Implemention

Question

Hi team, 
 
 i have requirement to implement of column chart to show number of cases created with in the year, 
 by highlighting the current month with different color. 
 i couldn't able to complete logic here a!chartseries (color:?), 
 a!localVariables(
 local!casescountbyyear: { 4, 5, 6, 7, 8,5,7,8,3,2,8,9},
 {
 a!cardLayout(
 contents: {
 a!columnChartField(
 categories: {
 "Jan",
 "Feb",
 "Mar",
 "Apr",
 "May",
 "Jun",
 "Jul",
 "Aug",
 "Sep",
 "Oct",
 "Nov",
 "Dec"
 },
 series: {
 a!chartSeries(
 label: "Cases",
 data: local!casescountbyyear
 )
 },
 showLegend: false,
 showTooltips: true,
 allowImageDownload: true,
 colorScheme: a!colorSchemeCustom(colors: { "#3d85c6", "#9d225f", })
 ),
 
 },
 height: "AUTO",
 style: "TRANSPARENT",
 marginBelow: "STANDARD",
 showBorder: true
 )
 }
) 
 how can show the current month in the column chart with diffrent color

Stefan Helzle · Accepted Answer

Get some inspiration from this code snippet. The trick is to create two separate chart series with different colors and stack them. 
 I did not make it dynamic, leaving that up to you. 
 
 a!localVariables(
 local!casescountbyyear: { 4, 5, 6, 7, 8,5,7,8,3,2,8,9},
 {
 a!cardLayout(
 contents: {
 a!columnChartField(
 categories: {
 "Jan",
 "Feb",
 "Mar",
 "Apr",
 "May",
 "Jun",
 "Jul",
 "Aug",
 "Sep",
 "Oct",
 "Nov",
 "Dec"
 },
 series: {
 a!chartSeries(
 label: "Cases",
 data: a!update(local!casescountbyyear, 3, null),
 color: "#3d85c6"
 ),
 a!chartSeries(
 label: "Cases",
 data: {repeat(2, null), index(local!casescountbyyear, 3)},
 color: "#9d225f"
 ),
 },
 showLegend: false,
 showTooltips: true,
 allowImageDownload: true,
 colorScheme: a!colorSchemeCustom(colors: { "#3d85c6", "#9d225f", }),
 stacking: "NORMAL"
 ),

},
 height: "AUTO",
 style: "TRANSPARENT",
 marginBelow: "STANDARD",
 showBorder: true
 )
 }
)

Column chart Implemention

Top Replies