Styjun

Why is there no havdallah when going from Yom Tov into Shabbat?

Did Karl Marx ever use any example that involved cotton and dollars to illustrate the way capital and surplus value were generated?

How to reply to small talk/random facts in a non-offensive way?

Is adding a new player (or players) a DM decision, or a group decision?

How risky is real estate?

Require advice on power conservation for backpacking trip

Is there any evidence that the small canisters (10 liters) of 95% oxygen actually help with altitude sickness?

How to split an equation over two lines?

Low-gravity Bronze Age fortifications

C-152 carb heat on before landing in hot weather?

What happens when I sacrifice a creature when my Teysa Karlov is on the battlefield?

Should I include salary information on my CV?

Alphabet completion rate

Peace Arch without exiting USA

Go Get the Six Six-Pack

How well known and how commonly used was Huffman coding in 1979?

Do French speakers not use the subjunctive informally?

Animation advice please

Do flight schools typically have dress codes or expectations?

Why do some professors with PhDs leave their professorships to teach high school?

What sort of mathematical problems are there in AI that people are working on?

Change CPU MHz from Registry

Is my Rep in Stack-Exchange Form?

How to append a matrix element by element

Highchart : Add data padding for left stepped area last point

Highchart - line or area not starting at the left pointCentering a data label in Highcharts Bar ChartHIghcharts: How to create an area range chart with hard coded data?highcharts stacked areaShow value of last point as label or tooltip on Highcharts Stock ChartHighcharts - Realtime area chart not stacking properlyConnect Highcharts step line to and from the x extremesHighcharts: having trouble recreating stacked area chart from Excel with positive and negative valuesArea Chart with overlapping series in highcharts, overlap point behaving strangelyHighcharts: Custom dataGrouping approximation: dataGroups cropped by chart area

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

When last value in left stepped area is different from previous one it is hard to see it. (we just see a line along the end of the chart)

Demo:
https://jsfiddle.net/x2qf5wuy/1/

$("#container").highcharts(
 chart: 
 type: 'area'
 ,

 plotOptions: 
 area: 
 stacking: 'normal',
 step: 'left'
 
 ,
 series: [
 name: "Example 1",
 data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 0]
 , 
 name: "Example 2",
 data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 10]
 ]
);

There is a way in highchart to add an artificial padding to data series so that the user can see the last point ?

Wanted result :

highcharts

share|improve this question

edited Mar 25 at 10:35

fabien-michel

asked Mar 25 at 10:28

fabien-michelfabien-michel

74455 silver badges2626 bronze badges

add a comment | 

1

When last value in left stepped area is different from previous one it is hard to see it. (we just see a line along the end of the chart)

Demo:
https://jsfiddle.net/x2qf5wuy/1/

$("#container").highcharts(
 chart: 
 type: 'area'
 ,

 plotOptions: 
 area: 
 stacking: 'normal',
 step: 'left'
 
 ,
 series: [
 name: "Example 1",
 data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 0]
 , 
 name: "Example 2",
 data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 10]
 ]
);

There is a way in highchart to add an artificial padding to data series so that the user can see the last point ?

Wanted result :

highcharts

share|improve this question

edited Mar 25 at 10:35

fabien-michel

asked Mar 25 at 10:28

fabien-michelfabien-michel

74455 silver badges2626 bronze badges

add a comment | 

When last value in left stepped area is different from previous one it is hard to see it. (we just see a line along the end of the chart)

Demo:
https://jsfiddle.net/x2qf5wuy/1/

$("#container").highcharts(
 chart: 
 type: 'area'
 ,

 plotOptions: 
 area: 
 stacking: 'normal',
 step: 'left'
 
 ,
 series: [
 name: "Example 1",
 data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 0]
 , 
 name: "Example 2",
 data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 10]
 ]
);

There is a way in highchart to add an artificial padding to data series so that the user can see the last point ?

Wanted result :

highcharts

share|improve this question

edited Mar 25 at 10:35

fabien-michel

asked Mar 25 at 10:28

fabien-michelfabien-michel

