HighCharts : Is it possible to customize the colors of individual series?

前端 未结 2 374
遇见更好的自我
遇见更好的自我 2020-12-13 23:32

I am using HighCharts for a line graph report. In this specific report I have been asked to Customize the colours of each series. The series will always stay the same. So fo

相关标签:
2条回答
  • 2020-12-13 23:50

    Options can be set separately for each series.

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        xAxis: {
            type: 'datetime'
        },
    
        series: [{
            name: 'John',
            color: '#0066FF',
            dashStyle: 'ShortDash',
            data: [
                [Date.UTC(2010, 0, 1), 29.9],
                [Date.UTC(2010, 2, 1), 71.5],
                [Date.UTC(2010, 3, 1), 106.4]
            ]
        },{
            name: 'Mary',
            color: '#FF0000',
            data: [
                [Date.UTC(2010, 0, 1), 60.9],
                [Date.UTC(2010, 1, 1), 40.5],
                [Date.UTC(2010, 2, 1), 90.0],
                [Date.UTC(2010, 3, 1), 80.4]
            ]
        }]
    });
    

    JsFiddle Example

    0 讨论(0)
  • 2020-12-13 23:55

    If you read the api here, you'll see the following text.

    Serie

    The actual series to append to the chart. In addition to the members listed below, any member of the plotOptions for that specific type of plot can be added to a series individually. For example, even though a general lineWidth is specified in plotOptions.series, an individual lineWidth can be specified for each series.

    So you can add anything from plotOptions.

    Demo:

    series: [{
        name: 'serie1',
        data: [0,1,2,3,4,5,6,7,8,9],
        color: '#FFFF00',
        lineWidth: 4,
        id: 'serie1',
        step: true
    }]
    

    Working demo

    0 讨论(0)
提交回复
热议问题