Does highcharts have an option to have a multi Y axis diverged like in the below attached screenshot?
P.S Any other option apart having two highchart types of charts, and rendering them next to each other.
You can define yAxis property as an array of objects. For example:
series: [{
...
}, {
yAxis: 1,
...
}],
yAxis: [{
height: '80%',
...
}, {
offset: 0,
top: '80%',
height: '20%',
...
}]
Live demo: http://jsfiddle.net/BlackLabel/p2bf7tLn/
API Reference: https://api.highcharts.com/highcharts/yAxis
Related
I want to set the legend area in a two-column fashion in Apache Echarts, how I can achieve this with legend options? I'm not able to find any example related to this.
Sample image (I want a legend area like the image mentioned below).
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
top: '3%',
},
grid: {
top: '28%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'value',
},
yAxis: {
type: 'category',
data: ['Actual Avg', 'Min Standard']
},
series: JSON.parse(data),
};
In "legend" you can define the data by writing something like this
legend:{
...,
data: [
{name: 'series 1', ...},
{name: 'series 2', ...}
]
}
If you want the legend to generate automatically, it will depend on what you have on "series".
"If data is not specified, it will be auto collected from series. For most of series, it will be collected from series.name or the dimension name specified by seriesName of series.encode. For some types of series like pie and funnel, it will be collected from the name field of series.data." - Echarts Documentation
Since i don't know how your "series" is defined, i can't give you a code example, but i think the documentation part will help you.
I found a way to have 2 columns, simply use a vertical legend alignment and fix the height, based on the number of elements you want ot display in a column, for example: (number of element in a column) * (legend element height).
option = {
legend: {
top: '3%',
orient: 'vertical',
align: 'left',
height: '180px' //example
},
};
$(function() {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 0.5
},
title: {
text: 'Number'
},
xAxis: {
categories: [ .......... ]
},
yAxis: {
categories: [ .......... ],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function() {
return '' +
this.series.xAxis.categories[this.point.x] +
'<br>' +
this.series.yAxis.categories[this.point.y] +
'<br>' + this.point.value;
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [ .......... ],
http://jsfiddle.net/Slate_Shannon/0mvgmhLb/6/
This is a heatmap chart. The chart looks okay as-is, but should have more data. However, if I add any additional data, the chart breaks.
Note that a large part of the data is commented out. This starts with the data that begins with
[50,0,null],
[50,1,8380],
[50,2,37430],
(note that I removed the axis labels and the data in the code shown above.)
If you change the position of the beginning of the comment tag to so that the "50" data gets charted, then the chart fails.
Is this just too much data, or is there a way to create a heatmap that needs to be approx 20 x 90 cells?
Set turboThreshold to 0, from the Highcharts API:
When a series contains a data array that is longer than this, only one dimensional arrays of numbers, or two dimensional arrays with x and y values are allowed. Also, only the first point is tested, and the rest are assumed to be the same format. This saves expensive data checking and indexing in long series. Set it to 0 disable. Defaults to 1000.
http://api.highcharts.com/highcharts/plotOptions.heatmap.turboThreshold
Example: http://jsfiddle.net/0mvgmhLb/7/
series: [{
name: 'Sales per employee',
borderWidth: 1,
turboThreshold: 0,
...
Try loading the Highcharts Boost module.
The boost.js module is a module to allow quick loading of hundred
thousands of data points in Highcharts.
Instead of relying solely on SVG to display the graph, this module does the following to boost performance:
... drawing the graph on a canvas, then copying over the contents to
an image tag inside the SVG, using a data URL.
Link to official blog post.
Just load the module after highcharts.js (lib/modules/boost.js).
This can be solved by providing the colorAxis with a min and max value. Highcharts has issues with calculating the max value with extremely large data sets.
I have a chart with multiple xAxis and yAxis. I want to have multiple plotLines on the xAxis, but each plotLine doesn't stay on it's course. Here's the fiddle. Click on All to see what I mean.
The plotLine on the first axis goes to the second axis as well. How could I stop it?
There is a solution suggested in the HighCharts issue tracker which involves defining the related xAxis on each yAxis. So a plotline defined on a particular xAxis will use the top and height of the related yAxis to draw the plotline only in the correct area.
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2,
xAxis: 0,
}, {
title: {
text: 'Volume'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2,
xAxis: 1,
}, {
title: {
text: 'Other data panel'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2,
opposite: true,
xAxis: 1,
}]
Updated Fiddle with each plotline only on its corresponding pane.
Note that the ability to define related axes appears to be undocumented in the API.
Is it possible to have 2 yAxis in a highstock chart from highcharts one on the left and another on the right ?
Thanks
A very simple example:
First you have to create your new yAxis and set it's position.
{
title: {
text: 'Other data panel'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2,
opposite: true
}
Then, when you create your serie you in what yAxis it will be placed.
{
type: 'column',
name: 'Other',
data: otherData,
yAxis: 2,
dataGrouping: {
units: groupingUnits
}
}
You can see it working here.
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.