HTML5 & JS Area Charts

Comments 18

1. Can the lines be changed to curved

   • I am guessing I am asking if I can create a spline area chart

     • Yes. Here you can use Spline Area Chart for the same.

2. Let me know how to insert more than one chart in one page. Like dashboard

   • Here is an example to do the same.

3. Hi ! my chart is having only negative value on Y axis (from -100 to 0). is it possible to make AreaChart fill the area from -100 to the Y value (the fill area will be under the line) instead of from 0 to the value (the area is filled over the line) ? thanks !

   • Lionnel,

     You can do so by inverting the y values along with the help of axis labelFormatter and toolTip contentFormatter as shown in this example http://jsfiddle.net/canvasjs/qyd2dx8w/.

     There is one more workaround by using secondary Y-Axis as shown here

     • thank you for your support. so helpful !

4. Hi, I was just wondering, say I have an area chart, with like, 2 pieces of data on it, like this:

   data: [
   {
   type: “area”,
   dataPoints: [
   { x: new Date(2012, 08, 1), y: 5300 },
   { x: new Date(2012, 09, 1), y: 6000}
   ]
   }
   ]

   It basically leaves a huge gap between the graph and the Y axis, so it basically has the X axis pinned near the middle of the x axis, and leaves a huge margin to the left and right. I don’t really want this, I want the graph to look as normal as possible, without the waste of space.

   • Sam,

     As per requirement you can use axis’s maximum and minimum properties. Here is an example

5. Is there a way to separately change the color of the line and the fill?

   Lets say I want to make the line red and the fill green.

   • We have considered this feature for future release. As of now you have to use two different dataSeries (one line and another of type area) with the same set of dataPoints to achieve this.

6. Is there a way to color a part of the chart like area chart above a threshold? I’m guessing it’s a combination of both line and area chart…

   • Subhannita,

     You can use range-area chart or striplines to show threshold. Here are examples using range-area chart and stripline.

     If this doesn’t fit your requirement, any pictorial representation would help us to understand better.

     • something like this
       https://drive.google.com/file/d/0By5AhDkmR1NlNElyT21lajZSdTA/view?usp=sharing

     • Using strip lines for threshold and range area chart, its coming like this- https://drive.google.com/file/d/0By5AhDkmR1NlZEl5Nm5lMzNXckk/view?usp=sharing
       i don’t want to map more points where the threshold line meets the curve even though it would solve the problem pictorially.

       • Subhannita,

         Check this example, if you don’t want to map points where threshold line meets.

         • Thanks a lot!! This is exactly what i was looking for!