How to use the highcharts.Color function in highcharts

To help you get started, we’ve selected a few highcharts examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github SiaHubLab / siahub / resources / assets / js / modules / host_view.vue View on Github external
series: [{
                    name: 'Storage',
                    turboThreshold: 0,
                    data: this.hostData.history.map((entry) => {
                        return {
                            x: parseInt(moment.utc(entry.created_at).format('x')),
                            y: entry.totalstorage/1000/1000/1000,
                        };
                    }),
                    tooltip: { valueSuffix: ' GB' },
                     yAxis: 0,
                     color: (this.appMode !== "night-mode") ? "#0000ff":"#3cb6f1",
                     fillColor: {
                        stops: [
                            [0, Highcharts.Color((this.appMode !== "night-mode") ? "#0000ff":"#3cb6f1").setOpacity(0.3).get('rgba')],
                            [1, Highcharts.Color((this.appMode !== "night-mode") ? "#0000ff":"#3cb6f1").setOpacity(0).get('rgba')]
                        ]
                    },
                    tooltip: { pointFormat: '<span style="color:blue">{series.name}: <b>{point.y:.2f} GB</b></span><br>' },
                }, {
                    name: 'Used storage',
                    turboThreshold: 0,
                    data: this.hostData.history.map((entry) =&gt; {
                        return {
                            x: parseInt(moment.utc(entry.created_at).format('x')),
                            y: (entry.totalstorage-entry.remainingstorage)/1000/1000/1000
                        };
                    }),
                    tooltip: { valueSuffix: ' GB' },
                    yAxis: 2,
                    color: '#ff0000',
                    fillColor: {
github vinniejames / coinfox / src / ChartPortfolioValue.js View on Github external
legend: {
          enabled: false
        },
        plotOptions: {
          area: {
            color: 'rgb(33, 206, 153)',
            fillColor: {
              linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
              },
              stops: [
                [0, 'rgb(33, 206, 153)'],
                [1, Highcharts.Color('rgb(33, 206, 153)').setOpacity(0).get('rgba')]
              ]
            },
            marker: {
              radius: 2
            },
            lineWidth: 2,
            states: {
              hover: {
                lineWidth: 3
              }
            },
            threshold: null
          }
        },
        series: [{
          type: 'area',
github SiaHubLab / siahub / resources / assets / js / modules / network.vue View on Github external
]
                    },
                    tooltip: {
                        pointFormat: '<span style="color:#0069cb">{series.name}: <b>{point.y:.2f} TB</b></span><br>'
                    },
                },
                {
                    name: 'Used storage',
                    turboThreshold: 0,
                    data: this.used,
                    yAxis: 0,
                    color: '#00cba0',
                    fillColor: {
                        stops: [
                            [0, Highcharts.Color('#00cba0').setOpacity(0.3).get('rgba')],
                            [1, Highcharts.Color('#00cba0').setOpacity(0).get('rgba')]
                        ]
                    },
                    tooltip: {
                        pointFormat: '<span style="color:#00cba0">{series.name}: <b>{point.y:.2f} TB</b></span><br>'
                    },
                }
            ];

            return options;
        },
        priceData() {
github kingofhawks / stocktrace / client / src / FinanceChart.js View on Github external
y: 55,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                },
                series:{
                    turboThreshold:5000//set it to a larger threshold, it is by default to render 1000 points
                }
github SiaHubLab / siahub / resources / assets / js / modules / host_view.vue View on Github external
}, {
                    name: 'Used storage',
                    turboThreshold: 0,
                    data: this.hostData.history.map((entry) =&gt; {
                        return {
                            x: parseInt(moment.utc(entry.created_at).format('x')),
                            y: (entry.totalstorage-entry.remainingstorage)/1000/1000/1000
                        };
                    }),
                    tooltip: { valueSuffix: ' GB' },
                    yAxis: 2,
                    color: '#ff0000',
                    fillColor: {
                       stops: [
                           [0, Highcharts.Color('#ff0000').setOpacity(0.3).get('rgba')],
                           [1, Highcharts.Color('#ff0000').setOpacity(0).get('rgba')]
                       ]
                   },
                    tooltip: { pointFormat: '<span style="color:red">{series.name}: <b>{point.y:.2f} GB</b></span><br>' },
                }, {
                    name: 'Earnings',
                    turboThreshold: 0,
                    data: this.hostData.history.map((entry) =&gt; {
                        return {
                            x: parseInt(moment.utc(entry.created_at).format('x')),
                            y: ((entry.storageprice/1e12*4320)*((entry.totalstorage-entry.remainingstorage)/1000/1000/1000/1000))/30
                        };
                    }),
                    tooltip: { valueSuffix: ' SC/day' },
                    yAxis: 1,
                    color: '#00ff00',
                    fillColor: 'transparent',
github intuit / foremast / foremast-browser / src / components / charts / scatter / ScatterChart.js View on Github external
colors: Highcharts.getOptions().colors.map(function (color) {
        return {
            radialGradient: {
                cx: 0.4,
                cy: 0.3,
                r: 0.5
            },
            stops: [
                [0, color],
                [1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
            ]
        };
    })
});
github AugurProject / augur / packages / augur-ui / src / modules / portfolio / components / performance-graph / performance-graph.jsx View on Github external
},
      plotOptions: {
        series: {
          color: "white",
          fillColor: {
            linearGradient: [0, 0, 0, "100%"],
            stops: [
              [
                0,
                Highcharts.Color("#dbdae1")
                  .setOpacity(0.25)
                  .get("rgba")
              ],
              [
                0.5,
                Highcharts.Color("#dbdae1")
                  .setOpacity(0.15)
                  .get("rgba")
              ],
              [
                1,
                Highcharts.Color("#dbdae1")
                  .setOpacity(0)
                  .get("rgba")
              ]
            ]
          }
        }
      },
      legend: {
        enabled: false
      },