# Create a Bar-Line Chart

**URL:** <https://forum.inductiveautomation.com/t/create-a-bar-line-chart/92978>\
**Category:** Ignition\
**Tags:** reporting\
**Created:** [July 9, 2024, 8:25pm UTC](https://forum.inductiveautomation.com/t/create-a-bar-line-chart/92978 "2024-07-09T20:25:19Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rprice](https://avatars.discourse-cdn.com/v4/letter/r/35a633/32.png) [@rprice](https://forum.inductiveautomation.com/u/rprice)\
**Post date:** [July 9, 2024, 8:25pm UTC](https://forum.inductiveautomation.com/t/create-a-bar-line-chart/92978/1 "2024-07-09T20:25:19Z")

</div>

Hi,

I have a report generated with a bar chart displaying historical data. I would like to also display another historical tag, but with a line going over this bar chart. Is it possible to create something similar to the image below in an Ignition report?

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/8/d87600dade23cb5f72dfeecc940cede1a576c3ab.png)

---

<div class="post-metadata">

**Author:** ![drojas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/drojas/32/3403_2.png) [@drojas](https://forum.inductiveautomation.com/u/drojas)\
**Post date:** [July 9, 2024, 8:57pm UTC](https://forum.inductiveautomation.com/t/create-a-bar-line-chart/92978/2 "2024-07-09T20:57:26Z")

</div>

You are in luck as I had to do the same thing. Make sure your dataset contains the columns of data that you need (both the bar info and the line info). Then in the Property Inspector...go to the bottom and enable scripting then click on edit script. This should get you started in the right direction. Note that I needed a stacked bar to show the sum of 3 tags and a 4th tag that was the total...these are the series of the chart.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/3/935e2afa259ef782f16a3aefc228d9e82b739247.png)

```python
	axis = chart.getPlot().getDomainAxis()
	axis.setLowerMargin(0.00)
	axis.setUpperMargin(0.00)
	
	from org.jfree.chart.renderer.category import LineAndShapeRenderer
	from org.jfree.chart.renderer.category import StackedBarRenderer
	from org.jfree.chart.renderer.category import StandardBarPainter
	from org.jfree.data.category import DefaultCategoryDataset
	from java.awt import Color
	
	barPainter = StandardBarPainter()
	categoryRenderer = StackedBarRenderer()
	categoryRenderer.setBarPainter(barPainter)
	categoryRenderer.setShadowVisible(0)
	categoryRenderer.setSeriesPaint(0,Color(217,0,217))
	categoryRenderer.setSeriesPaint(1,Color(0,255,0))
	categoryRenderer.setSeriesPaint(2,Color(255,255,128))
	categoryRenderer.setSeriesPaint(3,Color(0,217,217))
			
	lineRenderer = LineAndShapeRenderer()
	lineRenderer.setSeriesPaint(0,Color(0,0,0))
	
	plot = chart.getPlot()
	ds = plot.getDataset()
	ds1 = DefaultCategoryDataset()
	ds2 = DefaultCategoryDataset()
	for row in ds.getRowKeys():
		for col in ds.getColumnKeys():
			data = ds.getValue(row,col)
			if row == "<the name of the line column data>":
				ds2.addValue(data,row,col)
			else:
				ds1.addValue(data,row,col)
			#end if
		#end for
	#end for
	plot.setDataset(0,ds2)
	plot.setRenderer(0,lineRenderer) #the line should be plotted first...
	plot.setDataset(1,ds1)
	plot.setRenderer(1,categoryRenderer) #while the bars should be second behind the line.

```

This is what the graph looked like...stacked with a black line (and square shape)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/e/5e8e290d2bd99f4c791a96dce3ff1dfe47915246.png)

---

<div class="post-metadata">

**Author:** ![rprice](https://avatars.discourse-cdn.com/v4/letter/r/35a633/32.png) [@rprice](https://forum.inductiveautomation.com/u/rprice)\
**Post date:** [July 10, 2024, 2:14pm UTC](https://forum.inductiveautomation.com/t/create-a-bar-line-chart/92978/3 "2024-07-10T14:14:35Z")

</div>

Is there any way to plot the line on a different axis than the bars? Ideally I'd like both to have an automatic range, but separately (my bar chart is often 200-400+, while my line is strictly 0-100). I've found JFreeChart examples with multiple Y-axes online, but I couldn't get the code to work.

```python
	plot.setDataset(0,ds2)
	plot.setDataset(1,ds1)
	
	plot.setRenderer(0,lineRenderer)
	plot.setRenderer(1,categoryRenderer) 
	
	plot.setRangeAxis(0, NumberAxis())
	plot.setRangeAxis(1, NumberAxis())			
	
	plot.mapDatasetToRangeAxis(0, 0)
	plot.mapDatasetToRangeAxis(1, 1)

```

Any ideas?

---

<div class="post-metadata">

**Author:** ![rprice](https://avatars.discourse-cdn.com/v4/letter/r/35a633/32.png) [@rprice](https://forum.inductiveautomation.com/u/rprice)\
**Post date:** [July 10, 2024, 6:28pm UTC](https://forum.inductiveautomation.com/t/create-a-bar-line-chart/92978/4 "2024-07-10T18:28:03Z")

</div>

I know this isn't the best / most efficient solution (I definitely don't fully understand all of the JFree functions), but for future reference this code was able to get the results I was looking for:

```python
    plot.setDataset(0,ds2)
	plot.setDataset(1,ds1)			
	plot.setRenderer(0,lineRenderer)
	plot.setRenderer(1,categoryRenderer) 
			
	from org.jfree.chart.axis import NumberAxis
	barAxis = NumberAxis(plot.getRangeAxis(0).getLabel())
	lineAxis = NumberAxis()
	plot.setRangeAxis(0, barAxis)
	plot.mapDatasetToRangeAxis(1, 0)
	lineAxis.setRange(0, 100)
	plot.setRangeAxis(1, lineAxis)
	plot.mapDatasetToRangeAxis(0, 1)

```