Home forums Using CanvasJS How to manage graph size

This topic contains 8 replies, has 4 voices, and was last updated by  mujahid_102 5 months, 3 weeks ago.

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

    mujahid_102
    Member

    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

    Suyash Singh
    Moderator

    @mujahid_102,

    Seems like your code is incomplete. Kindly create a working jsfiddle of the issue that you are facing so that we can look into your code and help you out better.

    ___
    Suyash Singh
    Team CanvasJS

    #14866

    mujahid_102
    Member

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

    Suyash Singh
    Moderator

    @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

    #14925

    pragyan_03
    Member

    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

    Vishwas R
    Keymaster

    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

    pragyan_03
    Member

    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

    Vishwas R
    Keymaster

    Pragyan,

    Width and Height of the chart should be numeric. Please check this updated jsfiddle.


    Vishwas R
    Team CanvasJS

    #14989

    mujahid_102
    Member

    Thanks, The problem is solved

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

You must be logged in to reply to this topic.