Flot customizing the data series

When you finish making a chart, I believe that you will want to make the chart looks more nicely by changing the color and width of lines or changing the size and appearance of data points, this chapter will show you how to archive this.

Fill color and data series color

Flot provides a lot of options for you to use, we take fill color for example, The chart below shows how a chart with filled color looks like.
Below shows the codes of the chart above, when using fillColor attribute, fill attribute also have to set to ture to take effect. 
            var options = {
                series: {
                    lines: {
                        show: true,
                        fill: true,
                        fillColor: { colors: [{ opacity: 0.7 }, { opacity: 0.1}] }
                    },
                    points:{
                        show: true,
                        radius: 3
                    }
                },
                colors: ["#FF7070", "#0022FF"],
            };

            $.plot(placeholder, data, options);
fillColor attribute can be set with a single color or a gradient color,in here, we use a gradient color, there are two ways for making a gradient color, the first one is to specify two colors with the code format below. 
        fillColor: { 
            colors: ["#000", "#fff"] 
        }
the other one is to specify opacity 
        fillColor: { 
            colors: [{ opacity: 0.7 }, { opacity: 0.1}] 
        }

Data series attributes

The code below shows a complete data seires attributes, you can try each one of them to create different appearance of charts. 
        series: {
            //line chart、point chart and bar chart
            lines, points, bars: {
                //set to true to make charts show
                show: boolean
                //width of lines
                lineWidth: number
                //set true to fill the shape
                fill: boolean or number
                //the color of the fill
                fillColor: null or color/gradient

                //this is only used by line chart
                steps: boolean
            }
            //data points
            points: {
                //the radius of data points
                radius: number
                //the shape of data points, default is circle
                //there are other shapes available like square、diamond、triangle、cross 
                //but you need to include jquery.flot.symbol.js plug-in to take effect
                symbol: "circle" or function
            }
            //bar chart
            bars: {
                //width of bar
                barWidth: number
                //specifies how a bar should aligned
                align: "left", "right" or "center"
                //will show as horizontal bar chart if set to true
                horizontal: boolean
            }
            //shadow size of charts
            shadowSize: number
        }

        //colors of data series, series1 is correspond to color1, series2 is correspond to color2, and so on
        colors: [ color1, color2, ... ]