score:1
Using lit-element
Highcharts and its modules can be loaded like following:
import 'highcharts';
import 'highcharts/modules/exporting';
import 'highcharts/modules/boost'
import 'highcharts/highcharts-more';
Component config:
import { LitElement, html } from 'lit-element';
import 'highcharts';
import 'highcharts/modules/exporting';
import 'highcharts/modules/boost'
import 'highcharts/highcharts-more';
class ChartTest extends LitElement {
firstUpdated(changedProperties) {
this._enableChart();
}
render() {
return html`
<div id='container' style='width:500px;height:300px;border: 1px red solid;'>sfsdfs</div>
`;
}
_enableChart() {
Highcharts.chart(this.shadowRoot.querySelector('#container'), {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
]
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
type: 'column'
}]
});
}
}
Source: stackoverflow.com
Related Query
- Highchart stockChart Installation in Web Component
- Call an angular component method when we click on highchart series
- Highcharts: StockChart initialization with new Highchart
- change VueJS component data value from inside Highchart event
- Vue js + HighChart - how can I make a synchronous axios call before the component get rendered?
- How to get image of graph from highchart in web page only?
- Strange character in the Highstock source code
- Why does my Highchart look different when I transfer my code from Jsfiddle to my server?
- I had follow someone code samples and try apply to my HighChart program but I can't get it work at all
- How to implement date selector to HighChart StockChart in reactjs (without jQuery)
- Column based Highchart drilldown series assign color code to each column
- x-axis, y-axis lines does not appear, when I include 3D chart library of HighChart in my code
- Highchart draggable point - watch changes from component
- Old highchart data in react component when going back and forward
- why my highchart code is not working?
- Highchart Spider web chart, pointPlacement and tickInterval
- HighChart Chart displaying incorrect data when switched to StockChart
- How to render Gantt Highchart from data source
- Highchart spline Cut Off when reach to maximum scale value. How can it fixed?. I have attached may sample code on body
- I am trying to include india map in my highchart code
- How to make highchart points redirect to another component with value in React?
- Highchart StockChart - Update last point value
- Angular dynamic highchart integration - response is not updating in the chart component
- Highchart map does not support IRS country code
- Highchart spider web chart
- Highchart spider web more categories
- Highchart - spider web chart - chart appears and part of the chart disappears
- Highchart columnrange, color code lines based on data
- how to hide highchart x - axis data values
- Highchart specific width stack column bar graph
More Query from same tag
- Generate a line chart over column chart using highcharts
- Mix categories and subtasks in HighCharts Gantt?
- I was trouble with tittle of the Highcharts
- How to add percent symbol with data inside column in highchart?
- change particular line chart series colour dynamically in highcharts
- The graph disappear after change marker style and then change the line color
- Show tooltip in column chart when hovering crosshair line
- Highstocks compare stocks how to define data?
- Highcharts: chart with strange characters
- Using colour and shapes together in legend
- Make stack label disabled for a column in stacked column graph in Highcharts
- Highcharts two charts on page
- DataLabels on series with many points
- Bubble chart cannot reduce bubbles
- Remove month from the axisX in highcharts.js
- How to add a background image (pattern) to highchart column graph?
- Highcharts { pie } - style for only for sliced out slice
- how to avail bg color for every bar in highchart
- How to modify highstock chart so that it can be used for displaying ranks (Lowest values on highest points)
- Highcharts: Update several series at once, for smoother animation
- PhoneGap and Highcharts
- Highcharts stacked column chart is missing some values?
- HighCharts : Tooltips exist but line is not drawn in the chart
- Different data with same series name
- Javascript loads fine on index page, but not in other pages
- Highcharts and Java: saving image on server side
- JavaScript in laravel-dompdf
- Remove [Object] label in highchart
- How to Create Custom Shapes in R Highcharter
- Highcharts column click position