options: Object

You can set data and all the attributes/properties of a chart using chart option object. You can pass the chart “options” as a constructor parameter while creating the Chart object 


var  chart =  new CanvasJS.Chart("container",
{ //option object

  zoomEnabled: true,
  title: {
   text: "Chart Title",
  },
  .
  .
 });
chart.render();
Try Editing The Code

Simple Attributes

Object Attributes Type Default Options Remarks
Chart interactivityEnabled Boolean true true, false Enables / Disables Chart interactivity like toolTip, mouse and touch events
Chart animationDuration Number 1200 1000, 500, etc Sets the duration of animation in milliseconds
Chart animationEnabled Boolean false true, false Enables Animation while rendering the Chart
Chart exportFileName String Chart “Column Chart”, etc
–
Chart exportEnabled Boolean False true, false
–
Chart zoomEnabled Boolean false true, false Works with all chart types except Pie And Doughnut
Chart theme String “light1” “light1″,”light2”..
–
Chart backgroundColor String “#FFFFFF” “yellow”, “#F5DEB3″..
–
Chart colorSet String “colorSet1” “colorSet2”, “colorSet3”
–
Chart culture String “en” “es”, etc
–
Chart width Number 500 400, 1000 etc
–
Chart height Number 400 400, 300 etc
–
Chart dataPointMaxWidth Number Automatically calculated based on the chart size 40, 300 etc
–
Chart creditText String CanvasJS.com Custom String Setting this to empty string disables the credit link (requires commercial license). Can be used for Custom Branding as well.
Chart creditHref String https://canvasjs.com/ http://example.com Setting this to empty string disables the credit link (requires commercial license). Can be used for Custom Branding as well.

Drag cursor across the chart to Zoom.

Try Editing The Code

In the next editor, Chart will animate as it renders. You can disable the animation by setting animationEnabled to false.

Try Editing The Code
 

Composite Attributes (Objects)

Object Attributes Type Default Options Remarks
Chart options title Object
–
–
–
Chart options legend Object
–
–
–
Chart options axisX Object
–
–
 Works with all chart types except Pie, Doughnut
Chart options axisY Object
–
–
 Works with all chart types except Pie, Doughnut
Chart options data Object
–
–
–
Chart options tooltip Object
–
–
–
Chart options toolbar Object
–
–
–
  
var  chart =  new CanvasJS.Chart("container",
{
 title: {} ,
 legend: {},
 axisX: {},
 axisY:{},
 toolTip:{},
 data:{},
});
chart.render();
 
In coming Sections, We will study about each Composite Attribute in Detail.

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

38 Comments

  1. Nipun says:

    how we pass data dynamically from code behind in C# i have json data in var but i am unable to pass it into datapoint i am using piechart.can anyone help me.

  3. Muhammad Ikram Ul Haq says:

    Hi! I am using CANVASJS to draw scatterplot in my web-application.But I got creditText and creditHref in my output response. I used creditText and creditHref=”” (empty string) to disable watermark, but still getting same issue.Can anyone let me explain why this is happening and how can i disable watermark from charts.I need it urgently ?
    Thanks in advance

    • Sunil Urs says:

      Muhammad,

      It requires a commercial license to disable watermark. Have updated the same in the documentation.

    • Muhammad Ikram Ul Haq says:

      Hi! We want to use dynamic data array in data points to plot scatter chart in our web application. How can we use separate array for x and y axis data points and without specifying all data points statically use just variable name and pass to x and y in data points to get chart work?

      Thanks in advance!

  4. Bharathwaj says:

    May 27, 2015 at 7:33 pm
    i need dynamically running graph… that graph should fetch a data (values) from the database …………. how to do ?? please explain……. i need use of JSP

  5. Pawan Kumar says:

    Hi,
    I am generating column chart by supplying data from backend, when the data is more i. e. having more no.of records, the respective labels are missing based on the no.of rows that are coming from the database.
    for example, when i am having 30 records from db, then in the chart 30 records are having displayed the x-axis labels, but when increased in the row count, say 70, then in the chart, the labels are missing for every four or five columns in the chart.

    so, how to get the labels for all the columns in the chart?

      • Pawan Kumar says:

        Thanq Naveen Venugopal for your reply.
        And, one more question is, how can we pass data dynamically to render the chart.
        As of now how i am doing is, i am getting the data from db, and preparing a html table with it, and from the table rows i am setting the datapoints to data array for the chart to render.
        ex code:
        [{label : abc[0], y : Number(applications[0])},
        {label : abc[1], y : Number(applications[1])},
        {label : abc[2], y : Number(applications[2])},
        {label : abc[3], y : Number(applications[3])}];

        In this URL, https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/zooming-panning/, the dynamic example is given. But, for both X and Y axis, it is expecting numbers only. But, I want to display text(labels) on X-axis, instead of number. So, how can I do this?
        Thanks in advance.

          • Pawan Kumar says:

            I think, you didn’t get my point.
            I have two dates(inputs), from : 01-10-2015 and to : 05-10-2015, based on these from and to dates, i got 100 rows from database. so as of now, i prepared the array like above upto
            {label : abc[99], y : Number(applications[99])}. Now, after two more days, i.e.
            from : 01-10-2015 and to : 07-10-2015, this time i got 110 rows from database. Now, as per the previous 100 records, i prepared the array for 100 rows, now 110 rows came, so i have to modify the array to accommodate 110 rows to be displayed on the chart.
            so, what i’m asking is, based on the no.of records that are coming from database, without modifying the array, how can i accommodate those particular no.of records to be displayed on the chart dynamically.

            Excuse me if my words are not clear.

  8. Mark says:

    Hi

    Nice chart script!

    I’m loading the dataPoints in with PHP from a MySQL database. I’m showing the number of steps taken by a user on a daily basis. I want to limit the chart to show only the last five dataPoints. Is there a way to do this in yout script?

  12. Tzali says:

    After building the table, how can I change an option (like the type of the chart) without rebuilding it with ‘new’?

    I need it to allow the user to change the type of the chart dynamically after presenting it as default “line chart”.

    Thanks

  13. Mark Whittaker says:

    How do I code in annotations and markers etc…

    for example a horizontal line From Left to right that represents a pas/fail line

    or If I wanted to make a digital timing diagram and have vertical dotted lines representing a time marker

  14. Sandeep says:

    How can i delete the datapoints that are stored. I want to start deleting datapoints one by one once a limit is reached and start storing from index ‘0’. How can I do this?

If you have any questions, please feel free to ask in our forums. Ask Question