# Bar(chart) with % of different values in Canvas. How?
**URL:** https://discuss.elastic.co/t/bar-chart-with-of-different-values-in-canvas-how/146936
**Category:** Kibana
**Created:** [September 1, 2018, 10:37am UTC](https://discuss.elastic.co/t/bar-chart-with-of-different-values-in-canvas-how/146936 "2018-09-01T10:37:52Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@GGorast](https://discuss.elastic.co/u/GGorast)
#### Post date: [September 1, 2018, 10:37am UTC](https://discuss.elastic.co/t/bar-chart-with-of-different-values-in-canvas-how/146936/1 "2018-09-01T10:37:52Z")
I need to make a pie-like bar(chart) that will show different % of 100% of the values that I choose and color it differently. See the image for explanation.
Tnx
---
### Author:  [@Catherine\_Liu](https://discuss.elastic.co/u/Catherine_Liu)
#### Post date: [September 4, 2018, 6:11pm UTC](https://discuss.elastic.co/t/bar-chart-with-of-different-values-in-canvas-how/146936/2 "2018-09-04T18:11:15Z")
We currently don't have any elements that can achieve this out the box. You can build your own custom function to render the chart you described. It would be similar to our `pie` element, but you'll want to create a render function that displays it as a bar instead of a pie chart. You can refer to our guides on making custom functions if you want to go down that route: [http://canvas.elastic.co/stories/index.html](http://canvas.elastic.co/stories/index.html).
It took a bit of hacking around with the plot element, but I created something similar using `demodata` as my datasource.
Essentially, you have to make a stacked horizontal bar chart with the labels turned off and a bunch of markdown elements for the labels. It'll take a lot of manual positioning, and it's not very dynamic this way, but it gets the job done. Below are the expressions I used for each element.
### Bar Chart
```auto
filters
| demodata
| staticColumn "total_docs" value={rowCount}
| ply by="state" fn={math {string {rowCount} " / " {getCell "total_docs"}}}
| pointseries x="value" y=0 color="state"
| plot
defaultStyle={seriesStyle lines=0 bars="0.75" points=0 horizontalBars=true stack=true} legend=false xaxis=false yaxis=false
seriesStyle={seriesStyle bars="0.75" points=0 horizontalBars=true label="done" color="#f5cc5d"}
seriesStyle={seriesStyle bars="0.75" points=0 horizontalBars=true label="running" color="#e74b8b"}
seriesStyle={seriesStyle bars="0.75" points=0 horizontalBars=true label="start" color="#4fbf48"}
| render
```
### Series Labels
```auto
filters
| demodata
| staticColumn "total_docs" value={rowCount}
| ply by="state" fn={math {string {rowCount} " / " {getCell "total_docs"}}}
| markdown {getCell "state" row=0}
font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=36 align="center" color="#000000" weight="normal" underline=false italic=false}
```
```auto
filters
| demodata
| staticColumn "total_docs" value={rowCount}
| ply by="state" fn={math {string {rowCount} " / " {getCell "total_docs"}}}
| markdown {getCell "state" row=1}
font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=36 align="center" color="#000000" weight="normal" underline=false italic=false}
```
```auto
filters
| demodata
| staticColumn "total_docs" value={rowCount}
| ply by="state" fn={math {string {rowCount} " / " {getCell "total_docs"}}}
| markdown {getCell "state" row=2}
font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=36 align="center" color="#000000" weight="normal" underline=false italic=false}
```
### Percentage Labels
```auto
filters
| demodata
| staticColumn "total_docs" value={rowCount}
| ply by="state" fn={math {string {rowCount} " / " {getCell "total_docs"}}}
| markdown {getCell "value" row=0 | formatnumber "0.0%"}
font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=36 align="center" color="#000000" weight="normal" underline=false italic=false}
```
```auto
filters
| demodata
| staticColumn "total_docs" value={rowCount}
| ply by="state" fn={math {string {rowCount} " / " {getCell "total_docs"}}}
| markdown {getCell "value" row=1 | formatnumber "0.0%"}
font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=36 align="center" color="#000000" weight="normal" underline=false italic=false}
```
```auto
filters
| demodata
| staticColumn "total_docs" value={rowCount}
| ply by="state" fn={math {string {rowCount} " / " {getCell "total_docs"}}}
| markdown {getCell "value" row=2 | formatnumber "0.0%"}
font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=36 align="center" color="#000000" weight="normal" underline=false italic=false}
```
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [October 2, 2018, 6:11pm UTC](https://discuss.elastic.co/t/bar-chart-with-of-different-values-in-canvas-how/146936/3 "2018-10-02T18:11:16Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.