I am trying to create a HTML5 canvas (can also be SVG or vector based) line chart with following requirements.
Ability to shade between two lines when one line is greater than the other.(as shown in the figure below).
![Rough Drawing]()
Ability to draw texture layers
------------------------------------------------------- texture1 10% width, texture2 90% width ------------------------------------------------------- texture1 20% width, texture2 80% width ------------------------------------------------------- .. .. and so on -------------------------------------------------------
- Ability to draw gradient chart
------------------------------------------------------- color1 20% color2 10% color3 40% color4 30% ------------------------------------------------------- color1 20% color2 30% color3 30% color4 20% ------------------------------------------------------- .. .. and so on -------------------------------------------------------
Is there any javascript library that can do all of them? If not, are there any libraries that can so each of them individually. If no open-source solutions are available, please suggest good paid libraries.
I am using flot charts at present, which have all the features that I want except the first and third points mentioned above.