Colored Bar Chart
+It is possible to assign a different color to each bar of a bar +chart. You neeed to create a DataTable with a column having a +style role and define the color for each row. Here we create a +chart that uses a unique color for each bar that representing the year +of forest loss. The chart has a one-to-one correspondence with the map +palette - making it a very useful tool in interpretation of the spatial +and temporal aspects of the trend.
+
+
+
+
++Colored BarChart +
+// Example script showing how to create a bar chart
+// with each bar having a different color.
+
+// We create a map of forest loss with each pixel
+// colored accoridng to the year in which the loss occurred.
+// The chart displays the total loss in the region by year
+// with the color or the bar matching the map.
+
+// Select a region
+var geometry = ee.Geometry.Polygon([[
+ [-66.31185532393005, -8.92550265818768],
+ [-66.31185532393005, -9.687127927480695],
+ [-65.2104759293988, -9.687127927480695],
+ [-65.2104759293988, -8.92550265818768]
+]]);
+
+// Get the Hansen Global Forest Change dataset
+// This dataset is updated yearly, so we get the latest version.
+var gfc2022 = ee.Image('UMD/hansen/global_forest_change_2022_v1_10');
+
+var lossYear = gfc2022.select(['lossyear']);
+
+// The lossYear image contains pixel values from 0 to 22
+// indicating the year in which the loss occurred
+
+// We visualize this layer on the map.
+var palette = [
+ '0083ba', '#4394b6', '#5ca5b2', '#74b6ad', '#8dc8a9',
+ '#a5d9a5', '#b7e2a8', '#c7e8ad', '#d7efb2', '#e7f5b7',
+ '#f7fcbc', '#fff7b6', '#fee8a4', '#fed890', '#fec980',
+ '#fdba6e', '#fba75e', '#f48b51', '#ed6e43', '#e5522a',
+ '#de3519', '#d7191c'];
+
+var lossYearVis = {
+ min: 0,
+ max: 22,
+ palette: palette
+}
+// Visualize the loss on the map
+Map.centerObject(geometry, 10);
+Map.setOptions('SATELLITE');
+Map.addLayer(geometry, {}, 'Selected Region', true, 0.6);
+Map.addLayer(lossYear, lossYearVis, 'Loss Year');
+
+// Create an area image and convert to Hectares
+var areaImage = ee.Image.pixelArea().divide(1e5);
+
+// Add the band containing yearly loss
+var areaImageWithYear = areaImage.addBands(lossYear);
+
+var areas = areaImageWithYear.reduceRegion({
+ reducer: ee.Reducer.sum().group({
+ groupField: 1,
+ groupName: 'year'
+ }),
+ geometry: geometry,
+ scale: 30,
+ maxPixels: 1e10
+});
+
+var yearAreas = ee.List(areas.get('groups'));
+
+// Process results to extract the areas and
+// create a list
+var yearAreasList = ee.List(yearAreas.map(function(item) {
+ var areaDict = ee.Dictionary(item);
+ var yearString = ee.Number(areaDict.get('year')).format('20%02d');
+ var area = ee.Number(
+ areaDict.get('sum'));
+ return ee.List([yearString, area])
+}));
+
+print('Year Areas', yearAreasList);
+
+
+// We create a list of rows in the DataTable format
+var rowList = yearAreasList.map(function(item) {
+ var year = ee.List(item).get(0);
+ var x = ee.String('Date(')
+ .cat(year)
+ .cat(', ')
+ .cat('0')
+ .cat(', ')
+ .cat('1')
+ .cat(ee.String(')'))
+
+ var y = ee.List(item).get(1);
+ // We will assign the color to each year from the palette
+ var color = ee.List(palette).get(yearAreasList.indexOf(item));
+ var rowDict = {
+ c: [{v: x}, {v: y}, {v: color}]
+ };
+ return rowDict;
+});
+
+print('Rows', rowList);
+
+// Create the DataTable
+rowList.evaluate(function(rowListClient) {
+ var dataTable = {
+ cols: [
+ {id: 'x', type: 'date'},
+ {id: 'y', label: 'area', type: 'number'},
+ {id: 'style', label: 'Style', type: 'string', role: 'style'},
+
+ ],
+ rows: rowListClient
+ };
+
+ var options = {
+ title: 'Yearly Forest Loss',
+ vAxis: {
+ title: 'Area (Hectares)',
+ },
+ hAxis: {
+ title: 'Year',
+ gridlines: {color: 'transparent'}
+ },
+ legend: {position:'none'}
+ };
+
+ var chart = ui.Chart(dataTable, 'ColumnChart', options);
+ // Add the chart on the map
+ var chartPanel = ui.Panel({
+ style: {width: '400px', position: 'middle-right'}
+ });
+ chartPanel.add(chart);
+ Map.add(chartPanel);
+});