lineColor: String

Sets the color of line for the entire series. This can be overridden at dataPoint level in order to customize the color of line connecting any two dataPoints. The value of lineColor can be a “HTML Color Name” or “hex” code.

Default: Automatically taken from dataSeries color.
Example: “blue”,”#21AB13″..
Notes
  • Color of the lineSegment is defined by the lineColor of first dataPoint
  • Applies only to line, stepLine and spline charts.
var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
  data:[ {
   dataPoints: [
    .
    .
    {x: 30 , y: 50 , lineColor: "Indigo" },
    {x: 40 , y: 70  },
    .
    .
  
  ]
 }
]
 .
 . 
});
chart.render();
Try Editing The Code

  Also See:    

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

3 Comments

  1. Rajshekhar says:

    [
    { type:line,dataPoints:[{ x:new Date(2000, 03, 1), y:32991 } ,{ x:new Date(2000, 04, 1), y:28933 } ,{ x:new Date(2000, 05, 1), y:27210 } ,{ x:new Date(2000, 06, 1), y:28821 } ,{ x:new Date(2000, 07, 1), y:48134 } ,{ x:new Date(2000, 08, 1), y:35039 } ,{ x:new Date(2000, 09, 1), y:30132 } ,{ x:new Date(2000, 10, 1), y:29398 } ,{ x:new Date(2000, 11, 1), y:2980 } ]},
    { type:line,dataPoints:[{ x:new Date(2000, 03, 1), y:22837 } ,{ x:new Date(2000, 04, 1), y:19430 } ,{ x:new Date(2000, 05, 1), y:28109 } ,{ x:new Date(2000, 06, 1), y:29204 } ,{ x:new Date(2000, 07, 1), y:21808 } ,{ x:new Date(2000, 08, 1), y:68404 } ,{ x:new Date(2000, 09, 1), y:59918 } ,{ x:new Date(2000, 10, 1), y:6660 } ,{ x:new Date(2000, 11, 1), y:28297 } ]},
    { type:line,dataPoints:[{ x:new Date(2000, 03, 1), y:15514 } ,{ x:new Date(2000, 04, 1), y:18113 } ,{ x:new Date(2000, 05, 1), y:18285 } ,{ x:new Date(2000, 06, 1), y:14293 } ,{ x:new Date(2000, 07, 1), y:11288 } ,{ x:new Date(2000, 08, 1), y:12648 } ,{ x:new Date(2000, 09, 1), y:3831 } ,{ x:new Date(2000, 10, 1), y:4721 } ,{ x:new Date(2000, 11, 1), y:182 } ]},
    { type:line,dataPoints:[{ x:new Date(2000, 03, 1), y:12971 } ,{ x:new Date(2000, 04, 1), y:40304 } ,{ x:new Date(2000, 05, 1), y:45114 } ,{ x:new Date(2000, 06, 1), y:30860 } ,{ x:new Date(2000, 07, 1), y:28598 } ,{ x:new Date(2000, 08, 1), y:29658 } ,{ x:new Date(2000, 09, 1), y:2929 } ,{ x:new Date(2000, 10, 1), y:1385 } ,{ x:new Date(2000, 11, 1), y:542 } ]},
    { type:line,dataPoints:[{ x:new Date(2000, 03, 1), y:72056 } ,{ x:new Date(2000, 04, 1), y:61408 } ,{ x:new Date(2000, 05, 1), y:57863 } ,{ x:new Date(2000, 06, 1), y:51980 } ,{ x:new Date(2000, 07, 1), y:57477 } ,{ x:new Date(2000, 08, 1), y:48925 } ,{ x:new Date(2000, 09, 1), y:25609 } ,{ x:new Date(2000, 10, 1), y:36581 } ,{ x:new Date(2000, 11, 1), y:3124 } ]}

    are my lines which can be vary i.e i want dynamic creation of line graph

    i save above output to string varible and assign to datapoint:
    also

    i save above output to Array and assign to datapoint:

    but chart had a problem to load

    but when i asssign above values directly to datapoint: then it shows line graph ,so what to do to generate dynamic chart

    • Sanjoy says:

      Rajshekhar,

      Value of type should be as “line”, string. And can you please create a jsfiddle, so that we can look into it and help you out?

  2. Pingback: CanvasJS Chart 1.8.1 goes GA - CanvasJS

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