SpreadJS Chart Pie Slice Color

SpreadJS Chart Pie Slice Color

Posted by: martin.mayr on 31 July 2018, 7:10 am EST

• 

  martin.mayr

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 31 July 2018, 7:10 am EST

  In SpreadJS I can create a Pie chart.
  
  Can I change the color of a slice?

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 1 August 2018, 12:56 am EST

  Hello,

  You can create a PIE chart with SpreadJS and also change the color of the Pie as desired. Here is the code to do that:

  
  function initSpread(spread) {
              spread.suspendPaint();
              var sheets = spread.sheets;
              initPieSheet(sheets[0]);
              initPieChart(sheets[0]);
              initDoughnutSheet(sheets[1]);
              initDoughnutChart(sheets[1]);
              spread.resumePaint();
          }
  
          function initPieSheet(sheet) {
              sheet.name('Pie');
              //prepare data for chart
              var dataArray = [
                  ["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'],
                  ["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246]
              ];
              sheet.setArray(0, 0, dataArray);
  
          }
          function initPieChart(sheet) {
              var chart = sheet.charts.add('PieChart1', GC.Spread.Sheets.Charts.ChartType.pie, 0, 50, 600, 400, "A1:H2");
              showPieDataLabels(chart);
              changePieStyle(chart);
              changeChartTitle(chart);
          }
  
          function changeChartTitle(chart) {
              var title = chart.title();
              title.text = "Browser Market Share";
              title.fontSize = 18;
              chart.title(title);
          }
  
          // show dataLabels
          function showPieDataLabels(chart) {
              var dataLabels = chart.dataLabels();
              dataLabels.showValue = true;
              dataLabels.showSeriesName = false;
              dataLabels.showCategoryName = true;
              dataLabels.format = "0.00%";
              var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
              dataLabels.position = dataLabelPosition.bestFit;
              chart.dataLabels(dataLabels);
          }
  
          //change pie color
          function changePieStyle(chart) {
              chart.legend({ position: GC.Spread.Sheets.Charts.LegendPosition.right });
              var seriesItem = chart.series().get(0);
              seriesItem.backColor = 'rgb(91, 155, 213),rgb(237, 125, 49),rgb(165, 165, 165),rgb(255, 192, 0),rgb(68, 114, 196),rgb(112, 173, 71),rgb(255,20,128)';
              seriesItem.border.width = 3;
              chart.series().set(0, seriesItem);
          }
  
  

  Thanks,
  
  Deepak Sharma