How to use the highcharts/highstock.stockChart 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 AugurProject / augur-ui / src / modules / market-charts / components / market-outcomes-chart / market-outcome-chart-highchart.jsx View on Github external
units: [[timeIncrement, [1]]]
    };

    const newOptions = Object.assign(options, { series });

    this.setState({ options: newOptions });

    // initial load
    if (!this.chart || !hasData) {
      this.chart = Highcharts.stockChart(this.container, newOptions);
      return;
    }

    // rebuild chart when we get chart data, afterwards just update
    if (this.chart && hasData && this.chart.xAxis[0].series.length === 0) {
      this.chart = Highcharts.stockChart(this.container, newOptions);
    } else if (this.chart && hasData) {
      this.chart.update(newOptions);
    }
  }
github AugurProject / augur / packages / augur-ui / src / modules / market-charts / components / market-outcome-charts--candlestick / market-outcome-charts-candlestick-highchart.tsx View on Github external
// VOLUME
        {
          type: 'column',
          name: 'volume',
          data: volume,
          yAxis: 1,
          maxPointWidth: 20,
          minPointWidth: 10,
          dataGrouping: {
            units: GROUPING_UNITS,
          },
        },
      ],
    };

    this.chart = Highcharts.stockChart(this.container, options);
    this.chart.yAxis[0].setExtremes(this.chart.yAxis[0].dataMin * 0.95, this.chart.yAxis[0].dataMax * 1.05);
  }
github AugurProject / augur / packages / augur-ui / src / modules / account / components / profit-loss-chart.tsx View on Github external
type: 'areaspline',
        lineWidth: HIGHLIGHTED_LINE_WIDTH,
        data,
        color: getLineColor(data),
        negativeColor: getNegativeColor(data),
      },
    ];

    const newOptions: Highcharts.Options = Object.assign(options, {
      series,
    }) as Highcharts.Options;

    this.setState({ options: newOptions });

    // initial load
    this.chart = Highcharts.stockChart(this.container, newOptions);
  }
github AugurProject / augur-ui / src / modules / market-charts / components / market-outcomes-chart / market-outcome-chart-highchart.jsx View on Github external
if (isScalar && hasData) {
      options.title.text = scalarDenomination;
    }
    options.plotOptions.line.dataGrouping = {
      ...options.plotOptions.line.dataGrouping,
      forced: true,
      units: [[timeIncrement, [1]]]
    };

    const newOptions = Object.assign(options, { series });

    this.setState({ options: newOptions });

    // initial load
    if (!this.chart || !hasData) {
      this.chart = Highcharts.stockChart(this.container, newOptions);
      return;
    }

    // rebuild chart when we get chart data, afterwards just update
    if (this.chart && hasData && this.chart.xAxis[0].series.length === 0) {
      this.chart = Highcharts.stockChart(this.container, newOptions);
    } else if (this.chart && hasData) {
      this.chart.update(newOptions);
    }
  }
github ecmadao / hacknical / frontend / components / HighStock / index.jsx View on Github external
renderChart() {
    return Highcharts.stockChart(update(this.props.config, {
      chart: {
        renderTo: {
          $set: this.highstock
        }
      }
    }))
  }
github TimBroddin / cryptocoincount / src / components / Charts / CoinChart.js View on Github external
seriesData.push([new Date(row.date).getTime(), (worth) ? row.price * amount : row.price]);
        });

        series.push({
          name: name,
          data: seriesData,
          tooltip: {
            valueDecimals: 2,

            shared: true
          },
        });
      }

      this.setState({ loading: false });
      this.chart = Highcharts.stockChart("container", {
        title: {
          text: ``
        },
        xAxis: {
            type: 'datetime',
            ordinal: false
        },
        series,
        tooltip: {
          formatter: function() {
              var s = `<strong>${new moment(this.x).format('MMMM Do YYYY')}</strong><br>`;
              let sum = 0;
              this.points.forEach(function( point, i) {
                  s += `<br><span style="color: ${point.color}">\u25CF</span> ${point.series.name}: ${point.y.toFixed(2)} ${currency}`;
                  sum += point.y;
              });
github Kyson / AndroidGodEye / android-godeye-monitor-dashboard / src / methodcanary / methodcanary_thread.js View on Github external
}

        this.methodInfos = methodInfos;
        if (this.refs.methodCanaryThreadTree) {
            this.refs.methodCanaryThreadTree.refresh(min, max, methodInfos);
        }

        const categories = [];
        for (let i = 0; i &lt; (maxStack + 1); i++) {
            categories.push("");
        }
        const thumbnail_point_width = 5;
        const main_point_width = 20;
        let thumbnail_height = (maxStack + 4) * thumbnail_point_width * 1.5;
        let main_height = 120 + thumbnail_height + (maxStack + 1) * main_point_width * 1.2;
        this.chart = Highcharts.stockChart('chart', {
            chart: {
                type: 'xrange',
                height: main_height,
                zoomType: 'x'
            },
            title: null,
            credits: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            navigator: {
                enabled: true,
                height: thumbnail_height,
                series: {