Chartist-js: change bar width dynamically according to data

[Zaid-Mirza]

Hi,

is there any options to change width and seriesBarDistance dynamically? look at pic there is only one set of series. I want it to occupy all chart width and increase Bar width

[Zaid-Mirza]

its my 4th issue on chartist, not a single comment any of them? thats bad @gionkunz

[gionkunz]

@Zaid-Mirza I didn't had a lot of time to work on Chartist lately but I'm just in the process of cleanup up the backlog and pick up my work on the library again so sorry for that.

Nevertheless I need to post my standard answer for this type of issue :-/

[gionkunz]

Please use http://stackoverflow.com/ for these kind of questions, we should only track bugs, feature requests or questions on internals within this Github repository.

[gionkunz]

Btw. you should use the distributeSeries option for this use-case https://gionkunz.github.io/chartist-js/examples.html#example-bar-distributed-series

[Zaid-Mirza]

@gionkunz sorry for late response, I was expecting feature which can increase/decrease bar width according to number of data bars on Chart

[gionkunz]

Sorry I never replied to this, please re-open if still needed

[chasegiunta]

Btw, for anyone else looking for a solution - I found a fiddle that addresses this https://jsfiddle.net/traviss0/gg1oj35x/

Setting the stroke width to the step length, or a fraction of the step length, in the created event seems to be a decent way.

[1pavanb]

the above jsfiddle link isn't working.
I figured out a way to do it with a similar idea.

        var chart = new Chartist.Bar('.ct-chart', data, options);

        var yOffset = chart.options.axisY.offset;
        var chartWidth = chart.container.clientWidth;
        var xWidth = chartWidth - yOffset;
        var stepLength = xWidth / chart.data.series.length;

        chart.on('draw', function (data) {
            if (data.type == 'bar') {
                data.element._node.style.strokeWidth = stepLength * 2 / 5;
            }
        });

This answers the Bar width being dynamic.