Related
We've been trying to find a way to do this through Apexcharts.
We have multiple series with a shared x-axis (date), but different y-axis scales, which we're trying to normalize so we can show multiple data points together.
The only examples we can find for doing this have been supporting only 2 series at maximum:
https://apexcharts.com/docs/chart-types/multiple-yaxis-scales/
Our series may have values like:
[10,12,14,15,16]
[0.3,0.4,0.6,0.7,0.4]
[131,127,150,129,144]
We cannot have these sharing the same y-axis as then the 2nd series would look very squished. Somehow, we're trying to find a way to visually display all these 3 on the same graph in a way that the individual differences are still visible.
So really what we're doing is we're "normalizing" the different y-axis ranges, while still preserving the exact original value.
We're open to alternatives other than Apexcharts too.
Are you trying to plot two series on the same yaxis scale?
if so here's a workaround modelling multiple series with two y-axis
otherwise, if you're just trying to plot as many axes as series, here's an example modeling multiple series with an axis for each serie
First example :
var options = {
series: [
{
name: "Serie 1",
type: "line",
data: [10,12,14,15,16]
},
{
name: "Serie 2",
type: "line",
data: [0.3,0.4,0.6,0.7,0.4]
},
{
name: "Serie 3",
type: "line",
data: [131,127,150,129,144]
}
],
chart: {
height: 350,
type: "line",
stacked: false
},
dataLabels: {
enabled: false
},
stroke: {
width: 2
},
xaxis: {
categories: [2009, 2010, 2011, 2012, 2013]
},
yaxis: [
{
seriesName: "Serie 1",
min:0,
max:200,
axisTicks: {
show: true
},
axisBorder: {
show: true,
color: "#008FFB"
},
labels: {
style: {
colors: ["#008FFB"]
}
},
title: {
text: "Axe 1",
style: {
color: "#008FFB"
}
},
tooltip: {
enabled: true
}
},
{
seriesName: "Serie 2",
opposite: true,
min: 0,
max: 1,
axisTicks: {
show: true
},
axisBorder: {
show: true,
color: "#FEB019"
},
labels: {
style: {
colors: ["#FEB019"]
}
},
title: {
text: "Axe 2",
style: {
color: "#FEB019"
}
},
tooltip: {
enabled: true
}
},
{
seriesName: "Serie 3",
min: 0,
max: 200,
axisTicks: {
show: true,
},
axisBorder: {
show: false
},
labels: {
show:false,
},
title: {
text: "",
},
tooltip: {
enabled: false
}
}
],
legend: {
horizontalAlign: "left",
offsetX: 40
}
};
Second example :
var options = {
series: [
{
name: "Serie 1",
type: "line",
data: [10,12,14,15,16]
},
{
name: "Serie 2",
type: "line",
data: [0.3,0.4,0.6,0.7,0.4]
},
{
name: "Serie 3",
type: "line",
data: [131,127,150,129,144]
}
],
chart: {
height: 350,
type: "line",
stacked: false
},
dataLabels: {
enabled: false
},
stroke: {
width: 2
},
xaxis: {
categories: [2009, 2010, 2011, 2012, 2013]
},
yaxis: [
{
seriesName: "Serie 1",
axisTicks: {
show: true
},
axisBorder: {
show: true,
color: "#008FFB"
},
labels: {
style: {
colors: ["#008FFB"]
}
},
title: {
text: "Axe 1",
style: {
color: "#008FFB"
}
},
tooltip: {
enabled: true
}
},
{
seriesName: "Serie 2",
opposite: true,
axisTicks: {
show: true
},
axisBorder: {
show: true,
color: "#FEB019"
},
labels: {
style: {
colors: ["#FEB019"]
}
},
title: {
text: "Axe 2",
style: {
color: "#FEB019"
}
},
tooltip: {
enabled: true
}
},
{
seriesName: "Serie 3",
axisTicks: {
show: true
},
axisBorder: {
show: true,
color: "#008FFB"
},
labels: {
style: {
colors: ["#008FFB"]
}
},
title: {
text: "Axe 3",
style: {
color: "#008FFB"
}
},
tooltip: {
enabled: true
}
},
],
legend: {
horizontalAlign: "left",
offsetX: 40
}
};
I plotted a double donut chart using Highcharts library. My requirement is when I drill down from the initial level, I should be able to plot another double donut chart.
For eg: This is the initial level. Now if I click on Email, it should drill down and show another double donut chart
This is the desired result after drill down
Following is the current code to render chart. For each series data, we have drilldown option which can take a string for eg: 'Email'. I need double donut under the drilldown but drilldown series with same id don't work and I end up getting only 1 donut chart.
Highcharts.chart('container', {
chart: {
type: 'pie',
/* backgroundColor: '#000', */
},
title: {
text: '',
},
subtitle: {
text: '',
},
accessibility: {
announceNewData: {
enabled: true,
},
point: {
valueSuffix: '%',
},
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%',
},
},
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat:
'<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>',
},
series: [
{
innerSize: 150,
size: 200,
name: 'Browsers',
colorByPoint: true,
data: [
{
name: 'Email',
y: 62.74,
drilldown: 'Email',
},
{
name: 'Social Media',
y: 10.57,
drilldown: 'Social Media',
},
{
name: 'Shopping',
y: 7.23,
drilldown: 'Shopping',
},
{
name: 'Trading',
y: 5.58,
drilldown: 'Trading',
},
{
name: 'Others',
y: 4.02,
drilldown: 'null',
},
],
},
{
showInLegend: false,
dataLabels: {
enabled: false,
},
innerSize: 100,
size: 150,
name: 'Email',
colorByPoint: true,
data: [
{
name: 'Email',
y: 52.74,
drilldown: null,
},
{
name: 'Social Media',
y: 15.57,
drilldown: null,
},
{
name: 'Shopping',
y: 12.23,
drilldown: null,
},
{
name: 'Trading',
y: 5.58,
drilldown: null,
},
{
name: 'Other',
y: 4.02,
drilldown: null,
},
],
},
],
drilldown: {
series: [
{
innerSize: 150,
size: 200,
name: 'Email',
id: 'Email',
data: [
['Gsuite', 0.1],
['office365', 1.3],
['Yahoo', 53.02],
],
},
{
innerSize: 100,
size: 150,
name: 'Email',
id: 'Email',
data: [
['user1', 0.1],
['user2', 1.3],
['user3', 53.02],
],
},
],
},
});
This is the current result
Here is the jsfiddle which I am currently working on.
Any help on this will be much appreciated.
Thanks
I am currently working on a horizontal bar graph with Highcharts. I have 5 different categories Low, Medium Low, Medium, Medium High and High I would like to sort the data being returned from the graph by category name by descending order having Low be the starting point. For example, all Low data appears first in the graph, all Medium Low, all Medium appears next and so on.
I've done some research and it appears that the code below is what I need
dataSorting: {
enabled: true,
matchByName: true
},
but when applying this to HighCharts it did not affect my graph. Is this a feature that is provided in HighCharts? Is this something that is possible to do?
Here is a jsfiddle
My code:
let data = [10, 31, 13, 19, 21, 50, 10]
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: "Bar Graph"
},
xAxis: {
},
yAxis: {
min: 0,
formatter: function() {
return this.value + "%";
},
title: {
text: '% of Total'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Low',
color: '#0D6302',
data: [data[0]],
showInLegend: true,
}, {
name: 'Medium-Low',
color: '#0B7070',
data: [data[2]]
}, {
name: 'Medium',
color: '#DC9603',
data: [data[3]]
},{
name: 'Low',
color: '#0D6302',
data: [data[1]],
showInLegend: false
},
{
name: 'Medium-High',
color: '#DD5F0C',
data: [data[4]]
}, {
name: 'High',
color: '#C50710',
data: [data[5]]
}]
});
Current look:
Desired look:
You can use the index feature to define the affecting the order of rendering.
Demo: https://jsfiddle.net/BlackLabel/9Lsvmpbh/
series: [{
name: 'Low',
index: 4,
color: '#0D6302',
data: [data[0]],
showInLegend: true,
}, {
name: 'Medium-Low',
index: 3,
color: '#0B7070',
data: [data[2]]
}, {
name: 'Medium',
index: 2,
color: '#DC9603',
data: [data[3]]
},{
name: 'Low',
index: 5,
color: '#0D6302',
data: [data[1]],
showInLegend: false
},
{
name: 'Medium-High',
index: 1,
color: '#DD5F0C',
data: [data[4]]
}, {
name: 'High',
index: 0,
color: '#C50710',
data: [data[5]]
}]
API: https://api.highcharts.com/highcharts/series.line.index
You should reorder your series' objects. According to this, highchart doesn't have a property to sort automatically. You should insert first your Low series, then Medium Low etc. The thing you want to be the last one, you should put it first in the series.
Following this
let data = [10, 31, 13, 19, 21, 50, 10]
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: "Bar Graph"
},
xAxis: {
},
yAxis: {
min: 0,
formatter: function() {
return this.value + "%";
},
title: {
text: '% of Total'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'sorted'
}
},
series: [{
name: 'High',
color: '#C50710',
data: [data[5]]
}, {
name: 'Medium-High',
color: '#DD5F0C',
data: [data[4]]
}, {
name: 'Medium',
color: '#DC9603',
data: [data[3]]
},{
name: 'Medium-Low',
color: '#0B7070',
data: [data[2]]
},
{
name: 'Low',
color: '#0D6302',
data: [data[1]],
showInLegend: false
}, {
name: 'Low',
color: '#0D6302',
data: [data[0]],
showInLegend: true,
}]
});
I got this result:
I have a packed bubble chart that works great. I would like to add a title to each of the larger, separated bubbles. The title should always show and I would like it to be the name of the series. I'm using a split series.
The 'name' attribute shows up in the tooltip, but I would like it to always be displayed.
Here is the code to create the bubbles:
Highcharts.chart('bubble-split-chart', {
chart: {
type: 'packedbubble',
animation: false,
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, '#15191b'],
[1, '#15191b']
]
},
},
// remove hamburger button
exporting: {
enabled: false
},
// remove chart watermark (highcharts.com)
credits: {
enabled: false
},
title: {
text: '',
enabled: false
},
tooltip: {
useHTML: true,
pointFormat: '<b>{point.name}</b>'
},
plotOptions: {
packedbubble: {
minSize: '1%',
maxSize: '100%',
zMin: 1,
zMax: 400,
layoutAlgorithm: {
enableSimulation: false,
gravitationalConstant: 0.05,
splitSeries: true,
seriesInteraction: false,
dragBetweenSeries: false,
parentNodeLimit: true
}
},
legend: {
enabled: false
}
},
series: [{
name: 'Test',
data: [{
name: "Lorem",
value: 29.4,
color: 'red'
},
{
name: "Ipsum",
value: 34.1,
color: 'blue'
},
{
name: "Dolor",
value: 7.1,
color: 'green'
}],
}, {
name: 'Test 2',
data: [{
name: 'Lorem',
value: 300.1,
color: 'red'
},
{
name: 'Ipsum',
value: 20.7,
color: 'blue'
},
{
name: "Dolor",
value: 97.2,
color: 'green'
}],
}, {
name: 'Test 3',
data: [{
name: "Lorem",
value: 8.2,
color: 'red'
},
{
name: "Ipsum",
value: 9.2,
color: 'blue'
},
{
name: "Dolor",
value: 13.1,
color: 'green'
}],
}]
});
Is this possible? Also, if this is possible, how can I remove the name from the tooltip?
You can add the labels by using annotations or Highcharts.SVGRenderer class.
To remove the series name from tooltip set:
tooltip: {
headerFormat: '',
...
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4771/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
https://api.highcharts.com/highcharts/annotations
https://api.highcharts.com/highcharts/tooltip.headerFormat
I have built this electoral map but I have not succeeded drawing a pie chart of the two parties on the pop-up dialog when a map region is clicked. The dialog title is being passed but not the actual values that should build the chat.
The returned json data is here and I just want to push a pie-chart to the dialog when someone clicks on a county on the map. Here's my code and "pointClick" function that should render the pie to a div.
$(function() {
$.getJSON("<?= base_url('index.php/presidential/getByCounty'); ?>", function(json) {
function pointClick(json) {
var row = this.options.row,
$div = $('<div></div>')
.dialog({
title: ([this.name]),
width: 400,
height: 300
});
//THIS IS ACTUALLY WHAT'S NOT WORKING
window.chart = new Highcharts.Chart({
chart: {
renderTo: $div[0],
type: 'pie',
width: 370,
height: 240
},
title: {
text: null
},
series: [{
name: 'Votes',
data: [{
name: 'nasa',
color: '#0200D0',
y: this.nasa //returned json data for candidate 1 and I problem must be somewhere here
}, {
name: 'jubilee',
color: '#C40401',
y: this.jubilee //returned json data for candidate 2
}],
dataLabels: {
// format: '<b>{point.name}</b> {point.value:.1f}%'
}
}]
});
}
//AM BUILDING THE ELECTORAL MAP FROM THIS POINT WHICH WORKS OUT NICELY
$('#presidential').highcharts('Map', {
title: {
text: 'Presidential Electoral Map <em>(Kenya - Test)</em>'
},
legend: {
title: {
text: 'Plotical Parties'
}
},
credits: {
enabled: false
},
tooltip: {
valueSuffix: ' Incumbent Margin'
},
mapNavigation: {
enabled: true,
enableButtons: false
},
colorAxis: {
dataClasses: [{
from: 0.0000001,
to: 100,
color: '#C40401',
name: 'Jubilee'
}, {
from: -100,
to: -0.00000001,
color: '#0200D0',
name: 'Nasa'
}, {
from: 0,
to: 0,
color: '#C0C0C0',
name: 'Battle Ground(s)'
}]
},
series: [{
name: 'By County Difference',
point: {
events: {
click: pointClick
}
},
"type": "map",
"joinBy": ['name', 'name'],
"data": $.each(json, function() {}),
"mapData": [{
"name": "Mandera",
"path": "M572,-818,574,-789,578,-783,598,-775,619,-750,646,-738,645,-727,652,-703,662,-689,678,-679,689,-666,693,-672,696,-734,733,-774,783,-848,774,-845,765,-850,761,-846,711,-843,677,-873,663,-874,583,-838z"
}, //and a couple more mapdata
]
}, {
"type": "mapline",
"data": [{
"name": "path5072",
"path": "M443,-449Z"
}]
}]
});
});
});
Your JSON data contains number in string format so convert it into Number
like this
Fiddle link
series: [{
name: 'Votes',
data: [{
name: 'nasa',
color: '#0200D0',
y: Number(this.nasa) //transform to number
}, {
name: 'jubilee',
color: '#C40401',
y: Number(this.jubilee) //transform to number
}],
dataLabels: {
format: '<b>{point.name}</b> {point.value:.1f}%'
}
}]