Type '{ text: string; }' is not assignable to type 'TitleObject'. in highcharts

Question

When I use HighCharts angular so I get this error, Type '{ text: string; }' is not assignable to type 'TitleObject'.

const sampleData: Highcharts.Chart = {
      chart: {
        type: 'column',
      },
      title: { text: 'Total Predected Revenue Vs Actual Revenue' },
      xAxis: {
        categories: [
          '2010',
          '2011',
          '2012',
          '2013',
          '2014',
          '2015',
          '2016',
          '2017',
        ],
        crosshair: true,
      },
      yAxis: {
        min: 0,
      },
      series: [
        {
          name: 'Predected',
          data: [14, 17, 9, 10, 6, 19, 6, 8] ,
        } ,
        {
          name: 'Actual',
          data: [65, 74, 44, 66, 9, 23, 36, 51],
        },
      ],
    };

for Title, categories,yaxis, and for data i get the error Type '{ }' is not assignable to type ' '. in highcharts

Have you considered to use the Highcharts-Angular official wrapper? Please get to know with the documentation and demo base: https://github.com/highcharts/highcharts-angular — Sebastian Wędzel, Jun 02 '20 at 15:01

score 0 · Answer 1 · answered Jun 02 '20 at 14:15

0

Try to create an instance of the Chart class.

const sampleData = Highcharts.Chart(options = {...})

answered Jun 02 '20 at 14:15

ruth

29,535
4
30
57

score 0 · Answer 2 · answered Jun 02 '20 at 14:40

I just Checked the source code of highcharts at https://github.com/highcharts/highcharts.

I notice TitleObject is subClass of SVGElement. So dive deeper in SVGElement class definition

class SVGElement {
    public constructor();
    [key: string]: any;
    public element: (HTMLDOMElement|SVGDOMElement);
    public hasBoxWidthChanged: boolean;
    public parentGroup?: SVGElement;
    public pathArray?: SVGPath;
    public r?: number;
    public renderer: SVGRenderer;
    public rotation?: number;
    public shadows?: Array<(HTMLDOMElement|SVGDOMElement)>;
    public oldShadowOptions?: Highcharts.ShadowOptionsObject;
    public styles?: CSSObject;
    public textStr?: string;
    public x?: number;
    public y?: number;
    public add(parent?: SVGElement): SVGElement;
    public addClass(className: string, replace?: boolean): SVGElement;
    public afterSetters(): void;
}

at here https://github.com/highcharts/highcharts/blob/d1be8b45541bc903e7c3c3cacd010956a3a5db01/ts/parts/SVGElement.ts you will notice there is no 'text' property.I suppose HighCharts update 'text' to 'textStr'.

Type '{ text: string; }' is not assignable to type 'TitleObject'. in highcharts

2 Answers2