We Keep Coding

Highcharts AreaRange Chart issues with xAxis and last data point label

I used area range Highcharts but facing certain issues as:
For X-axis, the chart doesn't start with an initial point rather shows incorrect start tick value(i.e. 2020) instead of 2019.
Need to show label values for last data point only for each series, attached image below for reference
Could someone please help me with what do I do to resolve my issues.
Thanks in advance!
For the 1st issue, I tried changing the 'pointStart' attribute value for plotOptions->series but didn't work.
"plotOptions": {
"series": {
"pointStart": 1546300800000
}
}
Here is JSFiddle link of the chart containing code:

The first issue can be resolved by setting xAxsi.tickInterval = plotOptions.series.pointInterval:
xAxis: {
type: "datetime",
tickInterval: 31536000000
...
}
The second issue can be resolved by providing labels formatter callback function that will return only the last series point value. Also, other dataLabels properties have to be set properly (like align, overflow, etc). Check demo and code posted below.
Code:
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'middle',
padding: 8,
allowOverlap: true,
overflow: 'allow',
crop: false,
formatter: function() {
var point = this.point,
series = this.series;
if (series.data.length === point.index + 1) {
return '$' + this.y.toFixed(1);
} else {
return '';
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/2xLevj6y/
API reference:
https://api.highcharts.com/highcharts/xAxis.tickInterval
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#formatter
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#align
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#overflow

Highcharts | Heatmap | Legend filters not working when updating data

I have an issue with how the setData function works with a series of kind 'HEATMAP', when updating the data, and when one or more legend filters have been disabled.
I use 3 colors to fill the Heatmap chart according to the value represented by the data (which works fine) , each color is shown as an item in the legend :
options.colorAxis = {
dataClasses: [
{
color: GREEN,
from: 0,
to: 50,
},
{
color: ORANGE,
from: 50,
to: 100,
},
{
color: RED,
from: 100,
to: 1e6,
}]
};
When I want to update the chart with new data coming from a server, I use :
this.chart.series[0].setData(newData, true, false, false);
This works fine as well, except when colors have been disabled by clicking on the legend items.
The problem is that all the colors that were filtered out by the filter reappear on the chart when data is updated ( image below , part 3 )
However, the legend is ok (what was disabled remains disabled).
Can you please help me find a solution ?
Thank you.
Please find below the visual description of what I explained :

FWIW, this is how I solved my problem.
Right after updating with
this.chart.series[0].setData(newData, true, false, false);
I just added the lines below ( toggle programmatically twice the visibility of the data groups ) :
const allItems = (<any>this.chart.legend).allItems as Array<any> ;
allItems.forEach( item => {
item.setVisible();
item.setVisible();
});

stackLabels with separate data in Highcharts

Good afternoon, I'm putting together a chart that uses Highcharts stackLabels, it's exactly the same as this: JSFiddle however I do not want it to display the sum of the column values, I want it to appear item by item one on top of the other, same as the print I simulated below:

In order to set your stackLabels as you expecting, you need to use stackLabels.formatter function to calculate the labels values manually.
Next thing you've to do is make a little shifting on the labels. You are able to do it by stackLabels.y field.
At the end, don't forget about the stackLabels.useHTML parameter set equal to true. It makes the <span> and </br> elements will appear correctly. Please take a look at code below:
yAxis: {
stackLabels: {
style: {
color: 'red'
},
enabled: true,
useHTML: true,
formatter: function() {
var firstLabel = Math.round((this.points[0][1] - this.points[0][0]) * 10) / 10,
secondLabel = this.points[0][0]
return `<span>${firstLabel}</span></br>
<span>${secondLabel}</span>`
},
y: -15
}
}
You can read more about parameters mentioned above here:
https://api.highcharts.com/highcharts/yAxis.stackLabels.formatter
https://api.highcharts.com/highcharts/yAxis.stackLabels.y
https://api.highcharts.com/highcharts/yAxis.stackLabels.useHTML
Live example: http://jsfiddle.net/r01nkgyn/

Morris donut chart - extract label into items

I'm currently running into a problem using the morris donut chart. In general, my project is required to be available on both touch devices as well as standard devices. We have set the donut chart up so that clicking on one section links you to another page which filters content based on which section you clicked. This one is working like a charm - but not on mobile devices.
As hovering brings up the description of the section (in our case a priority plus how many items with that specific priority exist) and hovering is not possible on touch devices, we can't display what's behind the section.
Thus: Is there any possibility to get the description that appears when hovering over an item into the specific item?
Thank you and kind regards
To clarify my issue I've created a professional illustration:
I have my HTML code:
<div id="morris-donut-chart"></div>
<div id="morris-label"></div>
And my Javascript code to initialize the donut chart:
$(function() {
// Donut Chart
Morris.Donut({
element : 'morris-donut-chart',
data : [{
label : "Niedrig",
value : 5
}, {
label : "Normal",
value : 1
}, {
label : "Hoch",
value : 5
}, {
label : "Kritisch",
value : 11
}],
resize : true,
colors : ['#fff', '#fff', '#fff', '#fff']
}).on('click', function(i, row){
window.location = "/";
});
});
and my functions to "outsource" the text:
function outsourceMorrisDonutChartLabel() {
//$("#morris-donut-chart tspan:first").css("display","none");
//$("#morris-donut-chart tspan:nth-child(1)").css("font-size","40px");
var lab = $("#morris-donut-chart tspan:first").html();
var val = $("#morris-donut-chart tspan:last").html();
$('#morris-label').text(lab + ": " + val);
}
$(document).ready(function()
{
outsourceMorrisDonutChartLabel();
});
$("#morris-donut-chart").mouseover(function() {
outsourceMorrisDonutChartLabel();
});
The main problem now is to get the outsourced text which currently is inserted into the div with the id "morris-label" into the morris sections as shown in the image

How can I move columns to the right in a Highcharts chart?

I have a column chart with Highcharts library, something like this:
If you see the red lines maybe you notice what I want achieve. I need to reduce the space between columns and move them to the right, so the chart will have more space between the y-labels and the first column.
Notice that I need a fixed width of 48px for every column. I tried with with groupPadding : 0 and pointPadding : 0 with no luck.
plotOptions : {
series : {
colorByPoint : true,
pointWidth : 48,
borderWidth : 0,
}
},
All the sample code is on jsFiddle.
How can I move all the columns to the right and reduce the space between columns?
UPDATE: As an answer says, a solution is to change the container width to a smaller one. But I need that the grid lines (the grey ones) fill all the page (actually, fill the parent div that would have more width than the chart container). Is it possible to draw the grey lines (the grid lines) outside the chart?

Finally I've done what #HristoIvanov told me in a comment. They suggest that I should put NULL columns at the begining.
Setting the first categorie as NULL and not showing it, is what I need because highcharts left the space for the first column.
That's the code that I needed:
xAxis : {
showFirstLabel: false,
categories : [ null, 'A', 'B', 'C', 'D', 'E', 'F', 'G' ],
[ ... ]
And don't forget the data:
series : [
{ data : [null, 11, 22, 53, 74, 65, 46, 37] }
You can view the result in jsFiddle.

Your code was with a ","
Try this:
plotOptions : {
series : {
colorByPoint : true,
pointPadding : 0,
groupPadding : 0
}
},
Here is your demo: http://jsfiddle.net/zgypy32h/5/
http://jsfiddle.net/zgypy32h/4/

This looks more like what you were going for: JSFiddle
There were a couple things that were giving you trouble. The chart by default wants to fill out the div it's in as much as possible because of Highcharts default settings (check out the reflow option). So to keep the columns close together you have set a max-width or width on the container that you feel satisfies the spacing between columns.
<div id="container" style="max-width: 650px; height: 520px; margin: 0 auto"></div>
And give yourself a little more margin on the left of the chart to compensate.
chart : {
renderTo : 'container',
type : 'column',
showAxes : true,
marginRight : 0,
marginLeft : 50,
spacingLeft : 20,
spacingRight : 0
},
The second is the offset of the y-axis labels to give some spacing between them and the first column. Highcharts doesn't seem to have an initial offset for the first x point, but offset should suffice.
yAxis: {
offset: 60
}