We Keep Coding

Group Categories in columnrange highcharts with custom view

I am using highcharts with angular 4.
I want to create a chart to show the result something like this:
Where:
GHRM and HR Scanner are application name.
We are showing some data groupwise (application wise here)
To achieve the above result I have tried using columnrange chart type in highcharts.
But the result of above link differs from my requirement. As you can see the result of above link:
Can any one help me to know how I can customize the categories view in this case to achieve the result as shown in first screen shot.

Getting that kind of look with grouped categories plugin would be a rather a hard task to accomplish.
Another approach is using a separate x axis for each set of categories (GHRM and HR Scanner in your case).
Axes can be positioned via left & top properties and sized via height properties. These options are not documented yet but they work. They accept relative values in percents (e.g. 30%) and absolute values in pixels (e.g. 200px).
xAxis: [{
categories: ['Category 1'],
tickWidth: 0,
height: '30%',
offset: 0,
title: {
text: 'First x axis',
rotation: 0,
align: 'high'
}
}, {
categories: ['Category 2', 'Category 3'],
tickWidth: 0,
height: '60%',
top: '40%',
offset: 0,
title: {
align: 'high',
text: 'Second x axis',
rotation: 0
}
}],
plotOptions: {
series: {
grouping: false,
groupPadding: 0,
pointPadding: 0,
borderWidth: 0
}
},
series: [{
data: [
[1, 7]
],
}, {
data: [
[2, 4],
[3, 8]
],
xAxis: 1
}]
Live demo: http://jsfiddle.net/BlackLabel/s3k3s944/
grouping has to be disabled so that columns are always centered. pointPadding, groupPadding and borederWidth force columns to occupy maximum vertical range.
All other options of axes configuration can be found in the Highcharts API: https://api.highcharts.com/highcharts/

HighChart plots not displaying correctly on small div

I am using a javascript library called Highcharts https://www.highcharts.com/
to plot JSON data on a stock/line graph.
Reference the image below to get an understanding of the terms I am using in this post.
https://www.highcharts.com/images/docs/understanding_highstock.png
So everything works fine when clicking on the range selector buttons to zoom in. But when I use the navigator to specify a huge range (years), the final line plot is incorrect. I have created some images to help you understand what I mean.
Using the range selector buttons to specify a smaller range works perfectly when trying to plot [1519162460000,246.39649367343821] as my final price:
But now, let me resize the navigator in order to show the entire price history:
If you look carefully at the image you should be able to see that the last plot on the chart is incorrect and shows $230.72 when it should display $246.40 246.39649367343821 <- rounded
As you can probably tell, this is a major issue for someone who is trying to display relevant price information on my website.
If I do not restrict the width of the chart div or resize the browser window the plots display fine but I still dont know the issue. (note: what I just described does not work in codepen because the viewport width is restricted so the plots mess up regardless when I navigate a big enough range)
Below is a snippet of my js and html along with a link to the codepen I created.
JS
Highcharts.setOptions({
lang: {
thousandsSep: ","
}
});
Highcharts.stockChart("chart", {
chart: {
width: 290,
padding: [5, 5, 5, 5]
},
title: {
text: "Litecoin Price" // make dynamic
},
series: [
{
name: "Price",
data: JSON.parse(data)["stats"],
tooltip: {
valueDecimals: 2,
valuePrefix: "$",
valueSuffix: " USD"
}
}
],
responsive: {
rules: [
{
condition: {
maxWidth: 500
},
chartOptions: {
chart: {
zoomType: "none"
},
credits: {
enabled: false
},
scrollbar: {
enabled: false
} //,
//navigator: {
//enabled: false
//},
//rangeSelector: {
//enabled: false
//}
}
}
]
},
scrollbar: {
liveRedraw: false
},
rangeSelector: {
allButtonsEnabled: false,
buttons: [
{
type: "month",
count: 1,
text: "1m"
},
{
type: "month",
count: 3,
text: "3m"
},
{
type: "month",
count: 6,
text: "6m"
},
{
type: "year",
count: 1,
text: "1y"
},
{
type: "ytd",
count: 1,
text: "YTD"
}
],
selected: 4,
inputEnabled: true,
enabled: true,
inputStyle: {
color: "#757575"
},
labelStyle: {
color: "#757575"
}
}
});
HTML
<div class="card" style="padding: 10px; min-width: 330px;">
<div class="card chart-card" style="height: 350px; overflow: hidden; width: 300px;">
<div id="chart" style="height: 350px; min-width: 300px;">
<div id="highcharts-loading">
<div style="display: block; margin: 0 auto; position: absolute; top: calc(50% - 24px); left: calc(50% - 24px);"><span class="loading1"></span></div>
</div>
<div id="highcharts-nodata" style="display:none; text-align: center;">No chart data found</div>
</div>
</div>
</div>

That's because when you zoom out enough, Highcharts groups the data and displays the average value. If you look at the tooltip it says "Week from Monday, Feb 19, 2018", which means the value that is being displayed is the average for that week. I believe there are some settings that allow you to disable that grouping, but at the expense of the graph interaction possibly becoming laggy due to rendering so many data points.
Data grouping is the concept of sampling the data values into larger
blocks in order to ease readability and increase performance of the
JavaScript charts. Highstock by default applies data grouping when the
points become closer than a certain pixel value, determined by the
groupPixelWidth option.
The settings for data grouping on line charts are here: series.line.dataGrouping

