How to change color of bar (Points) in chart office js?

Question

i want change the color of chart bar in office js. i am using Exce.run function. change the color of chart bars where show the value of chart.

`

                 Excel.run(function (context) {
                        var newSheet = context.workbook.worksheets.getItem("Dashboard");

                       var chartDataRange = newSheet.getRange("AF2:AK3");
                        let chartIncome = newSheet.charts.add(
                            Excel.ChartType.waterfall,
                            chartDataRange);

                        chartIncome.title.text = "Income Statement";
                        chartIncome.top = 105;
                        chartIncome.left = 10;
                        chartIncome.format.border.color = "white";



                        chartIncome.title.visible = false;
                        chartIncome.legend.visible = false;
                        chartIncome.axes.valueAxis.visible = false;
                        chartIncome.axes.categoryAxis.visible = true;

                        chartIncome.dataLabels.showValue = true;
                        chartIncome.gapWidth = 80;

                        chartIncome.axes.valueAxis.majorGridlines.visible = false;
                        chartIncome.axes.valueAxis.minorGridlines.visible = false;

                        chartIncome.series.getItemAt(0).format.fill.setSolidColor("#FF9933");
                        chartIncome.series.getItemAt(1).format.fill.setSolidColor("#1E4D57");


                        return context.sync();

                    })

I want change the color of bars in chart (Points) in office JavaScript? you can see attached image screenshort`. I am happy if someone helps!

Answer 1

To change the color of individual bars (points) in an Office JavaScript chart, you can use the points collection of the series and then set the format/fill property for each point. Here's an example based on your existing code:

Excel.run(function (context) {
var newSheet = context.workbook.worksheets.getItem("Dashboard");

var chartDataRange = newSheet.getRange("AF2:AK3");
let chartIncome = newSheet.charts.add(
    Excel.ChartType.waterfall,
    chartDataRange);

chartIncome.title.text = "Income Statement";
chartIncome.top = 105;
chartIncome.left = 10;
chartIncome.format.border.color = "white";

chartIncome.title.visible = false;
chartIncome.legend.visible = false;
chartIncome.axes.valueAxis.visible = false;
chartIncome.axes.categoryAxis.visible = true;

chartIncome.dataLabels.showValue = true;
chartIncome.gapWidth = 80;

chartIncome.axes.valueAxis.majorGridlines.visible = false;
chartIncome.axes.valueAxis.minorGridlines.visible = false;

// Change color of individual bars (points)
var series1Points = chartIncome.series.getItemAt(0).points;
series1Points.getItemAt(0).format.fill.setSolidColor("#FF9933"); // Color for the first bar
series1Points.getItemAt(1).format.fill.setSolidColor("#FF9933"); // Color for the second bar

var series2Points = chartIncome.series.getItemAt(1).points;
series2Points.getItemAt(0).format.fill.setSolidColor("#1E4D57"); // Color for the first bar
series2Points.getItemAt(1).format.fill.setSolidColor("#1E4D57"); // Color for the second bar

return context.sync();})