CODEWITHSUNDEEP
highcharts
RamPrasadBismil
RamPrasadBismil

Reputation: 589

Highcharts for multiple plot lines each with a different color and show tooltip?

I have a flask app in which I am using Highcharts to plot data, and if the user enters a lot of inputs for which he needs a graph, I plot multiple plot lines on the graph with different colors. But after 8-10 plot lines the color repeat and hence its not useful coz its not distinguishable. 

    <script type="text/javascript">
     $('document').ready(function(){
        window.seriesOptions = [];
        window.yAxisOptions = [],
        window.seriesCounter = 0,
        window.colors = Highcharts.getOptions().colors;
        generate_graph( {{ coordinates| safe }} , {{ graph_name | safe }} );
     });
    </script>





/*
Generate graph function takes two input parameters i.e. Coordinates - which is an array of [x, y] points AND graph_name which is an array of the (service_name,server_name) pair and generates
seriesOptions and calls createChart function.
*/
function generate_graph(coordinates, graph_name){

 $.each(graph_name, function(i, name) {

    window.seriesOptions[i]= {
        name : graph_name[i],
        data : coordinates[i],
        type : 'line'
    };
       seriesCounter++;
        if (seriesCounter == graph_name.length) {
            createChart();
        }
    });
$('#add-to-dashboard-button').show();
}

/*
createChart function generates the actual graphs and sets the different properties of the graph.
*/
function createChart(){
    $('#chart').highcharts('StockChart', {
                chart: {
                    zoomType: 'x'
                },
                rangeSelector: {
                selected: 4
                },
                xAxis: {
                    type: 'datetime',
                    labels: {
                        formatter: function() {
                            return Highcharts.dateFormat('%a %d %b', this.value);
                        }
                    }
                },
                title : {
                    text : 'Graph'
                },
                legend: {
                    enabled: true,
                    layout: 'vertical',
                    labelFormat: '<span style="color:{color}">{name}</span> - <b> x : ({point.x:.2f}) , </b> y : ({point.y:.2f}) <br/>',
                    maxHeight: 100
                   },
                series : seriesOptions
            });
}
</script>

How to make sure that every time a plot is generated its in a different unique color and hence distinguishable.

Also The tooltip doesn`t appear even though the data for x axis is sorted?

Upvotes: 1

Views: 864

Answers (1)

SteveP
SteveP

Reputation: 19093

If you don't specify any colours when creating a chart or adding a series, highcharts will pick one from it's default colours. There are a limited number of defaults.

However, you can tell highcharts about a new set of default colours, so you could give it more to chose from, up to the maxumum you want to support. This code sets 9 defaults, but you can add as many as you want, you just need to come up with some unique colours:

    Highcharts.setOptions({
        colors:[
     '#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
    });

Make this the first thing you call.

Upvotes: 2

Related Questions