74455 silver badges2626 bronze badges

$("#container").highcharts(
 chart: 
 type: 'area'
 ,

 plotOptions: 
 area: 
 stacking: 'normal',
 step: 'left'
 
 ,
 series: [
 name: "Example 1",
 data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 0]
 , 
 name: "Example 2",
 data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 10]
 ]
);

share|improve this question

edited Mar 25 at 10:35

fabien-michel

asked Mar 25 at 10:28

fabien-michelfabien-michel

74455 silver badges2626 bronze badges

share|improve this question

edited Mar 25 at 10:35

fabien-michel

asked Mar 25 at 10:28

fabien-michelfabien-michel

74455 silver badges2626 bronze badges

asked Mar 25 at 10:28

fabien-michelfabien-michel

74455 silver badges2626 bronze badges

asked Mar 25 at 10:28

fabien-michelfabien-michel

74455 silver badges2626 bronze badges

1 Answer
1

active

oldest

votes

1

You can add a point with the same y value as the last series point and use the setExtremes method to show only the wanted part of the area:

chart: 
 type: 'area',
 events: 
 load: function() 
 var series = this.series[1],
 lastPoint = series.data[series.data.length - 1];

 series.addPoint(
 x: lastPoint.x + 100,
 y: lastPoint.y
 , false);
 this.xAxis[0].setExtremes(null, lastPoint.x + 0.5);
 
 
,

Live demo: https://jsfiddle.net/BlackLabel/54a6jdgy/

API Reference:

https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

share|improve this answer

edited Mar 25 at 11:16

answered Mar 25 at 10:33

ppotaczekppotaczek

10.1k11 gold badge22 silver badges1111 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for the response. It's not about the zero value, but about the last point of the serie. I've added a picture to show wanted result
  
  – fabien-michel
  Mar 25 at 10:37
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi @fabien-michel, Sorry for missunderstanding and thakns for the image. You can add a point and change the axis extremes: jsfiddle.net/BlackLabel/3ebvta1h
  
  – ppotaczek
  Mar 25 at 10:48
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It work as expected, thank for your answer ! I was hoping for less "hacky" solution which not involve modifying serie's data
  
  – fabien-michel
  Mar 25 at 10:56
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  In my real use case, the graph can display up to many thousand of points in a serie which mean that "adding a point" can not be enough in some cases / user screen, etc... I was hoping for a solution taking care of that
  
  – fabien-michel
  Mar 25 at 10:59
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @fabien-michel, Every series in Highcharts represents data, so to change the series graphic it is best to change the data. It seems that this is the only solution, but you can customize it to suit more of your cases. For example, you can change the x value of added point so that it never appears on a user screen: jsfiddle.net/BlackLabel/huxfvdt8
  
  – ppotaczek
  Mar 25 at 11:11
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55335736%2fhighchart-add-data-padding-for-left-stepped-area-last-point%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

You can add a point with the same y value as the last series point and use the setExtremes method to show only the wanted part of the area:

chart: 
 type: 'area',
 events: 
 load: function() 
 var series = this.series[1],
 lastPoint = series.data[series.data.length - 1];

 series.addPoint(
 x: lastPoint.x + 100,
 y: lastPoint.y
 , false);
 this.xAxis[0].setExtremes(null, lastPoint.x + 0.5);
 
 
,

Live demo: https://jsfiddle.net/BlackLabel/54a6jdgy/

API Reference:

https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

share|improve this answer

edited Mar 25 at 11:16

answered Mar 25 at 10:33

ppotaczekppotaczek

