javascript - How to change the bar color in Highcharts - Stack Overflow

I am using Highcharts for building charts and the default color that I see is blue. How can I change th

I am using Highcharts for building charts and the default color that I see is blue. How can I change the color to green ?

I tried adding the colors array by looking at the online API but may be I am not setting it at the correct place.

Highcharts JS v4.1.9

index.jsp

<!DOCTYPE html>
<html>
    <head>
        <title>Start Page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src=".1.3/jquery.min.js"></script>
        <script src=".js"></script>  
    </head>
    <body>
        <h1 align="center">Highcharts - Basic Column Chart demo!</h1>
        <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
        <script language="JavaScript">
            $(document).ready(function () {
                var chart = {
                    type: 'column'
                };
                var title = {
                    text: 'Monthly Average Rainfall'
                };
                var subtitle = {
                    text: 'Source: WorldClimate'
                };

                var xAxis = {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    crosshair: true
                };
                var yAxis = {
                    min: 0,
                    title: {
                        text: 'Rainfall (mm)'
                    }
                };
                var tooltip = {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                };
                var plotOptions = {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                };
                var credits = {
                    enabled: false
                };

                var series = [{
                        name: 'Tokyo',
                        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                    }];

                var json = {};
                json.chart = chart;
                json.title = title;
                json.subtitle = subtitle;
                json.tooltip = tooltip;
                json.xAxis = xAxis;
                json.yAxis = yAxis;
                json.series = series;
                json.plotOptions = plotOptions;
                json.credits = credits;
                $('#container').highcharts(json);
            });
        </script>
    </body>
</html>

Please guide.

I am using Highcharts for building charts and the default color that I see is blue. How can I change the color to green ?

I tried adding the colors array by looking at the online API http://api.highcharts./highcharts#colors but may be I am not setting it at the correct place.

Highcharts JS v4.1.9

index.jsp

<!DOCTYPE html>
<html>
    <head>
        <title>Start Page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://ajax.googleapis./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="http://code.highcharts./highcharts.js"></script>  
    </head>
    <body>
        <h1 align="center">Highcharts - Basic Column Chart demo!</h1>
        <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
        <script language="JavaScript">
            $(document).ready(function () {
                var chart = {
                    type: 'column'
                };
                var title = {
                    text: 'Monthly Average Rainfall'
                };
                var subtitle = {
                    text: 'Source: WorldClimate.'
                };

                var xAxis = {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    crosshair: true
                };
                var yAxis = {
                    min: 0,
                    title: {
                        text: 'Rainfall (mm)'
                    }
                };
                var tooltip = {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                };
                var plotOptions = {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                };
                var credits = {
                    enabled: false
                };

                var series = [{
                        name: 'Tokyo',
                        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                    }];

                var json = {};
                json.chart = chart;
                json.title = title;
                json.subtitle = subtitle;
                json.tooltip = tooltip;
                json.xAxis = xAxis;
                json.yAxis = yAxis;
                json.series = series;
                json.plotOptions = plotOptions;
                json.credits = credits;
                $('#container').highcharts(json);
            });
        </script>
    </body>
</html>

Please guide.

Share Improve this question asked Oct 16, 2015 at 15:21 NitalNital 6,11427 gold badges112 silver badges209 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

The API says it all. Creating a green line #009933 works by just adding it to your color array in your settings. The colors property is just an array, not an json object.

jsfiddle example

colors:['#009933']

As the documentation states it will loop all your colors as long as you have something left.

When all colors are used, new colors are pulled from the start again.

Using your syntax would look something like your series property, which is just an array too.

var colors = ['#009933'];
json.colors = colors;

One more way of doing it here

define colors array and insert in json.colors

var colors = ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'] ;

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745303348a4621570.html

相关推荐

  • javascript - How to change the bar color in Highcharts - Stack Overflow

    I am using Highcharts for building charts and the default color that I see is blue. How can I change th

    7小时前
    20

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信