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>
A smoother line is needed (the line should rise smoothly and evenly), but the values should not change. Is it possible to build a more straight line without changing the values?
Screen with explanations: http://prntscr.com/qudf96
And my code:
<script>
function reDrawCalc(gdata, gcurr, nums = 2) {
Highcharts.chart('container', {
chart: {
height: 400,
type: 'area',
margin: [20, 0, 20, 0]
},
title: {
text: null
},
subtitle: {
text: null
},
exporting: {
enabled: false
},
xAxis: {
gridLineWidth: 1,
categories: ['One', 'Two', 'Three', 'Four', 'Five']
},
yAxis: {
gridLineWidth: 0,
},
tooltip: {
enabled: false,
crosshairs: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
inside: false,
style: {
fontFamily: 'Rubik, sans-serif',
textTransform: 'uppercase',
fontSize: 'none',
fontWeight: 'normal',
textShadow: 'none'
},
formatter: function() {
return '<div class="chitem-time">'+ this.x+'</div>'
+'<div class="chitem-val">'+ Highcharts.numberFormat(this.y,nums)+'<sup>'+gcurr+'</sup></div>';
}
}
}
},
series: [{
type: 'areaspline',
data: gdata,
lineWidth: 5,
color: '#f0c997',
fillColor:'transparent'
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
chart: {
height: 350,
type: 'area',
margin: [20, 0, 20, 0]
},
series: [{
type: 'areaspline',
data: gdata,
lineWidth: 3,
color: '#f0c997',
fillColor:'transparent'
}],
}
}]
}
});
}
</script>
Is it possible to do it? And how to modify my code for it?
Thank you very much in advance!
As I mentioned in the comment current line shape is at it is because of the points positions on the chart. If you don't need to keep points actual positions the solution which you can use is to use the dummy data for the points and use the correct one in the dataLabels. See:
Demo: https://jsfiddle.net/BlackLabel/fshx3n50/
data: [{
y: 5,
z: 0.20
}, {
y: 10,
z: 1.40
}, {
y: 18,
z: 6.20
}, {
y: 30,
z: 18.00
}, {
y: 50,
z: 73.00
}],
I also changed the formatter function to display the z value in dataLabel:
formatter: function() {
return '<div class="chitem-time">' + this.x + '</div>' +
'<div class="chitem-val">' + Highcharts.numberFormat(this.point.z) + '<sup>REM</sup></div>';
}
Here is a sample fiddle (1) that shows the series name along the line body
(Sessions, Users). How do I make similar label for a highstock chart?
(The label seems to be appearing due to the data module that does the csv processing)
(1) https://jsfiddle.net/4restw8a/9/
Highcharts.chart('container', {
chart: {
scrollablePlotArea: {
minWidth: 700
}
},
data: {
csvURL: 'https://cdn.rawgit.com/highcharts/highcharts/' +
'057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/analytics.csv',
beforeParse: function (csv) {
return csv.replace(/\n\n/g, '\n');
}
},
title: {
text: 'Daily sessions at www.highcharts.com'
},
subtitle: {
text: 'Source: Google Analytics'
},
xAxis: {
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX || e.clientX,
y: e.pageY || e.clientY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
this.y + ' sessions',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'All sessions',
lineWidth: 4,
marker: {
radius: 4
}
}, {
name: 'New users'
}]
});
This comes from the series label module, which you can use by including series-label.js:
<script src="https://code.highcharts.com/modules/series-label.js"></script>
See this JSFiddle example of a Highstock chart with it included.
See this API documentation for its settings.
Below is the fiddle for a Pareto chart. I want to draw a horizontal line parallel to the x-axis which spans from left to right and ends at the 80% mark on the y-axis. I want to do this always while plotting a Pareto chart.
Can you let me know if there's a way to do this dynamically?
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column',
borderWidth:1,
borderColor:'#ccc',
marginLeft:110,
marginRight:50,
//backgroundColor:'#eee',
//plotBackgroundColor:'#fff',
},
title:{
text:'Pareto Test 1'
},
legend:{
},
tooltip:{
formatter:function(){
if(this.series.name == 'Line'){
var pcnt = Highcharts.numberFormat((this.y / 415 * 100),0,'.');
return pcnt + '%';
}
return this.y;
}
},
plotOptions: {
series: {
shadow:false,
}
},
xAxis:{
categories:['A','B','C','D','E','F','G','H'],
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickLength:3,
title:{
text:'X Axis Title',
style:{
color:'#000'
}
}
},
yAxis:[{
min:0,
//endOnTick:false,
//lineColor:'#999',
lineWidth:1,
//tickColor:'#666',
//tickWidth:1,
//tickLength:3,
//gridLineColor:'#ddd',
/* title:{
text:'Y Axis Title',
rotation:0,
margin:50,
style:{
color:'#000'
}
}*/
},{
title:{text:''},
//alignTicks:false,
gridLineWidth:0,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:3,
tickInterval:415 / 20,
endOnTick:false,
opposite:true,
linkedTo:0,
labels:{
formatter:function(){
var pcnt = Highcharts.numberFormat((this.value / 415 * 100),0,'.');
return pcnt + '%';
}
}
}],
series: [{
//yAxis:0,
data: [115,75,60,55,45,30,20,15],
},{
type:'line',
name:'Line',
//yAxis:0,
data: [115,190,250,305,350,380,400,415],
}]
});
<script type="text/javascript" src="http://code.highcharts.com/highcharts.src.js"></script>
<div id="container" style="height: 400px"></div>
You can set this up the same way you calculated what 80% is. See the Fiddle below. Here is some sample code to add plotLines:
plotLines: [{
color: '#FF0000',
width: 2,
value: .80 * 415 // Need to set this probably as a var.
}]
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column',
borderWidth: 1,
borderColor: '#ccc',
marginLeft: 110,
marginRight: 50,
//backgroundColor:'#eee',
//plotBackgroundColor:'#fff',
},
title: {
text: 'Pareto Test 1'
},
legend: {
},
tooltip: {
formatter: function() {
if (this.series.name == 'Line') {
var pcnt = Highcharts.numberFormat((this.y / 415 * 100), 0, '.');
return pcnt + '%';
}
return this.y;
}
},
plotOptions: {
series: {
shadow: false,
}
},
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickLength: 3,
title: {
text: 'X Axis Title',
style: {
color: '#000'
}
}
},
yAxis: [{
min: 0,
//endOnTick:false,
//lineColor:'#999',
lineWidth: 1
//tickColor:'#666',
//tickWidth:1,
//tickLength:3,
//gridLineColor:'#ddd',
/* title:{
text:'Y Axis Title',
rotation:0,
margin:50,
style:{
color:'#000'
}
}*/
}, {
title: {
text: ''
},
//alignTicks:false,
gridLineWidth: 0,
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickWidth: 1,
tickLength: 3,
tickInterval: 415 / 20,
endOnTick: false,
opposite: true,
linkedTo: 0,
labels: {
formatter: function() {
var pcnt = Highcharts.numberFormat((this.value / 415 * 100), 0, '.');
return pcnt + '%';
}
},
plotLines: [{
color: '#FF0000',
width: 2,
value: .80 * 415 // Need to set this probably as a var.
}]
}],
series: [{
//yAxis:0,
data: [115, 75, 60, 55, 45, 30, 20, 15]
}, {
type: 'line',
name: 'Line',
//yAxis:0,
data: [115, 190, 250, 305, 350, 380, 400, 415]
}]
});
<script type="text/javascript" src="http://code.highcharts.com/highcharts.src.js"></script>
<div id="container" style="height: 400px"></div>
What you want to look at is a plot line:
http://api.highcharts.com/highcharts#yAxis.plotLines
{{EDIT:
Also, look here for slightly improved way of getting the data sum dynamically:
Highcharts percentage of total for simple bar chart
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