Bar(chart) with % of different values in Canvas. How?

Elastic Stack Kibana
2

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.

It took a bit of hacking around with the plot element, but I created something similar using demodata as my datasource.

14%20AM
Screen Shot 2018-09-04 at 10.58.14 AM.png1029×218 5.55 KB

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

24%20AM
Screen Shot 2018-09-04 at 10.59.24 AM.png1041×142 4.33 KB 

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

26%20AM

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}

32%20AM

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}

38%20AM

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

31%20AM

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}

34%20AM

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}

37%20AM

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}
1 Like