10.1k11 gold badge22 silver badges1111 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for the response. It's not about the zero value, but about the last point of the serie. I've added a picture to show wanted result
  
  – fabien-michel
  Mar 25 at 10:37
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi @fabien-michel, Sorry for missunderstanding and thakns for the image. You can add a point and change the axis extremes: jsfiddle.net/BlackLabel/3ebvta1h
  
  – ppotaczek
  Mar 25 at 10:48
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It work as expected, thank for your answer ! I was hoping for less "hacky" solution which not involve modifying serie's data
  
  – fabien-michel
  Mar 25 at 10:56
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  In my real use case, the graph can display up to many thousand of points in a serie which mean that "adding a point" can not be enough in some cases / user screen, etc... I was hoping for a solution taking care of that
  
  – fabien-michel
  Mar 25 at 10:59
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @fabien-michel, Every series in Highcharts represents data, so to change the series graphic it is best to change the data. It seems that this is the only solution, but you can customize it to suit more of your cases. For example, you can change the x value of added point so that it never appears on a user screen: jsfiddle.net/BlackLabel/huxfvdt8
  
  – ppotaczek
  Mar 25 at 11:11
  

  
  
  
  

add a comment | 

1

You can add a point with the same y value as the last series point and use the setExtremes method to show only the wanted part of the area:

chart: 
 type: 'area',
 events: 
 load: function() 
 var series = this.series[1],
 lastPoint = series.data[series.data.length - 1];

 series.addPoint(
 x: lastPoint.x + 100,
 y: lastPoint.y
 , false);
 this.xAxis[0].setExtremes(null, lastPoint.x + 0.5);
 
 
,

Live demo: https://jsfiddle.net/BlackLabel/54a6jdgy/

API Reference:

https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

share|improve this answer

edited Mar 25 at 11:16

answered Mar 25 at 10:33

ppotaczekppotaczek

10.1k11 gold badge22 silver badges1111 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for the response. It's not about the zero value, but about the last point of the serie. I've added a picture to show wanted result
  
  – fabien-michel
  Mar 25 at 10:37
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi @fabien-michel, Sorry for missunderstanding and thakns for the image. You can add a point and change the axis extremes: jsfiddle.net/BlackLabel/3ebvta1h
  
  – ppotaczek
  Mar 25 at 10:48
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It work as expected, thank for your answer ! I was hoping for less "hacky" solution which not involve modifying serie's data
  
  – fabien-michel
  Mar 25 at 10:56
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  In my real use case, the graph can display up to many thousand of points in a serie which mean that "adding a point" can not be enough in some cases / user screen, etc... I was hoping for a solution taking care of that
  
  – fabien-michel
  Mar 25 at 10:59
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @fabien-michel, Every series in Highcharts represents data, so to change the series graphic it is best to change the data. It seems that this is the only solution, but you can customize it to suit more of your cases. For example, you can change the x value of added point so that it never appears on a user screen: jsfiddle.net/BlackLabel/huxfvdt8
  
  – ppotaczek
  Mar 25 at 11:11
  

  
  
  
  

add a comment | 

You can add a point with the same y value as the last series point and use the setExtremes method to show only the wanted part of the area:

chart: 
 type: 'area',
 events: 
 load: function() 
 var series = this.series[1],
 lastPoint = series.data[series.data.length - 1];

 series.addPoint(
 x: lastPoint.x + 100,
 y: lastPoint.y
 , false);
 this.xAxis[0].setExtremes(null, lastPoint.x + 0.5);
 
 
,

Live demo: https://jsfiddle.net/BlackLabel/54a6jdgy/

API Reference:

https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

share|improve this answer

edited Mar 25 at 11:16

answered Mar 25 at 10:33

ppotaczekppotaczek

10.1k11 gold badge22 silver badges1111 bronze badges

chart: 
 type: 'area',
 events: 
 load: function() 
 var series = this.series[1],
 lastPoint = series.data[series.data.length - 1];

 series.addPoint(
 x: lastPoint.x + 100,
 y: lastPoint.y
 , false);
 this.xAxis[0].setExtremes(null, lastPoint.x + 0.5);
 
 
,

share|improve this answer

edited Mar 25 at 11:16

answered Mar 25 at 10:33

ppotaczekppotaczek

10.1k11 gold badge22 silver badges1111 bronze badges

answered Mar 25 at 10:33

ppotaczekppotaczek

10.1k11 gold badge22 silver badges1111 bronze badges

answered Mar 25 at 10:33

ppotaczekppotaczek

10.1k11 gold badge22 silver badges1111 bronze badges