[SOLVED] change color of line zoomcharts

change color of line zoomcharts

In this link there is an example of pie chart created by Zoomcharts. To change the color of label outside of the slice I can use styleFunction to modify slice option.

styleFunction: function (slice, data) {
  slice.label.textStyle.fillColor = 'red';
},

This only changes the color of letter. I would like to change color of line that connects slice to its label, too. Thanks.

Solution

You can try with this

 slice: {
          connectorStyle: {
            lineColor: 'red' // Color you to give to the line of the chart connection
          }
        }

for more you can check in

https://zoomcharts.com/developers/en/pie-chart/api-reference/settings/slice/connectorStyle.html

Hope you will get the answer.

Check the solution

    var data = {
        "subvalues": [
        {
            "value": 50, "name": "Apples", "subvalues": [
               { "value": 25, "name": "Red apples" },
               { "value": 15, "name": "Yellow apples" },
               { "value": 10, "name": "Green apples" }]
        },
        {
            "value": 30, "name": "Oranges", "subvalues": [
               { "value": 10, "name": "Big oranges" },
               { "value": 9, "name": "Small oranges" },
               { "value": 7, "name": "Green oranges" },
               { "value": 4, "name": "Pink oranges" }]
        },
        {
            "value": 20, "name": "Grapes", "subvalues": [
               { "value": 15, "name": "Sweet grapes" },
               { "value": 5, "name": "Sour grapes" }]
        },
        { "value": 50, "name": "Vegetables", style: { fillColor: "yellow" } }]
    };

    var t = new PieChart({
        container: document.getElementById("demo"),
        area: { height: 350 },
        data: { preloaded: data },
        slice: {
            styleFunction: function (slice, data) {
            slice.label.textStyle.fillColor = 'red';

          },
          connectorStyle: {
          lineColor: 'red'
          }
        }
    });

<script src="https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"></script>

<div id="demo"></div>