Set background for each quadrant in AnyChart polar charts

Question

I am creating a polar chart using AnyChart

anychart.onDocumentReady(function () {
    // create polar chart
    var chart = anychart.polar();

    var columnSeries = chart.column([
        {x: 'A', value: 28.7},
        {x: 'B', value: 19},
        {x: 'C', value: 17.7},       
        {x: 'D', value: 34.7}
    ]);

    // set series name
    columnSeries.name('Percentage');

    // set title settings
    chart.title()
            .enabled(true)
            .text('Test')
            .padding({bottom: 20});

    // disable y-axis
    chart.yAxis(false);

    // set value prefix for tooltip
    chart.tooltip().valuePrefix('%');

    chart.sortPointsByX(true);

    // set x-scale
    chart.xScale('ordinal');

    // set chart container id
    chart.container('container');

    // initiate chart drawing
    chart.draw();
});

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-bundle.min.js"></script>
<div id="container"></div>

Is it possible to add a background for each quadrant?

score 1 · Accepted Answer · answered Jun 12 '18 at 09:48

You can do that by assigning a palette of the xGrid:

chart.xGrid().palette(["red 0.5", "green 0.5", "blue 0.5", "cyan 0.5"]);

See a snippet:

anychart.onDocumentReady(function () {
    // create polar chart
    var chart = anychart.polar();

    var columnSeries = chart.column([
        {x: 'A', value: 28.7},
        {x: 'B', value: 19},
        {x: 'C', value: 17.7},       
        {x: 'D', value: 34.7}
    ]);

    // set series name
    columnSeries.name('Percentage');

    // set title settings
    chart.title()
            .enabled(true)
            .text('Test')
            .padding({bottom: 20});

    // disable y-axis
    chart.yAxis(false);

    // set value prefix for tooltip
    chart.tooltip().valuePrefix('%');

    chart.sortPointsByX(true);

    chart.xGrid().palette(["red 0.5", "green 0.5", "blue 0.5", "cyan 0.5"]);

    // set x-scale
    chart.xScale('ordinal');

    // set chart container id
    chart.container('container');

    // initiate chart drawing
    chart.draw();
});

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-bundle.min.js"></script>
<div id="container"></div>

could you please answer this as well? https://stackoverflow.com/questions/56052829/setting-maximum-and-minimum-xscale-values-in-anychart-graph-results-in-an-except — webster, May 09 '19 at 06:26

score 0 · Answer 2 · answered Jun 12 '18 at 08:17

0

It is very flexible, you can just set the fill property on your data definition, e.g:

var columnSeries = chart.column([
    {x: 'A', value: 28.7, fill: "#990000"},
    {x: 'B', value: 19, fill: "#009900"},
    {x: 'C', value: 17.7, fill: "#000099"},       
    {x: 'D', value: 34.7, fill: "#990099"}
]);

For more info, please refer to the docs

answered Jun 12 '18 at 08:17

Victor Lia Fook

420
4
15

I was not looking for `fill`. What I need is to set the background for each quadrant. – webster Jun 12 '18 at 08:42
If you mean the background as the chart's property, I'm afraid there is no way in the API to achieve it. The BG is a chart's property and there is nothing to do with the data and its formatting/distribution... Not sure though. – Victor Lia Fook Jun 12 '18 at 09:44
the problem is that there is no such thing as a quadrant in these polar charts. It is just the distribution for a 4-valued series – Victor Lia Fook Jun 12 '18 at 09:46
1

@VictorLiaFook FYI - you can do that with xGrid palette, see the answer above – AnyChart Support Jun 12 '18 at 11:22
Thats cool @AnyChartSupport. But what about the background? After all, xGrid is about the grid, we can still set the background, and this one we can't really set like that, can we? – Victor Lia Fook Jun 12 '18 at 11:38
1

@webster does the solution provided above meet your requirements to set background for every quadrant? Background of the chart fill not only all quadrants, but also the rest space of chart's container (outside polar). – AnyChart Support Jun 13 '18 at 03:27
@AnyChartSupport : Your answer was working perfectly for me! – webster Jun 13 '18 at 09:30

Set background for each quadrant in AnyChart polar charts

2 Answers2