Home Forums Chart Support How to manage graph size

How to manage graph size

Viewing 9 posts - 1 through 9 (of 9 total)
  • #14856

    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

    #14859

    @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

    #14866

    @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 6 years, 11 months ago by mujahid_102.
    • This reply was modified 6 years, 11 months ago by mujahid_102.
    • This reply was modified 6 years, 11 months ago by mujahid_102.
    • This reply was modified 6 years, 11 months ago by mujahid_102.
    #14876

    @mujahid_102,

    You can set the width of the bars using the dataPointWidth property.
    Column Datapoint Width
    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

    #14925

    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

    #14929

    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

    #14933

    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

    #14936

    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.
    pie chart with and height control


    Vishwas R
    Team CanvasJS

    #14989

    Thanks, The problem is solved

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.