Change Color settings (stroke) dynamically; depends on value

Hi,

I’m not very fimilar with javascript and I searched for a solution the last few days. Perhaps it’s very easy (it seems so) but I didn’t get it.

I have a bar chart and wan’t to have red for negativ values (< 0) and green for the other ones ( > = 0). The circles should have the same color as the bars. That’s my code:

var Chartist3 = new Chartist.Bar('#chart3', { labels: [], series: [ myDatalast10 ] }, { height: 240, fullWidth: true, showGrid: true, showLabel: true, axisY: { onlyInteger: true, offset: 20 }, axisX: { labelInterpolationFnc: function(value, index) { return index % 2 === 0 ? value : null; } }, plugins: [ Chartist.plugins.tooltip() ] }); Chartist3.on('draw', function(data) { if(data.type === 'bar') { data.group.append(new Chartist.Svg('circle', { cx: data.x2, cy: data.y2, r: Math.abs(Chartist.getMultiValue(data.value)) * 1.2 + 2.5 }, 'ct-slice-pie')); } });

And that’s my actual chart:

Perhaps anybody have a solution for me.

Thanks and greets Maurice

[emcdng]

You can move your circle code snippet into the upper logic…

[emcdng]

                var red= '#ff0000';

                chart.on('draw', function (context) {
                        if (context.type === "bar") {
                            if (context.value.y < 0) {
                                context.element.attr({
                                   style: 'stroke: ' + red + '; fill: ' + red + ';'
                                });
                            } 
                        }
                    });