CODEWITHSUNDEEP
javascriptd3.jsxcharts
Philip Tenn
Philip Tenn

Reputation: 6073

Color Bar Graph in xcharts

Has anyone changed the colors of the bar graph in xcharts? Any idea how to do so?

The plain navy blue is so boring:

http://tenxer.github.io/xcharts/examples/

Thanks,

Philip

Upvotes: 1

Views: 557

Answers (2)

Dheeraj
Dheeraj

Reputation: 342

In Xchart we can add color of the bar using seriesColors method.

CategoryChart chart = new CategoryChartBuilder()
            .yAxisTitle("ABC Title")
            .theme(Styler.ChartTheme.GGPlot2).build();

    chart.getStyler().setSeriesColors(new Color[]{Color.blue, Color.cyan, Color.LIGHT_GRAY, new Color(224,43,54), new Color(24,43,124)});

Upvotes: 1

Andrew Reid
Andrew Reid

Reputation: 38171

Based on the documentation it does not appear the library has built in methods for styling the chart, but rather:

The best way to style charts is to start with the included stylesheet, or use your browser's element inspector to see each elements CSS class selectors that are available to use.

Each series has a class: .color0 through .colorN, so you could use the css to set the properties of each rectangle:

var data = {
  "xScale": "ordinal",
  "yScale": "linear",
  "main": [
    {
      "className": ".pizza",
      "data": [
        {
          "x": "Pepperoni",
          "y": 4
        },
        {
          "x": "Cheese",
          "y": 8
        }
      ]
    }
  ]
};
var myChart = new xChart('bar', data, '#chart');
.color0 rect {
  fill: orange !important;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xcharts/0.3.0/xcharts.js"> </script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/xcharts/0.3.0/xcharts.css">

<figure style="width: 400px; height: 300px;" id="chart"></figure>

Alternatively, you could use a d3 selection to alter the colors:

d3.selectAll(".color0").selectAll("rect").style("fill","orange");

var data = {
  "xScale": "ordinal",
  "yScale": "linear",
  "main": [
    {
      "className": ".pizza",
      "data": [
        {
          "x": "Pepperoni",
          "y": 4
        },
        {
          "x": "Cheese",
          "y": 8
        }
      ]
    }
  ]
};
var myChart = new xChart('bar', data, '#chart');

d3.selectAll(".color0").selectAll("rect").style("fill","orange");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xcharts/0.3.0/xcharts.js"> </script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/xcharts/0.3.0/xcharts.css">

<figure style="width: 400px; height: 300px;" id="chart"></figure>

If you just want all rectangles to be a certain color, then d3.selectAll("rect").style("fill","color") will work.

Upvotes: 1

Related Questions