Use property Time highcharts React

1

I try to see that on October 28, when the time change is made, I am shown on a graph highcharts twice the time 02:00.

I've got it working for me with javascript and using the momentjs library: link

The problem comes when I try to move 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 is how I painted the hour 02:00 just once. Does anyone see the error I have?

As a reminder to say that the line below tells me that it is not being used.

  

import {Moment} from 'moment-timezone'

    
asked by nachfren 23.12.2018 в 00:30
source

1 answer

1

I have managed to make the graph work 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 running here

    
answered by 27.12.2018 / 09:42
source