How do i add annotations ? about highcharts-react HOT 18 CLOSED

annotations not working !
please help me :(

from highcharts-react.

Hi rohankk2,

There should be no problems with the combination of annotations and react wrapper. Did you include annotations module?

require("highcharts/modules/annotations")(Highcharts);

Live demo: https://codesandbox.io/s/9jxnk5zv2w

from highcharts-react.

@rohankk2

import * as Highcharts from 'highcharts';
import * as AnnotationsModule from 'highcharts/modules/annotations';
AnnotationsModule(Highcharts);

from highcharts-react.

This worked for me:

import HighchartsReact from "highcharts-react-official"
import Highcharts from "highcharts/highstock"
import HighchartsExporting from "highcharts/modules/exporting"
import AnnotationsModule from "highcharts/modules/annotations"
AnnotationsModule(Highcharts)

from highcharts-react.

import React,{Component} from "react";
import Highcharts from 'highcharts';
import HighchartsReact from "highcharts-react-official";
import Table1 from './table.js';

require("highcharts/modules/annotations")(Highcharts);

I added the same imports as above. I am still not seeing the annotations. I can pretty much enable most of the other features of highcharts except annotations.
this is how i am calling the required element in render :
<HighchartsReact highcharts={Highcharts} constructorType={'chart'} options={this.state.options} />

 var options = {
            title: {
                text: 'DATA',
                allowDragX: true,
            },
           legend: {
    enabled: true
  },
            chart: {
                type: 'column'
            },
            xAxis: {
                title: {text: 'Point'},
                categories: body2
            },

            yAxis:
                {
                    title: {
                        text: 'Tp',

                    },


                },
             annotations: [{
        labels: [{
            point: 'max',
            text: 'Max'
        }, {
            point: 'min',
            text: 'Min',
            backgroundColor: 'black'
        }]
    }],
            series:
                {
                    name:'Tp',
                    data:  r ,

                },
            credits:{
                enabled:false
            },



        };

The above is my highcharts code.

from highcharts-react.

I tried your exact example. It showed the graph but no annotation loaded!

from highcharts-react.

Hi rohankk2,

As you can see in my example annotations works, so probably there is a problem in your project. Without reproducing this issue I will not be able to help you, so please prepare some live example in codesandbox.

Best regards!

from highcharts-react.

I also had problems using annotations, so I opted flags instead. Never got those annotations to show

from highcharts-react.

@justduy, Could you reproduce your problem with annotations?

from highcharts-react.

@ppotaczek I would recommend try loading annotations with data loaded from a server rather than using hardcoded fields. Moreover, I was able to repro the problem only when i had highchartsReact declared inside a component called charts and then called that component charts in the main index.js file. So if you try the above two things, you should see the problem

from highcharts-react.

@rohankk2, I reproduced the situation you describe and the annotations still work. Perhaps, you use require("highcharts/modules/annotations")(Highcharts) in wrong place. Could you adapt the example below so that we can show the problem?

Live example with dynamic data and separate component: https://codesandbox.io/s/lpq487joyz

from highcharts-react.

Closing due to inactivity.

from highcharts-react.

annotations not working in react js i am using typescript. installed highchart-annotations still not showing annotations

from highcharts-react.

Hello @ashwiniIot, Please reproduce the problem in codesandbox.

from highcharts-react.

I recreated this here:
https://codesandbox.io/s/highcharts-react-demo-forked-q6ex2?file=/demo.tsx

In my case I can't get any line annotations to show up as shown above.

from highcharts-react.

Hi @JonathanGVC,

The problem is not related with highcharts-react, your annotation options are incorrect. Please check the example below.

Live demo: https://codesandbox.io/s/highcharts-react-demo-5uygw?file=/demo.tsx
API Reference: https://api.highcharts.com/highcharts/annotations

from highcharts-react.

@ppotaczek Can you change the example to generate an infinite line, it's the annotation I specifically need and can't get to work. The example can't be expanded to show that type.

from highcharts-react.

It seems that a better choice for you is to use plot lines.

Example: https://codesandbox.io/s/highcharts-react-demo-fork-fpp86?file=/demo.tsx

from highcharts-react.