Home / Questions / 225222
Accepted
nachfren
Asked: 2020-12-23 15:30:23 +0800 CST 2020-12-23 15:30:23 +0800 CST

Use Time property highcharts React

  • 772

I try that for October 28, when the time change is made, highcharts02:00 appears painted on a graph twice the hour.

I got it to work with javascript and using the momentjs library: http://jsfiddle.net/nachfren/ozhqcj39/

The problem comes when I try to pass it to my project with PrimeReact.

import React, { Component } from 'react';
import Highcharts from 'highcharts/highstock'
import HighchartsReact from 'highcharts-react-official'
import {Moment} from 'moment-timezone'  // <- Visual Studio me dice que no estoy usando esta librería.

export class Consumos extends Component {
    constructor() {
        super();
    }

    render() {

        let options = {
            time: {
                timezone: 'Europe/Madrid'
            },
            title: {
                text: 'Consumos'
            },
            credits: {
                enabled: false
            },
            yAxis: {
                title: {
                    text: 'MWh'
                }
            },
            xAxis: {
                type: 'datetime'
            },

            series: [{
                name: Medida,
                data: [[66.11],[73.48],[50.65],[38.69],[70.14],[69.65],[14.66],[5.01],[4.23],[4.94],[3.06],[2.37],[1.98],[1.91],[1.83],[1.61],[1.56],[1.56],[1.57],[1.53],[1.55],[1.56],[1.52],[1.51],[1.98],[1.91],[1.83],[1.61],[1.56],[1.56],[1.57],[1.53],[1.55],[1.56],[1.52],[1.51],[1.98],[1.91],[1.83],[1.61],[1.56],[1.56],[1.57],[1.53],[1.55],[1.56],[1.52],[1.51],[1.98],[1.91],[1.83]],
                pointStart: Date.UTC(2018, 9, 27),
                pointInterval: 36e5//Horario (3600 * 1000)
            }]
        }

        return (

        <div className="ui-fluid">
                <HighchartsReact
                    highcharts={Highcharts}
                    constructorType={'stockChart'}
                    options={options}/>
        </div>
    );
    }
}

This way it paints the time for me 02:00only once. Does anyone see the error I have?

As a reminder, say that the line below indicates that it is not being used.

import {Moment} from 'moment-timezone'

reactjs

1 Answers

  1. Best Answer

    I've managed to get the chart working with React by making the following change:

    Instead of importing like this:

    import {Moment} from 'moment-timezone';

    I have imported it like this:

    window.moment = require('moment-timezone');

    Reason:

    • Highchart expects a global identifier called moment.

    Another solution is

    import {moment} from 'moment-timezone';
window.moment=moment;

    Demo working here

    • 1