Related
how to highcharts code new for local to set the values for stacked columnhow to highcharts code new for local to set the values for stacked column how to highcharts code new for local to set the values for stacked column how to highcharts code new for local to set the values for stacked column how to highcharts code new for local to set the values for stacked column
public options: any = {
title: {
text: 'Sales of petroleum products March, Norway',
align: 'left'
},
xAxis: {
categories: ['Jet fuel', 'Duty-free diesel', 'Petrol', 'Diesel', 'Gas oil']
},
yAxis: {
title: {
text: 'Million liter'
}
},
labels: {
items: [{
html: 'Total liter',
style: {
left: '50px',
top: '18px',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'black'
}
}]
},
plotOptions: {
column: {
stacking: 'percent' // normal or percent
},
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
}
},
series: [{
type: 'column',
name: '2020',
data: [59, 83, 65, 228, 184]
}, {
type: 'column',
name: '2021',
data: [24, 79, 72, 240, 167]
}, {
type: 'column',
name: '2022',
data: [58, 88, 75, 250, 176]
}, {
type: 'spline',
name: 'Average',
data: [47, 83.33, 70.66, 239.33, 175.66],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
};
public options1: any = {
chart: {
zoomType: 'xy'
},
colors: ['#7cb5ec', '#91e8e1', '#90ed7d'],
title: {
text: 'Something '
},
subtitle: {
text: 'subsomething'
},
xAxis: [{
categories: ['1/1','2/1','3/1','4/1', '5/1', '6/1','7/1','8/1','9/1','10/1','11/1', '12/1', '13/1', '14/1', '15/1']
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[1]
}
},
min: 0,
max:100,
title: {
text: 'Percent',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'sample',
style: {
color: Highcharts.getOptions().colors[0]
}
},
min: 0,
max: 100,
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[0],
display:'none'
}
},
opposite: true
}],
tooltip: {
shared: false
},
legend: {
layout: 'vertical',
align: 'center',
x: -0,
verticalAlign: 'top',
y: 400,
floating: true,
// backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: [
{
name: 'suff1',
type: 'column',
yAxis: 1,
data: [10, 25, 10,30,80, 20, 25, 10,30,80, 20, 25, 10,30,80],
tooltip: {
valueSuffix: ' %'
}
},
{
name: 'suff2',
type: 'column',
yAxis: 1,
tooltip: {
valueSuffix: ' %'
},
data: [20, 50, 30,30,10, 30, 50, 30,30,10, 30, 50, 30,30,10]
}, {
name: 'suff3',
yAxis: 1,
type: 'column',
tooltip: {
valueSuffix: ' %'
},
data: [30,5, 60, 40, 10, 50,25, 60, 40, 10, 50,25, 60, 40, 10]
},
{
name: 'NS',
type: 'spline',
data: [45,55,74,85,81, 45,55,74,85,81, 45,55,74,85,81],
tooltip: {
valueSuffix: '%'
}
}]
};
Highcharts.chart('container-nps', this.options);
import * as Highcharts from 'highcharts';
<div id="container-nps"></div>
I whant to have tooltip at mouseposition, not only at "real" data (so not getting the series data, but the calculated data).
How to do this?
(the real data is different, not a straight line like in the fiddle)
Highcharts.stockChart('container', {
xAxis: {
type: 'datetime',
startOnTick: false,
endOnTick: false,
tickInterval: 360 * 24 * 3600 * 1000,
crosshair: {
snap: true,
},
},
tooltip: {
split: false,
shared: true,
},
legend: {
enabled: true,
layout: 'proximate',
align: 'right',
itemStyle: {
color: '#000000',
fontWeight: 'bold',
fontSize: '10px',
}
},
series: [{
name: 'Line1',
data: [{
x: (new Date("2000-05-12")).getTime(),
y: 0
},
{
x: (new Date("2050-05-12")).getTime(),
y: 100
},
]
},
{
name: 'Line2',
data: [{
x: (new Date("2000-05-12")).getTime(),
y: 100
},
{
x: (new Date("2050-05-12")).getTime(),
y: 0
},
]
}
]
});
https://jsfiddle.net/nowo/09br3g6m/7/
You need to have points that crosshair can refer to like on the example.
To edit the options you want to show, you have the option of using xAxis.labels.formatter.
xAxis: {
crosshair: {
labels: {
enabled: true,
shape: 'rect',
//format:'{value:%d%y}',
backgroundColor: 'rgb(255,0,0)',
formatter: function(value) {
return 'label: ' + value;
}
},
}
},
yAxis: {
opposite: true,
crosshair: {
label: {
enabled: true,
//format: '{value:.2f}',
shape: 'rect',
padding: 2,
formatter: function(number) {
console.log('here is the numer', number);
return 'test ' + number;
}
}
},
labels: {
align: 'left',
format: '{value:.2f}',
y: 6,
x: 2
}
},
Live demo: https://jsfiddle.net/BlackLabel/8cdyh253/1/
I have the following chart and I would like to increase the distance between y axis labels and the chart (light blue lines) - check the image, more distance between 10k and the blue lines
In y axis I tried to combine the settings of yAxis offset, yAxis labels padding and yAxis title margin, but no success
How do I achieve this?
These are the settings of the chart
options: {
chart: {
updateArgs: [false, false, true],
borderWidth: 1,
marginLeft: 40,
marginRight: 2,
type:'line',
zoomType: 'x',
animation: false,
height:250,
title: {
text: ''
},
panning:true
},
title: {
text: ''
},
time:{
useUTC:true
},
credits:{
enabled:false
},
tooltip: {
shared: true,
formatter: this.tooltipFormatter
},
title:{
text:null
},
lang: {
noData: 'loading...'
},
rangeSelector: {
inputEnabled: false
},
xAxis:{
type:'datetime',
max:this.maxdate,
min:this.mindate,
title:
{
align:'high'
},
labels: {
padding: 50,
format: '{value:%H:%M}',
style: {
fontSize: '10px'
}
},
crosshair: {
enabled: true,
width: 1,
color: '#000'
},
events : {
afterSetExtremes : this.afterSetExtremes
}
},
yAxis: {
title: {
text: this.streamChart.title + ' [' + this.streamChart.unit+']',
margin:20,
fontSize:"15px"
},
labels: {
step: 2,
staggerLines: 2,
enabled:true,
align: 'left',
padding:0
},
alignTicks:'left',
textAlign:'left',
align:'middle',
opposite:false,
offset:0
},
plotOptions: {
series: {
animation: false,
boostThreshold: 1,
pointInterval: 3600 * 1000
}
},
legend: {
enabled: false
},
responsive: {
rules: [{
condition: {
maxWidth: '100%',
minHeight: 300
},
chartOptions: {
subtitle: {
text: null
},
navigator: {
enabled: false
},
legend: {
enabled: false
},
yAxis: {
title: {
enabled: false
}
}
}
}]
}
,series: [{
name:this.streamChart.title,
id:this.streamChart.id,
data:[]
}],
},
Increase chart.marginLeft and enable reserveSpace or align labels by x property:
labels: {
...,
reserveSpace: true
}
Live demo: http://jsfiddle.net/BlackLabel/71gxj4sd/
API Reference:
https://api.highcharts.com/highcharts/yAxis.labels.reserveSpace
https://api.highcharts.com/highcharts/yAxis.labels.x
In an Angular 4 project I am using the angular2-highcharts library to create a stacked bar chart. The following object is the configuration I have so far.
{
title: { text: '' },
xAxis: {
categories: [''],
crosshair: true,
visible: false
},
yAxis: {
min: 0,
max: 100,
title: {
text: ''
},
labels: {
enabled: true
},
visible: false
},
chart: {
type: 'bar',
backgroundColor: 'rgba(255, 255, 255, 0.1)'
},
legend: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function() {
return this.point.y + '%';
},
inside: true
},
enableMouseTracking: false,
},
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function () {
if (this.point.y) {
return this.point.y + '%';
}
return '';
},
style: { fontSize: '10px' },
padding: 10
},
borderWidth: 0
}
},
series: [{
name: 'Pending',
data: ...,
color: '#ff4233'
}, {
name: 'Executed',
data: ...,
color: '#34d788'
}, {
name: 'Cancelled',
data: ...,
color: '#8f8c87'
}]
}
and this produces this visual result ->
I need to transform this into ->
As you see in the desired result the chart has more height and also its edges are round. That I don't know how to do.
Have you tried to use rounded-corners plugin? With it you can use following properties:
borderRadiusTopLeft, borderRadiusTopRight, borderRadiusBottomRight and borderRadiusBottomLeft
Plugin Reference:
https://github.com/highcharts/rounded-corners
Example:
http://jsfiddle.net/3Lhzx8ao/
I have a sample Highchart that I'm try to load JSON data without any luck. I see the data return in firebug but the chart bar and line doesn't get drawn. You can see my chart here jsfiddle.net. I know I'm missing something, but I can't seem to put my fingers on it. Any help would greatly appreciated, thank you in advance.
This is my code:
$(function() {
var options = {
chart: {
renderTo: 'container',
zoomType: 'xy'
},
title: {
text: 'JSON Chart'
},
subtitle: {
text: '2012 vs 2011'
},
credits: false,
xAxis: [{
categories:['1','2','3','4','5','6','7','8','9','10']
}],
yAxis: [{ // Primary yAxis
min: 0,
max: 15000,
tickInterval: 1000,
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
},
style: {
color: '#89A54E'
}
},
title: {
text: '2012',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
min: 0,
max: 15000,
tickInterval: 1000,
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
},
style: {
color: '#4572A7'
}
},
title: {
text: '2011',
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
formatter: function() {
return Highcharts.numberFormat(this.y, 0);
}
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 40,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: '2011',
type: 'column',
yAxis: 1,
data: []
}, {
name: '2012',
type: 'spline',
data: []
}]
};
});
$.getJSON('data.cfm', function(json) {
options.series = json;
var chart = new Highcharts.Chart(options);
})
Here's what data.cfm return:
[[9233,14837,11442,8080,10302,5373,2450,9612,18656,8999],[7963,7845,8646,5130,2570,8936,17487,9141,6728,6046]];
Shoulnt it be?
options.series[0].data=json[0];
options.series[1].data=json[1];
This might be of use: http://livecoding.gabrielflor.it/3351656