score:0
it's working. angular2-seed-ng2highcharts
ref: https://github.com/angularshowcase/angular2-seed-ng2-highcharts
chart.html:
-------------
<div [ng2-highcharts]="chartgauge" class="graph" ></div>
chart.component.ts:
------------------
add series option within the chart option.
chartgauge = {
chart: {
type: 'solidgauge'
},
title: {
text: 'asup'
},
pane: {
center: ['50%', '70%'],
size: '140%',
startangle: -90,
endangle: 90,
background: {
backgroundcolor: (highcharts.theme && highcharts.theme.background2) || '#eee',
innerradius: '60%',
outerradius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: true
},
// the value axis
yaxis: {
min: 0,
max: 200,
title: {
text: 'speed'
}
stops: [
[0.5, '#ff5252'], // red*
[0.9, '#69f0ae'] // green
],
linewidth: 0,
minortickinterval: null,
tickamount: 1,
title: {
y: -40
},
labels: {
y: 15
}
},
plotoptions: {
solidgauge: {
datalabels: {
y: 25,
borderwidth: 0,
usehtml: true
}
}
}
series: [{
name: 'speed',
data: [80],
datalabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((highcharts.theme && highcharts.theme.contrasttextcolor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valuesuffix: ' km/h'
}
}]
};
score:1
here's a demo for solid-gauge in angluar2 with angular2-highcharts
.
http://plnkr.co/edit/6etk5kldxplws6v6dk3w?p=preview
i have imported both required files: highcharts-more
and modules/solid-gauge
from same version as the one used by angular2-highcharts
(btw. this is a third party in relation to highcharts). you can see that in systemjs.config.js
file lines 18-19 and in app/main.js
lines 4-8. in latter group of lines the additional files are initialized on highcharts.
the demo i have posted is based on angular2-highcharts
demo for using highcharts with modules: http://plnkr.co/edit/4eifda2ippcjykonsqqj?p=preview
important parts of the code:
app/main.js:
...
import { chart_directives, highcharts } from 'angular2-highcharts';
import highchartsmore from 'highcharts/highcharts-more';
import hcsoldgauge from 'highcharts/modules/solid-gauge';
highchartsmore(highcharts);
hcsoldgauge(highcharts);
...
systemjs.config.js:
...
'angular2-highcharts': 'https://cdn.rawgit.com/gevgeny/angular2-highcharts/0.1.0/dist',
'highcharts/highstock.src': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/highstock.js',
'highcharts/highcharts-more': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/highcharts-more.js',
'highcharts/modules/solid-gauge': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/modules/solid-gauge.js'
...
Source: stackoverflow.com
Related Query
- Include additional highcharts source data in angular2 app
- Highcharts - Export CSV include additional data
- Set Additional Data to highcharts series
- Add additional data to a Highcharts series for use in formatters
- Add additional data to Pie Tooltip on Highcharts
- Highcharts - Global configuration with common code and unique data & Headings
- highcharts show additional custom data in tooltip
- How do i add mouse wheel code in Angular2 highcharts in typescript
- Highcharts Additional data in Tooltip
- Highcharts with datetime and also additional data (tooltip text)
- Add an additional point to highcharts live data
- Highcharts display label for pie chart using html table as data source
- Highcharts series visibility with csv data source
- How filter json data with date from datepicker Angular2 app
- Visualizing Data via Highcharts and Django-Chartit2 on App Engine
- HTML table as data source for highstock charts using highcharts
- How to have multiple highcharts with different series data in vuejs without repeating code
- Using a flask variable as data source for highcharts
- Error: Data source must be a URL for refresh | console error | javascript | Highcharts
- Highcharts cloud issue with data source when duplicating chart
- HighCharts Bubble graph JSON as data source
- Use HTML class as Highcharts table data source
- Use Node.js as data source for highcharts
- how do i link my sqlite(PDO) databse data to highcharts code
- Setting Additional Data to highcharts tooltip with formatter doesn't work if points count exceed threshold
- How to include data from point in Highcharts xAxis label?
- HighCharts - When I download csv, can I switch data source to new one?
- Add additional data in tooltip of Highcharts with dynamic x-axis category
- Highcharts displays series names but missing data points from json source
- Highcharts - additional data with Json
More Query from same tag
- Convert Base64 to normal PNG for copy/pasting
- HighCharts. How to set a fixed width for a chart grid, not including labels?
- Line graph is not showing data from database
- jQuery/AJAX data loading & replacement in Highcharts
- Highcharts heatmap without fixed non-temporal axis
- Is there a way to save highcharts output as png instead of html
- Highcharts server post request issue
- How to see truncated text with hover in highcharts?
- Highcharts -- Getting categories from mysql
- Read back chart details from highchart in json
- highchart activity gauge chart using json data from a file
- Highstock disable tooltip for one series
- Remove the Z Axis Column Line in Highcharts 3D
- Can we have same category name in X axis of Highcharts
- Changing the color of a background with highcharts.js
- Highcharts add new data to series after click
- How to add tooltip on the render image in highcharts?
- Highstock- show full data sets on x axis
- Monthly data in highcharts without explicitly providing all month label
- Highcharts - Drag ColumRange
- Printing table with charts in html through FireFox
- Dynamically display percent on y-axis using highchart
- Highcharts.stockChart is not a function
- Plotting a scatterplot/bubbleChart along with Columnrange graph in highcharts
- How to input plot data into highcharts with rails
- Highcharts with JSON to customize multiple series
- HighMaps Zoom add bright instead of do zoom properly
- How to position rangeSelector buttons to the right Highstock/Highcharts
- the datatime value displayed not correct on highchart
- Highcharts not showing all labels for rows