You should change in component same like below
Import Highcharts and funnel
import * as Highcharts from 'highcharts';
require('highcharts/modules/funnel')(Highcharts);
declare
var require: any;
chart: any;
Add this in ngOnInit
Highcharts.chart('jaibalaya', {
chart: {
type: 'pyramid'
},
title: {
text: '',
x: -50
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: 'black'
}
}
},
legend: {
enabled: true
},
credits: {
enabled: false
},
series: [{
data: [
['Inactive', 15],
['Small', 20],
['Medium', 25],
['Big', 20],
['Top', 10]
]
}]
});
Changes in HTML
<div id="jaibalaya" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto">
</div>
To change the colors in pyramid chart, you can use the colors array:
Highcharts.chart('jaibalaya', {
chart: {
type: 'pyramid'
},
colors: ['red', 'yellow', 'blue', 'green', 'orange'],
...
});
Live demo: http://jsfiddle.net/BlackLabel/0vqr35jn/
API Reference: https://api.highcharts.com/highcharts/colors
Related
Below is the highchart application iam working.In mounted i will call axios post that will fetch x axis lables as array.But the x axis categories of highchart is not updating with the given array
Below is the code
<template>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="container" style="min-width: 100%; max-width:100%; height: 600px; margin: 0 auto"></div>
</div>
</div>
</div>
</template>
<script>
var $ = require('../../node_modules/jquery/dist/jquery.js')
var Highcharts = require('highcharts')
// Load module after Highcharts is loaded
require('highcharts/modules/exporting')(Highcharts)
// Create the chart
$(function () {
Highcharts.chart('container', {
chart: {
marginTop: 120,
marginBottom: 100,
type: 'bar'
},
credits: {enabled: false},
exporting: {enabled: false},
legend: {
enabled: true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'right',
verticalAlign: 'bottom',
margin: 50,
reversed: true
},
title: {text: null},
tooltip: {},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'viewers',
color: '#006666',
pointWidth: 40,
data: [8, 16]
}, {
name: 'calls',
color: '#00FF00',
pointWidth: 40,
data: [7, 14]
}, {
name: 'chats',
color: '#FF8C00',
pointWidth: 40,
data: [8, 16]
}],
xAxis: {
categories: [],
labels: {
overflow: 'right',
display: 'block',
align: 'left',
x: 5,
style: {
fontSize: '1em',
color: '#000',
width: '500px'
}
}
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: ''
}
}
})
})
export default {
data () {
return {
}
},
mounted () {
//will fetch labels from db
var arr = ['computers', 'games']
this.catList = arr
}
}
</script>
<style scoped>
.container{
margin: 0 auto;
}
#container{
margin: 0 auto;
min-width: 100%;
padding: 0;
max-width:100%;
height: 400px;
margin: 0 auto;
}
</style>
Please give solution to above problem.
To make categories reactive, you should put Highchart code inside component
Note that in xAxis config, we need to put categories: this.categories
new Vue({
el: '#app',
data() {
return {
chart: null,
categories: []
}
},
mounted() {
this.drawChart()
// example after pull data
var arr = ['computers', 'games']
const vm = this;
setTimeout(function() {
vm.categories = arr
vm.drawChart()
}, 2000)
},
methods: {
drawChart() {
if (this.chart) {
this.chart.destroy();
}
this.chart = Highcharts.chart('container', {
chart: {
marginTop: 120,
marginBottom: 100,
type: 'bar'
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
legend: {
enabled: true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'right',
verticalAlign: 'bottom',
margin: 50,
reversed: true
},
title: {
text: null
},
tooltip: {},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'viewers',
color: '#006666',
pointWidth: 40,
data: [8, 16]
}, {
name: 'calls',
color: '#00FF00',
pointWidth: 40,
data: [7, 14]
}, {
name: 'chats',
color: '#FF8C00',
pointWidth: 40,
data: [8, 16]
}],
xAxis: {
categories: this.categories,
labels: {
overflow: 'right',
display: 'block',
align: 'left',
x: 5,
style: {
fontSize: '1em',
color: '#000',
width: '500px'
}
}
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: ''
}
}
})
}
}
})
Working example: https://jsfiddle.net/a9eqd8th/
I have tried to add border for selected series. Please adivise
series: [{
showInLegend: false,
name: 'Twitter Trending',
colorByPoint: true,
data: dataArr,
select: {
borderWidth: 4,
borderColor: '#e4b0b2'
},
allowPointSelect: true
}]
Reference Screenshot
In order to get desired result, plotoptions will be
plotOptions: {
series: {
allowPointSelect: true,
states: {
select: {
borderWidth: 4,
borderColor: '#e4b0b2'
}
}
}
},
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
allowPointSelect: true,
states: {
select: {
borderWidth: 4,
borderColor: '#e4b0b2'
}
}
}
},
series: [{
name: 'John',
data: [3, 4, 4, 2, 5],
showInLegend: false,
name: 'Twitter Trending',
colorByPoint: true,
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
I was trying to implement progress-bar/status-bar in highchart, need to show 2 colors for the progress bar/status bar one background color and another color for status/progress, achieved using stacking bar in highchart but first rectangle in that
have white stroke color so it differentiating 2 rectangles but i need to show it as single rectangle instead of 2,Is there anyway to remove that white stroke color to show as single one.
<html>
<head>
<script src="highchart.js"></script>
</head>
<body>
<div id="container" style="min-width: 100px; max-width: 200px; height: 50px; margin: 0 auto"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: {
tickColor: '#FFFFFF',
tickWidth: 1,
categories: [''],
labels:{
enabled: false
},
visible:false
},
title:{
text:''
},
yAxis: {
gridLineColor: '#FFFFFF',
minorGridLineWidth: 0,
lineColor: '#FFFFFF',
gridLineWidth: 0,
title: {
text: ''
},
labels:{
enabled: false
},
visible:false
},
exporting: { enabled: false },
legend:{
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
enabled: false
},
colors:['#999999', '#8BF30D', '#FFFFFF'],
series: [
{
name: '',
data: [1]
}, {
name: '',
data: [5]
},{
name: '',
data: [0]
}]
});
</script>
</body>
</html>
I think that you should be able to use borderWidth parameter that is described in Highcharts API:
http://api.highcharts.com/highcharts/plotOptions.column.borderWidth
plotOptions: {
series: {
stacking: 'normal',
borderWidth: 0
}
},
When you will use this parameter you will be able to eliminate white border from your columns. I have made an example how your chart will work using this option:
http://jsfiddle.net/rvj65mor/1/
I was trying to implement progress bar/status bar in HighChart, but some how highchart axis line not able to remove from the chart, tried with gridlinewidth grid line color but still the axis line shows up in the UI. is there any attribute to remove this
<html>
<head>
<script src="highchart.js"></script>
<script src="exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 210px; max-width: 300px; height: 50px; margin: 0 auto"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: {
tickColor: '#FFFFFF',
tickWidth: 1,
categories: [''],
labels:{
enabled: false
}
},
title:{
text:''
},
yAxis: {
gridLineColor: '#FFFFFF',
minorGridLineWidth: 0,
lineColor: '#FFFFFF',
gridLineWidth: 0,
title: {
text: ''
},
labels:{
enabled: false
}
},
exporting: { enabled: false },
legend:{
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
enabled: false
},
series: [{
name: '',
data: [5]
}, {
name: '',
data: [5]
},{
name: '',
data: [0]
}]
});
</script>
<style>
.chart-container .highcharts-grid {
display: none;
}
</style>
</body>
</html>
When chart type is set to bar, axes are reversed, try:
xAxis: {
visible: false
},
yAxis: {
visible: false
},
I have the following High Chart of type Bar. I did some online search on how to hide the grid lines , I was able to hide grid lines except first line. can anybody suggest me where i am the doing the mistake.
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
$(function () {
$('#container').highcharts({
chart: {
width:300,
height: 100,
type: 'bar'
},
title: {
text: ''
},
title: {
text: ''
},
xAxis: {
categories: ['Wind', 'Flood', 'EQ'],
tickWidth: 0,
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: ''
},
gridLineColor: 'transparent',
minorGridLineWidth: 0
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
}, legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
labels:
{
enabled: false
},
exporting: { enabled: false },
plotOptions: {
series: {
borderWidth: 0,
minPointLength:10 ,
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [10],
color: '#9CC7DC'
}, {
name: 'Jane',
data: [21],
color: '#72AFCD'
}, {
name: 'Joe',
data: [31],
color: '#1479ac'
}]
});
)};
You need to disable axis line by setting lineWidth parameter as 0.