score:1
you're using a feature called shadow dom which will encapsulate the template of your component behind a shadowroot
node. therefore the .container
div is not accessible via query selectors and highcharts won't be able to find it.
instead you can also pass a reference to a dom element, and you can get such a reference from your template with the ref
prop on any element, i. e.
containerref?: htmldivelement;
render() {
return <div ref={el => this.containerref = el} />;
}
and then you can pass that into your highchart creation code, but you'll have to do this in the componentdidload
callback because the container reference will only be availble then.
componentdidload() {
if (!this.containerref) {
return; // just a fail-safe
}
highcharts.chart(this.containerref, options);
}
however it seems like you're only wanting to render a chart in your component and nothing else, so you could instead also use the component's host element (i. e. <my-chart>
) as the container. the host reference can be retrieved with the @element
decorator and is available in componentwillload
already.
import { h, component, element, host } from '@stencil/core';
import * as highcharts from 'highcharts';
@component({ tag: 'my-chart', shadow: true })
export class mychart {
@element() host: htmlmychartelement;
chart: highcharts.chart; // only if you need a reference to the chart for later
componentwillload() {
this.chart = highcharts.chart(this.host, options);
}
render() {
return <host />;
}
}
Source: stackoverflow.com
Related Query
- How is the proper way to use HighCharts with StencilJS?
- how can I use rangeselector and navigation in highcharts in the given code
- How to use highcharts with angular 5?
- How to export the whole page or html content with Highcharts not just the chart?
- How To Use Epoch Time With Highcharts Series Data?
- How to use highcharts with princeXML?
- How do I use an Highcharts Solid Gauge in angular 6 with typescript?
- Is there any way we can use Highcharts with mPDF converter?
- How do I use Highcharts to display candlestick with small values?
- How to use Highmaps and Highcharts with Meteor?
- Highcharts : How do I keep the marker formatting and make the click event fire with a 5K+ point scatter plot?
- how to display 2 same highcharts without duplicate the code
- How to merge two Highcharts container with the same legend-item
- How to use Highcharts React to create chart with multiple lines for same XAxis?
- How do I export the content of a page as either jpg or pdf with Highcharts and scrollable data?
- how to use highcharts tooltip formatter in python code
- How can I make milestone lines with a GANTT chart using the highcharts library?
- How do I use dates from a LinkedHashMap for the x-axis on a Highcharts line graph (using Thymeleaf)?
- how to create a highcharts area with the top area highlighted?
- How to convert string array to ints to use with Highcharts
- How can I display crosshair labels on top of the chart with Highcharts
- How to use jspdf to print and download the multiple highcharts contents in pdf format
- How to use highcharts in reactjs with fetched data from API
- How to tell Highcharts to set date on the x axis, and use a range of time (like 1 day)
- What's the code in Highcharts such that the bars (columns) in the same group use the same color?
- Highcharts how to use a percentage area with time
- I want to update my series dynamically on highcharts with a click & also bring it to the original way by clicking on an other button (#previous)
- How to make hover effect for two bar in highcharts at the same time is there any way by using css or any inbuilt method to achieve this?
- In highcharts how can I provide data with values x, y, title so that I can put the title in the tooltip?
- How can I make HighCharts 4.2.5 with boost.js invoke the tooltip formatter?
More Query from same tag
- Highcharts & tooltip error
- C#JSON serialization
- how to show one more array in the tooltip using highchart?
- Highcharts to display area range and line chart with data from a CSV file
- Trying to get highchart example working on local machine
- Why doesn't highcharts refresh this chart correctly?
- Legends display order in piechart highcharts
- Different tooltip and value in Treemap || Highcharts
- Highcharts Pie Slice Offset on Legend Click
- Bootstrap - Highcharts not showing
- Highstock disable tooltip for one series
- Highcharts SetData Only Works One Time
- Highcharts: How to represent time of the day on x axis in HH:MM:SS format?
- How to add a second series in highcharts
- Multiple columns on same series. Highchart
- Highcharts adding array of variable to series
- Highchart overflows modal window
- Highcharts: xAxis with vertical gridlines
- How to deal in Highcharts with special characters from CSV file?
- Highcharts Pie chart multi line labels overlapping
- Text Ellipsis in bubble chart
- Highcharts - How to I disable a series when I enable another one?
- Highcharts not displaying with csv/json and Flask
- Angularjs highcharts and modal windows clear previous chart
- multiple charts using highcharts
- How can you change the "label" (valueSuffix) on a highcharts gauge after the gauge has been created?
- Highcharts variable pie legendItemClick does not hide or update data
- TEMP_DATA value must be same but it is changing
- Can color of data label be different inside and outside of the bar in Highchart
- highcharts unresponsibe graphics on Amazon Linux server