How to manage graph size

[mujahid_102]

I am new at canvasJS. I am generating graph dynamically using loop. I am generating bar charts. I want to fix the bar width and total graph width. But now my graph comes different size based on number of bars. My code is:

var chart = new CanvasJS.Chart(divId,
{
theme: “theme3”,
animationEnabled: false,
title:{
text: chartTitle,
fontSize: 20
},
toolTip: {
shared: true
},
axisY: {
title: “Scale”,
labelFontSize: 12,
labelWrap: true,
interval: 1,
maximum: 5,
margin: 20
},
axisY2: {
title: “Scale”,
interval: 1,
maximum: 5
},
axisX: {
labelFontSize: 12,
labelFontColor: “black”,
interval:1,
labelWrap: true,
margin: 20
},
data: [
{
type: “bar”,
bevelEnabled: false,
dataPointWidth: 20,
name: “Self”,
legendText: “Individual”,
showInLegend: true,
indexLabel: “{y}”,
dataPoints:dataSelf
},
{
type: “bar”,
bevelEnabled: false,
dataPointWidth: 20,
name: “Supervisor”,
legendText: “Reporting Supervisor”,
axisYType: “secondary”,
showInLegend: true,
indexLabel: “{y}”,
dataPoints:dataBoss
}

],
legend:{
cursor:”pointer”,
itemclick: function(e){
if (typeof(e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
//chart.render();
}
},
});
chart.render();

my existing graph like:
Y
|
|
|———————————-|
| |b
|———————————-|
|
|——————————|
| |a
|——————————|
|
——————————————–X
#First Graph

Y
|
|
|———————————-|c
|———————————-|
|
|——————————|b
|——————————|
|
|———————————-|
|———————————-|a
——————————————–X
#Second Graph

I want second graph will be

Y
|
|
|———————————-|
| |c
|———————————-|
|
|——————————|
| |b
|——————————|
|
|———————————-|
| |a
|———————————-|
——————————————–X

[Suyash Singh]

@mujahid_102,

Seems like your code is incomplete. Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can look into the code / chart-options that you are using, understand the scenario better and help you out?

___
Suyash Singh
Team CanvasJS

[mujahid_102]

@Suyash Singh

Please see the link jsfiddle . Here two graphs. I want to show width of the bars and width of the graphs are equal size. label text will be breakdown if it is long.

Thank you

• This reply was modified 7 years, 8 months ago by mujahid_102.
• This reply was modified 7 years, 8 months ago by mujahid_102.
• This reply was modified 7 years, 8 months ago by mujahid_102.
• This reply was modified 7 years, 8 months ago by mujahid_102.

[Suyash Singh]

@mujahid_102,

You can set the width of the bars using the dataPointWidth property.

We observed that you are using min-width for setting the height which prevents the the height of the div getting lower than 360px in your case but it is not an absolute value. It would be better if you could follow something like :
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

The label text clips only when the text is very long. If you are still facing some issue, can you please create a jsfiddle reproducing the label clipping?

Also kindly elaborate what do you mean by total graph width.

___
Suyash Singh
Team CanvasJS

[pragyan_03]

can someone please help me
i’m not able to reduce the size of the piechart
i have to use it in inside a particular div but its going out of that
please see to it
i’ve already removed the footer part

please help

regards,
pragyan

[Vishwas R]

Pragyan,

By default Chart takes the size of its container (if set). So you can just set the width and height of the container in which you are going to place the chart as shown below:
<div id="chartContainer" style="height: 300px; width: 500px;">

Else you can also set the same using “width” and “height” property in chart options.

var chart = new CanvasJS.Chart(“chartContainer”, {
    width:600,//in pixels
    height:800,//in pixels
    title: {
        text: ” Chart Title “,
    }
    ...
    ...
}

If this doesn’t solve your issue, kindly create jsfiddle reproducing the issue you are facing so that we can look into your code and help you better?

—
Vishwas R
Team CanvasJS

[pragyan_03]

as instructed by you, Vishvas
i have changed the js
i have written widht and height in js
but now its not even showing the graph

please see to it

jsfiddle : https://jsfiddle.net/3yenbxtk/1/
thankks
regards,
pragyan

[Vishwas R]

Pragyan,

width and height properties of the chart should be numeric. In the JSFiddle that you have shared, the values passed seems to be incorrect. Passing numeric values seems to be working fine in this case. Please take a look at this updated jsfiddle for working code.

—
Vishwas R
Team CanvasJS

[mujahid_102]

Thanks, The problem is solved