SpreadJS Chart Pie Slice Color

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

  • Posted 31 July 2018, 7:10 am EST

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

    Replied 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels