0

I am using bar chart in chartjs. In that bar chart bar width is inconsistent. Means when bar count(labels) is 1 means the single bar is showing like bigger width.It almost occupying entire width of canvas.

When bar count(labels) is 3 or more if i try to use "barValueSpacing" for bar chart it is working fine.But if i minimize the browser the each bar is getting overlapped means its not responsive.

In other charts like "JQPLOT" the width of the bar is automatically getting adjusted its doesn't care about bar count because it has "barWidth" option.So I want to set default width for bar in chart.js and am using "ChartNew.js" library.Could you please anyone help me to solve this problem?

cssyphus
  • 37,875
  • 18
  • 96
  • 111
Suresh
  • 105
  • 1
  • 2
  • 6

1 Answers1

0

What's happening is your fixed barValueSpacing is horizontally flipping over your bars (your right edge of the bar becomes the left edge and vice versa) once the chart width becomes small enough. You need to dynamically set the barValueSpacing based on the chart width by extending the bar chart type.

Here's how you do it

var a = [1, 2, 3];
var data = {
    labels: ["A", "B", "C"],
    datasets: [{
        label: "My dataset",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: a
    }]
};

Chart.types.Bar.extend({
    name: "BarAlt",
    draw: function(){
        this.options.barValueSpacing = this.chart.width / 5;
        Chart.types.Bar.prototype.draw.apply(this, arguments);
    }
});

And the fiddle - http://jsfiddle.net/9avv76vx/

The top one is the resized bar and the bottom one is the normal bar - I've divided the chart width by a constant (5), but in real life you'll need to take the number of data points into consideration and divide by a suitable fraction of that.

potatopeelings
  • 40,709
  • 7
  • 95
  • 119
  • Thank you for your valuable response. It is working fine. I need one more solution. I am using ChartNew.js library. ChatNew.js library is providing "*inGraphDataShow*" option for showing the datalabes on the top of the bar chart as well as the pie chart. Could you please help me to achieve "*inGraphDataShow*" option with "*Chart.min.js*" – Suresh May 22 '15 at 05:19
  • Chartjs doesn't have that option as far as I know. You can probably just render the table (from your server side or client side) on top of your chart separately. – potatopeelings May 22 '15 at 05:36
  • Once again thank you. I can do that. How to redraw the chart using ChartNew.js? – Suresh May 22 '15 at 05:52
  • Sorry, didn't quite get that - what do you mean, how to redraw... if you are looking for ChartNew.js documentation, I believe it's there on the Github wiki for the project. – potatopeelings May 22 '15 at 06:06
  • My actual requirement is i want to show the datalabels for all the chart types in the Chartjs library. But Chartjs is not providing that option now. So i have choosed ChartNew.js. Your above solution is working perfectly with chart.min.js library. Now my problem is how to use your above solution with ChartNew.js?. – Suresh May 22 '15 at 06:51
  • Because "*Chart.types.Bar.extend({})*" code is even triggered when i resize the browser. "*var myBar = new Chart(document.getElementById("test").getContext("2d")).Bar(chart_data,option);*" this is the code i am using for drawing the chart. I can set the barValueSpacing value dynamically when loading the chart. It will not trigger when i resize the browser. That's why i thought to do redrawing the chart when i do resize the browser. – Suresh May 22 '15 at 07:01
  • You are saying ChartNew's draw is NOT triggered when resizing the browser? Haven't used ChartNew but I see that there was a rewrite of Chartjs after ChartNew was branched off. Did you try destroying the chart (if there is a destroy function in ChartNew) and recreating it on window resize? – potatopeelings May 24 '15 at 22:44
  • Yes i have completed by recreating the chart on window resize. Thank you for valuable you answer....... – Suresh May 25 '15 at 09:10