HighCharts - HighStock - Show Date for Candlestick & Volume

I'm using the HighCharts graphing software and am trying to show the date labels on the x axis below the stock graph; it currently shows below the volume graph only.
How can I do this?
Here are the chart options I am using (removed irrelevant ones to save space)
JSFiddle link below
$('#container').highcharts('StockChart', {
rangeSelector: {
inputEnabled: $('#container').width() > 480,
selected: 1
},
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
JSFille Link

You can use two xAxis, like in the example: http://jsfiddle.net/sbochan/phtd7r1t/2/
xAxis: [{
offset: 15
},{
linkedTo:0,
offset: -76
}],

You could use some of the positioning options to achieve this. If the height is dynamic it might be a bit difficult, but for static height charts this approach should work fine.
First edit the yAxis[1].top to be '73%' (moving the "Volume" chart further down to create a gap).
Then offset your x-axis with xAxis: { offset: -81 } to move it in between the two charts.
See this JSFiddle demonstration of the result.

Highcharts - Bar - Setting the X axis width and the chart area width to be constant

Can anyone recommend a method of setting the X axis to be a constant width across multiple instances of a bar chart?
See this jsFiddle: http://jsfiddle.net/LCYwW/1/
The first chart is an example of placing the data for 2 locations in a single chart. In this case, Highcharts automatically adjusts the X axis width to accommodate both location labels.
However, I need to separate these 2 locations into separate charts, but maintain the same proportions of X Axis to bar area width for both charts. See charts 2 and 3 in the example. In this case, Highcharts picks an X axis width that suits just the single location and the 2 charts do not line up when stacked.
Is there a method to get the individual charts to maintain the same proportions as each other? I tried setting the xAxis.labels.style.width attribute, and it does something, but doesn't seem to be a concrete width. See http://jsfiddle.net/LCYwW/3/
This example is easiest to see in the jsFiddle, but SO is requiring me to post the code:
$('#containerAll').highcharts({
chart:{
type: 'bar'
},
series: [
{
name: 'Male',
data: [{"name":"58.1%","y":0.581}, {"name":"18.1%","y":0.181}]
},
{
name: 'Female',
data: [{"name":"58.5%","y":0.585}, {"name":"28.5%","y":0.285}]
}
],
xAxis: {
categories: ['Short Name', 'Much Longer Location Name']
}
});
$('#container1').highcharts({
chart:{
type: 'bar'
},
series: [
{
name: 'Male',
data: [{"name":"58.1%","y":0.581}]
},
{
name: 'Female',
data: [{"name":"58.5%","y":0.585}]
}
],
xAxis: {
categories: ['Short Name'],
labels: {
style: {
width: 200
}
}
}
});
$('#container2').highcharts({
chart:{
type: 'bar'
},
series: [
{
name: 'Male',
data: [{"name":"18.1%","y":0.181}]
},
{
name: 'Female',
data: [{"name":"28.5%","y":0.285}]
}
],
xAxis: {
categories: ['Much Longer Location Name'],
labels: {
style: {
width: 200
}
}
}
});

You have a lot more control over the labels if you turn on useHTML.
xAxis: {
categories: ['Short Name'],
labels: {
style: {
width: '100px',
'min-width': '100px'
},
useHTML : true
}
}
http://jsfiddle.net/LCYwW/5/
You'll also probably have to set a min and max for the yAxis to keep the data in proportion.
Fiddle with the yAxis max set: http://jsfiddle.net/LCYwW/6/

Also consider, using the chart: marginLeft property to set a fixed width for the labels:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
marginLeft: 160
},
// ...
})
});
This preserves the other behavior of the chart, e.g., alignment of the labels. Also see this question.

Adding the marginLeft property inside of chart worked like a charm for me.
chart: {
type: 'bar',
marginLeft: 200
}, ...

Show Pie Chart Name as Title

Is there a way to show the pie chart name on top, bottom, right or left of a pie chart without having to use the labels, like they use in this highcharts demo:
labels: {
items: [{
html: '<b>Total fruit consumption<b>',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
}
The labels have an absolute position in pixels, and for the pies I am using percentages.
When there is a resizing, the labels stay on the same place and the pies move, and I can't get the same relative position in percentage for both.
Example pie:
{ data: [{ color: '#31B7C9', name: 'Slice 1', y: 1266364.92333333 }, { color: '#9ED93E', name: 'Slice 2', y: 7284620.73 }, { color: '#DABF12', name: 'Slice 4', y: 2330663.39333333 }], name: 'Pie Chart Name', type: 'pie', center: ["25%", "25%"], showInLegend: true, size: "20%", dataLabels: { enabled: false }}
Any idea how to get the pie chart name to display as its title?
Example in jsFiddle here.
Thank you in advance

EDIT:
So it looks like you want to have the same chart as in the demo and not just a pie chart. If that is the case my answer below fails. You will need to use labels and position them.
----Keeping below code for future reference---
Yes,
Use the title property.
Example here: http://jsfiddle.net/wergeld/svkmM/
title: {
text: 'A Title!'
}

I found a plugin that allows to show the pie chart titles here.