javascriptjqueryplottable

How to use your own color palette in Plottable.js pie chart

I have the following code:

var scale = new Plottable.Scales.Linear();
var colorScale = new Plottable.Scales.Color();
var data = [{ val: 1 }, { val: 2 }, { val: 3 },
                { val: 4 }, { val: 5 }, { val: 6 }];

var plot = new Plottable.Plots.Pie()
      .addDataset(new Plottable.Dataset(data))
      .sectorValue(function(d) { return d.val; }, scale)
        .attr("fill", function(d) { return d.val; }, colorScale)
          .renderTo("svg#example");

          window.addEventListener("resize", function() {
                plot.redraw();
});
<!doctype html>
<html>
<head>

    <!-- Later add new CSS to define the placement of the legend, fold change etc -->
</head>




<body>
    <!-- Display the sliding bar -->

     <svg width="100%" height="100%" id="example"></svg>

    <!-- Act on the thing -->
    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/>

    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/>


</body>
</html>

If you run the code you'll notice that the pie chart is generated with the default colors.

What I want to do is to use my own color palette:

var tableau20 = ['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728', '#9467BD', '#8C564B', '#CFECF9', '#7F7F7F', '#BCBD22', '#17BECF'];

How can I do that?

   var colorScale = new Plottable.Scales.Color(tableau20);
Solution

  • try range()

    var scale = new Plottable.Scales.Linear();
var colorScale = new Plottable.Scales.Color();
colorScale.range(['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728', '#9467BD', '#8C564B', '#CFECF9', '#7F7F7F', '#BCBD22', '#17BECF']);
var data = [{ val: 1 }, { val: 2 }, { val: 3 },
                { val: 4 }, { val: 5 }, { val: 6 }];

var plot = new Plottable.Plots.Pie()
      .addDataset(new Plottable.Dataset(data))
      .sectorValue(function(d) { return d.val; }, scale)
        .attr("fill", function(d) { return d.val; }, colorScale)
          .renderTo("svg#example");

          window.addEventListener("resize", function() {
                plot.redraw();
});
    <!doctype html>
<html>
<head>

    <!-- Later add new CSS to define the placement of the legend, fold change etc -->
</head>




<body>
    <!-- Display the sliding bar -->

     <svg width="100%" height="100%" id="example"></svg>

    <!-- Act on the thing -->
    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/>

    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/>


</body>
</html>