Force same color on all the lines

Question

I have solved it. I should read API documentations more thoroughly.

---

I have 15 different isopleth lines plotted and they all have to be #FF0000/Red. They all have a red color, but they are given a slightly darker and lighter variant.

The Options object:

        var options = {
            series: {                       
                points: { 
                    show: true,
                    radius: 5,
                    symbol: "circle",
                    fill: true,
                    color: ('#00FF00')
                },
                lines: {
                    editable: false,
                    hoverable: false,
                    clickable: false,
                    color: ("#FF0000")
                }
            },
            yaxes: [ { 
                position: "left", 
                min: 0, max: 60, 
                tickSize: 4, 
                //color: 'transparent'
            } ],
            xaxes: [ { 
                position: "bottom", 
                min: 7.00, max: 7.80, 
                //color: 'transparent' 
            } ],
            grid: {
                backgroundColor: "white",
                editable: true,
                hoverable: false, 
                clickable: false
            },
            legend: {
                position: "nw"
            },
            colors: ['#FF0000'],                
        };  

The Data object:

        var data = [                
            { data: line10, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line15, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line20, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line25, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line30, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line35, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line40, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line50, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line60, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line70, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line80, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line90, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line100, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line110, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },
            { data: line120, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false },   


            { data: startPoint, lines: { show: true }, points: { show: true }, editable: true, editMode: 'xy', color: '#00FF00' },
        ];

The Flot.js API documentation states the following:

If there are more data series than colors, Flot will try to generate extra colors by lightening and darkening colors in the theme.

Is it possible to set this option to false or to force a set color?

Answer 1

Just as I posted my question, I figured why not try to add the same color 15 times. That worked.

I changed

colors: ['#FF0000']

to

colors: ['#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000']

One constraint is that they are based on a zero-based indexer, so if I add any other Flot data series between them I have to rearrange the colors.

---

Nevermind my question whatsoever, I read the API documentation again and found out the color is not part of the lines object. That's what I was doing wrong.

I changed the Data object to this, the color is set at the end of each line:

            var data = [                
                { data: line10, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line15, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line20, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line25, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line30, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line35, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line40, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line50, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line60, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line70, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line80, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line90, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line100, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line110, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
                { data: line120, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 


                { data: startPoint, lines: { show: true }, points: { show: true }, editable: true, editMode: 'xy', color: '#00FF00' },
            ];