Node-filled bar charts are transparent, and the bar only appears when hovering

Question

Here is an 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 am using Zingchart (2.3.0) with AngularJs (1.4.7) and Ionic (1.1.0)

So far, all the graphs in my application are working fine. But when I tried to adjust the filling of the bar, I got strange behavior. The bars are invisible, and when the mouse hovers, a panel is displayed. I tried to find out where he came from, but did not find anything strange.

Any idea? I used the same json as in JSFiddle, this is literally copying.

Transparent bars

Thank you for your time.

Update

The fill: url(#...) attribute fill: url(#...) not recognized in my AngularJs application since I am not in the root url. An app / graph example, it will only work if I add a “graph” state to an attribute like this:

 url(graph#...) 

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

I would like not to add a tag for each state of my application that will solve the problem.

Answer 1

As Z.Ben notes in the comments, gradients (SVGs) that are not available look like a problem with ZingChart and routing with Angular. I will have this problem to see if a solution can be found for it. (I'm on the ZingChart team).

As for the intermediate solutions, there are several ways to do this.

1. Change the type of rendering

ZingChart displays charts using SVG by default. Moving on to alternative canvas rendering, you should be able to render gradients seamlessly in your angular application, since the canvas maps gradients directly to the canvas element.

Just pass the rendering object to your directive:

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

2. Set colors using rules

Instead of using the 'styles' property, which adds gradients by default, use rules to target specific nodes in 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/

Any of these solutions should work.