# Bar Chart Legend Issue

**URL:** <https://forum.inductiveautomation.com/t/bar-chart-legend-issue/16394>\
**Category:** Ignition\
**Created:** [December 21, 2017, 5:49pm UTC](https://forum.inductiveautomation.com/t/bar-chart-legend-issue/16394 "2017-12-21T17:49:40Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![brian.mcenulty](https://avatars.discourse-cdn.com/v4/letter/b/b77776/32.png) [@brian.mcenulty](https://forum.inductiveautomation.com/u/brian.mcenulty)\
**Post date:** [December 21, 2017, 5:49pm UTC](https://forum.inductiveautomation.com/t/bar-chart-legend-issue/16394/1 "2017-12-21T17:49:40Z")

</div>

I have a bar chart component that has a client tag bound to the background color of the chart itself. Using a propertyChange script, I’m changing the background color of the bar chart legend to the same color as the background of the chart (for some reason these aren’t the same by default). The issue I run into is that this works just fine initially, but as soon as the data is updated it changes back to the default white background color. I’m a little confused as to why this happens when I only set the color once. Here’s the propertyChange script.

```auto
if event.propertyName == "componentRunning"
	chart = event.source.getChart()
	plot = chart.getPlot()
	plotColor = plot.getBackgroundPaint()
	legend = chart.getLegend()
	legend.setBackgroundPaint(plotColor)

```

---

<div class="post-metadata">

**Author:** ![jpark](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jpark](https://forum.inductiveautomation.com/u/jpark)\
**Post date:** [December 21, 2017, 6:22pm UTC](https://forum.inductiveautomation.com/t/bar-chart-legend-issue/16394/2 "2017-12-21T18:22:45Z")

</div>

instead of componentRunning try using “data” or whatever your dataset is called.

---

<div class="post-metadata">

**Author:** ![brian.mcenulty](https://avatars.discourse-cdn.com/v4/letter/b/b77776/32.png) [@brian.mcenulty](https://forum.inductiveautomation.com/u/brian.mcenulty)\
**Post date:** [December 21, 2017, 6:23pm UTC](https://forum.inductiveautomation.com/t/bar-chart-legend-issue/16394/3 "2017-12-21T18:23:47Z")

</div>

I’ve done this but as the data updates the legend color flashes momentarily from white to grey (the color I’m trying to set it to). Ideally I’d like to just set the color and have it stay that color without flashing.

---

<div class="post-metadata">

**Author:** ![jpark](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jpark](https://forum.inductiveautomation.com/u/jpark)\
**Post date:** [December 21, 2017, 6:36pm UTC](https://forum.inductiveautomation.com/t/bar-chart-legend-issue/16394/4 "2017-12-21T18:36:41Z")

</div>

> [@brian.mcenulty](#):
>
> plot = chart.getPlot()  
> plotColor = plot.getBackgroundPaint()  
> legend = chart.getLegend()  
> legend.setBackgroundPaint(plotColor)

Switch over the the regular chart and set it to display bars. Then put your code in the configureChart extension function.

---

<div class="post-metadata">

**Author:** ![brian.mcenulty](https://avatars.discourse-cdn.com/v4/letter/b/b77776/32.png) [@brian.mcenulty](https://forum.inductiveautomation.com/u/brian.mcenulty)\
**Post date:** [December 21, 2017, 6:41pm UTC](https://forum.inductiveautomation.com/t/bar-chart-legend-issue/16394/5 "2017-12-21T18:41:45Z")

</div>

I might be missing something but I’m not seeing a “Bar” chart type for the standard chart component. Part of the reason I’m currently using the bar chart component is that I want horizontal, layered bars. Is this available on any other components? If not is there any plan to add the configureChart extension function to all chart components in the future?

---

<div class="post-metadata">

**Author:** ![jpark](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jpark](https://forum.inductiveautomation.com/u/jpark)\
**Post date:** [December 21, 2017, 6:55pm UTC](https://forum.inductiveautomation.com/t/bar-chart-legend-issue/16394/6 "2017-12-21T18:55:00Z")

</div>

Can you post a screenshot of the bar chart format you want?

---

<div class="post-metadata">

**Author:** ![brian.mcenulty](https://avatars.discourse-cdn.com/v4/letter/b/b77776/32.png) [@brian.mcenulty](https://forum.inductiveautomation.com/u/brian.mcenulty)\
**Post date:** [December 21, 2017, 7:02pm UTC](https://forum.inductiveautomation.com/t/bar-chart-legend-issue/16394/7 "2017-12-21T19:02:32Z")

</div>

Yeah you bet, here’s what I currently have.

 ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/3/3938903e3d6ca61d932ba4eb2e1e4f9d69f73972.png)

---

<div class="post-metadata">

**Author:** ![jpark](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jpark](https://forum.inductiveautomation.com/u/jpark)\
**Post date:** [December 21, 2017, 7:17pm UTC](https://forum.inductiveautomation.com/t/bar-chart-legend-issue/16394/8 "2017-12-21T19:17:33Z")

</div>

Put a regular chart and set the chart type to Category Chart.  
Create a category X-Axes and set the x-axes to it.

Then put

```auto
	from java.awt import Color
	
	plot = chart.getPlot()
	plotColor = plot.getBackgroundPaint()
	legend = chart.getLegend()
	legend.setBackgroundPaint(plotColor)
	
	renderer = plot.getRenderer()
	

	renderer.setSeriesBarWidth(0, 1.5)
	renderer.setSeriesBarWidth(1, .5)

```

---

<div class="post-metadata">

**Author:** ![brian.mcenulty](https://avatars.discourse-cdn.com/v4/letter/b/b77776/32.png) [@brian.mcenulty](https://forum.inductiveautomation.com/u/brian.mcenulty)\
**Post date:** [December 21, 2017, 9:52pm UTC](https://forum.inductiveautomation.com/t/bar-chart-legend-issue/16394/9 "2017-12-21T21:52:11Z")

</div>

That worked perfectly, thank you! It took me a little bit of experimenting with the Chart component to get it all configured correctly, but I was able to create a chart that looked identical to the one I posted previously with the functionality I was after.