Bar Charts filled by Node is transparent and the bar display only on hover

Question

Here is a example of what I'm trying to do : http://jsfiddle.net/4pb8uzt8/13/

$scope.myJson = {
    'plot': {
    'styles': ['#fff', 'red', 'pink']
  },
  'scale-x': {
    'values': ['white', 'red', 'pink']
  },
  'type': 'bar',
  'series': [{
    'text': 'Product History Color',
    'values': [2, 6, 8]
  }]
}

I'm using Zingchart (2.3.0) with AngularJs (1.4.7) and Ionic (1.1.0)

So far, all the charts in my app are working fine. But when I tried to customize the bar fills I got a weird behavior. Bars are invisible, and when the mouse is hover the bar is displayed. Tried to figure out where it was coming from but found nothing strange.

Any Idea ? I used the exact same json than shown in the JSFiddle, it's literally a copy-paste.

Transparent Bars

Thank you for you time.

Update

The attribute fill: url(#...) is not recognized in my AngularJs app, as I'm not in a root url. Example app/graph, it will work only if I add the state 'graph' into the attribute like this :

url(graph#...) 

My question is then, is there a way to achieve what I'm trying to do without using gradients ?

I would like to avoid adding a tag for each state of my app which will resolve the issue.

Answer 1

As Z.Ben has noted in the comments, gradients (SVG) not being accessible looks to be an issue with ZingChart and routing with Angular. I'll have this issue looked at to see if we can find a resolution for it. (I'm on the ZingChart team).

As for interim solutions there are a couple ways to go about this.

1. Change the render type

ZingChart renders charts using SVG by default. By switching to the alternate render 'canvas', you should be able to render the gradients no problem in your angular app since canvas renders the gradients directly on the canvas element.

Simply pass a render object into your directive:

$scope.myRender = {
  output :'canvas'
};
<zingchart id="chart-1" zc-render="myRender" zc-values="myValues"></zingchart>

2. Set your colors using rules

Instead of using the 'styles' property which adds gradients by default, utilize rules to target specific nodes within each series.

$scope.myJson = {
    'plot': {
    'rules': [
      {'rule': '%i == 0', 'backgroundColor': 'white'},
      {'rule': '%i == 1', 'backgroundColor': 'red'},
      {'rule': '%i == 2', 'backgroundColor': 'pink'},
    ]
  },
  'scale-x': {
    'values': ['white', 'red', 'pink']
  },
  'type': 'bar',
  'series': [{
    'text': 'Product History Color',
    'values': [2, 6, 8]
  }]
}

http://www.zingchart.com/docs/basic-elements/create-javascript-rules/

Either of these solutions should work.