Home › docs › charts › chart options (reference)

Pages

open all | close all

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 it Yourself by Editing the Code below.

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 it Yourself by Editing the Code below.

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

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

Comments 38

  1. 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. 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

    • Muhammad,

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

    • 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. 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. 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?

      • 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.

          • 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. 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. 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. 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. 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

© fenopix
About Us
FAQs
Careers
Privacy Policy

Server Side Technologies
ASP.NET MVC Charts
PHP Charts
JSP Charts
Spring MVC Charts

Front End Technologies
JavaScript Charts
jQuery Charts
React Charts
Angular Charts
JavaScript StockCharts

Contact
Fenopix, Inc.
2093 Philadelphia Pike,
#5678, Claymont,
Delaware 19703
United States Of America

Server Side Technologies
Front End Technologies
Contact
ASP.NET MVC Charts JavaScript Charts FAQs
PHP Charts jQuery Charts Sales Enquiries
Spring MVC Charts React Charts Support Forum
JSP Charts Angular Charts Careers
JavaScript StockCharts

Privacy Policy  © fenopix