CODEWITHSUNDEEP
javascripthighcharts
Fateh Alrabeai
Fateh Alrabeai

Reputation: 730

How to change the background color the chart area in high charts?

I'm using Highcharts JS. I want to change the colors of the line, the dots and background color of the area underneath the line.

I tried many ways but none of them worked. I've create a project on JsFiddle so that you can see the code and change it if you have the solution to help me solve this problem.

Sample on JSFiddle:

line Chart using highcharts

My code:

var chart = new Highcharts.Chart({

            chart: {
                renderTo: 'charts',
                type: 'area',
                backgroundColor: '#4b0e26',
                style: {
                    fontFamily: 'CairoFont',
                    color: "#ffffff",
                }
            },

            xAxis: {
                categories: [
                    'يناير',
                    'فبراير',
                    'مارس',
                    'إبريل',
                    'مايو',
                    'يوليو',
                    'يونيو',
                    'أغسطس',
                    'سبتمبر',
                    'أكتوبر',
                    'نوفمبر',
                    'ديسمبر',
                ],
                reversed: true,
                lineColor: '#fff',
                tickColor: '#fff',
                labels: {
                    style: {
                        color: '#fff',
                        fontFamily: 'CairoFont'
                    }
                },
            },

            yAxis: {
                title: {
                    text: false,
                    useHTML: Highcharts.hasBidiBug,

                },
                opposite: true,
                lineColor: '#fff',
                tickColor: '#fff',
                labels: {
                    style: {
                        color: '#fff',
                        fontFamily: 'CairoFont'
                    }
                },
            },

            title: {
                text: 'الطلاب الجدد',
                useHTML: Highcharts.hasBidiBug,
                style:{
                    color: '#fff',
                }
            },

            legend: {
                enabled: false
            },

            tooltip: {
                useHTML: true,
                backgroundColor: '#FCFFC5',
                borderColor: 'black',
                borderRadius: 10,
                borderWidth: 3,

            },
            credits: {
                enabled: false
            },
            series: [{
                showInLegend: false,
                data: [
                    [0, 29.9],
                    [1, 71.5],
                    [3, 106.4],
                    [4, 300.4],
                    [5, 400.4],
                    [6, 20.4],
                    [7, 40.4],
                    [8, 120.4],
                    [9, 50.4],
                    [10, 230.4],
                    [11, 110.4],
                    [12, 500.4],
                ],

            }]

        });

Upvotes: 0

Views: 1384

Answers (1)

WOUNDEDStevenJones
WOUNDEDStevenJones

Reputation: 5315

If you want to adjust the color for this series, you can use https://api.highcharts.com/highcharts/plotOptions.series.color. So you would just set your series like:

series: [{
    showInLegend: false,
    data: [
        [0, 29.9],
        [1, 71.5],
        [3, 106.4],
        [4, 300.4],
        [5, 400.4],
        [6, 20.4],
        [7, 40.4],
        [8, 120.4],
        [9, 50.4],
        [10, 230.4],
        [11, 110.4],
        [12, 500.4],
    ],
    color: '#ff0000'
}]

See a working demo at https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-color-specific/ from their documentation or https://jsfiddle.net/pkcrt5q2/ for your specific example.

Additionally, you can set this as a global option as described at https://api.highcharts.com/highcharts/colors.

Highcharts.setOptions({
    colors: ['#ff0000']
});

Working demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/colors/

Upvotes: 1

Related Questions