I am working on creating a nested donut chart with highcharts.
I saw the below link :
can we make nested donut charts in highcharts?
is there a way we can add some space/margins around each donut.
Following the linked example, you could do something like that:
series: [{
type: 'pie',
name: 'Election',
size: '60%', // Change this parameter
innerSize: '50%', // Change this parameter
data: [
{name: "A", y: 20},
{name: "B", y: 10},
{name: "C", y: 15}
]
}, {
type: 'pie',
name: 'Proprietary or Undetectable',
innerSize: '80%', // Change this parameter
data: [
{name: "A", y: 10},
{name: "B", y: 15},
{name: "C", y: 20}
]
}]
Fiddle
Related
I'm trying to implement a drill down on a bar chart.
My data series are splitted on 6 categories on the x axis and I have three different series (Social, Cognitive and Language).
I would like to be able to drill down in my series. For example, 'social' is made of 'Family' and 'Personnal'.
My problem is that highchart only wants to drill down into one data serie. In my case I would like the drill down to display serveral data series.
In the fiddle below, I would like the drill down from 'Social' to display the series 'Family' and 'Personnal'. But highchart only display the 'Personnal' serie.
Is there a standard way to do this with Highcharts?
series: [
{
name: 'Social',
type: 'bar',
data: [
{ y: 10, drilldown: 'A' },
{ y: 5, drilldown: 'A' },
{ y: 3, drilldown: 'A' },
{ y: 1, drilldown: 'A' },
{ y: 0, drilldown: 'A' },
{ y: 0, drilldown: 'A' },
],
color: '#EEAA3C',
},
{
name: 'Cognitive',
type: 'bar',
data: [6, 3, 1, 0, 1, 1],
color: '#86BD4A',
},
{
name: 'Language',
type: 'bar',
data: [4, 2, 0, 2, 0, 0],
color: '#E26E3E',
},
],
drilldown: {
series: [
{
name: 'Family',
id: 'A',
type: 'bar',
data: [1, 1, 1, 0, 0, 0],
color: '#F2B553',
},
{
name: 'Personal',
id: 'A',
type: 'bar',
data: [9, 4, 2, 1, 0, 0],
color: '#F8CC87',
},
],
},
https://jsfiddle.net/pacambi/3k4eng7w/
Thanks !
is it possible to have columns with data series going in the Y axis instead of X axis? I would also need to specify the colour for each data and generate a legend for all of them
This fiddle
https://jsfiddle.net/vyamk5cg/
get close but unfortunately the legend doesn't reflect the colour of each value
name: "'15",
data: [{
y: 2,
color: '#ff0000'
}, {
y: 3,
color: '#00ff00'
}, {
y: 1,
color: '#0000ff'
}]
You need to define each point as an outstanding series and attach them to the common stack.
Demo: https://jsfiddle.net/BlackLabel/0vnuo9m1/
series: [{
name: '`15',
stack: '15',
color: '#ff0000',
data: [{
y: 2,
}]
}, {
name: '`15',
stack: '15',
color: '#990000',
data: [{
y: 1,
}]
}, {
name: '`15',
stack: '15',
color: '#550000',
data: [{
y: 3,
}]
}, {
name: '`16',
stack: '16',
color: '#00ff00',
data: [{
y: 2,
}]
}, {
name: '`16',
stack: '16',
color: '#009900',
data: [{
y: 1,
}]
}, {
name: '`16',
stack: '16',
color: '#005500',
data: [{
y: 3,
}]
}]
API: https://api.highcharts.com/highcharts/series.line.stack
Can any one tell me that how to give multiple id's to a highchart drill down or can i give a class to that for accessing multidynamic data, like i write the drill down id's below, can we write like this
- drilldown: {
series: [ {
id:'level1',
name: 'Level 1',
data: [
{name: 'Trees', y: 1},
{name: 'Plants', y: 2},
{name: 'Grass', y: 3},
{name: 'Deeper', y: 4, drilldown: 'level2', drilldown: 'level3', drilldown: 'level4' }
]
}
I have been pulling my hair out trying to get this highcharts irregular spline with drilldown and couldnt get the drilldown to work. I am new to highcharts and I think it may have to do with my syntax. I have referenced the API and tried a few methods with no luck.
Problem: I wanted to get a irregular spline to show counts of fruits by month. The drilldown would then show counts for types of fruits (apples and oranges). I am able to show the counts of fruits but the drilldown is not working.
The codes is below and also here: http://jsfiddle.net/bu2002/352a0zvr/2/
THanks so much everyone!!!
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'count'
},
min: 0
},
series: [{
name: 'Fruits',
data: [
[Date.UTC(2014, 7, 19),12],
[Date.UTC(2014, 8, 19),5],
[Date.UTC(2014, 9, 19),18]
],
drilldown: 'fruits'
},
{
name: 'Animals',
data: [
[Date.UTC(2014, 7, 29),15],
[Date.UTC(2014, 8, 11),11],
[Date.UTC(2014, 9, 22),38]
],
drilldown: 'animals'
}
],//end series
drilldown: {
series: [{
id: 'animals',
data: [[Date.UTC(2014, 7, 29),15],
[Date.UTC(2014, 8, 11),11],
[Date.UTC(2014, 9, 22),38]],
},
{
id: 'fruits',
data: [
[Date.UTC(2014, 7, 29),15],
[Date.UTC(2014, 8, 11),11],
[Date.UTC(2014, 9, 22),38]
],
}
]
}//end drilldown
};//and options
var chart = new Highcharts.Chart(options);
});
The issue is now that you are providing a drilldown.id on the series. You need to do it per point. For example:
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
It looks to me like you want to have any drilldown on a point in "Fruits" to link to the same drilldown series. This is doable:
series: [{
name: 'Fruits',
data: [{
x: Date.UTC(2014, 7, 19),
y: 12,
drilldown: 'fruits'
}, {
x: Date.UTC(2014, 8, 19),
y: 5,
drilldown: 'fruits'
}, {
x: Date.UTC(2014, 9, 19),
y: 18,
drilldown: 'fruits'
}]
},
See update fiddle.
But here also U dont get 2 splines after clicking on fruits, u just get one.
Is there any way to get that as i have the same issue
fiddle https://jsfiddle.net/surya_swami/zx9dy3uj/40/
drilldown: { series: [{id:"z1",name: "Region-1",
data: [{ name : "July",y: 10},
{ name : "Aug",y: 21},
{ name : "Sept",y: 15}]
},
{id:"z1",name: "Region-2",
data: [{ name : "July",y: 12},
{ name : "Aug",y: 9},
{ name : "Sept",y: 25}]
},
{ id:'z2',name:'Region-3',
data : [{name:'July',y:23},
{name:'Aug',y:41},
{name:'Sept',y:31}]
},
{ id:'z2',name:'Region-4',
data : [{name:'July',y:33},
{name:'Aug',y:23},
{name:'Sept',y:12}]
},
{ id:'z2',name:'Region-5',
data : [{name:'July',y:31},
{name:'Aug',y:39},
{name:'Sept',y:19}]
}
]
}
I have the following data structure:
{
"origin": "category2",
"value": 30,
"key": "name1"
},
{
"origin": "category1",
"value": 18,
"key": "name2"
},
{
"origin": "category2",
"value": 15,
"key": "name3"
},
{
"origin": "category1",
"value": 11,
"key": "name4"
},
Now I'm looking for a way to draw this data as bar chart where the key is used as legend for the axis and the origin is used for the color of the bar and the chart legend, so I have a chart with 4 bars with 2 different colors and a chart legend that shows category1 and category2.
I wonder if there is better way then have 2 series looking like this:
{name: 'category1', data: [0,18,0,11]}
{name: 'category2', data: [30,0,15,0]}
and the categories:
['name1','name2','name3','name4' ]
Apart of your solution, you can use single serie and define color for point like:
series: [{
name: 'Year 1800',
data: [107, 31, {
y: 635,
color: 'red'
}, {
y: 635,
color: 'red'
}]
}]
http://jsfiddle.net/RBSpe/
Other option is to manage each bar as unique and have more control over each bar configuration.
Template.body.helpers({
createChart: function () {
// Prepare some data:
category1= [{
y: 18,
name: "category1"
}],
category2 = [{
y: 30,
name: "category2"
}],
category3 = [{
y: 40,
name: "category3"
}],
category4 = [{
y: 5,
name: "category4"
}];
// Use Meteor.defer() to create chart after DOM is ready:
Meteor.defer(function() {
// Create standard Highcharts chart with options:
Highcharts.chart('Charts', {
chart: {
renderTo: 'container',
type: 'column',
},
series: [{
type: 'column',
margin: 75,
data: category1,
name: "category1Name",
color: '#FF6600'
}, {
type: 'column',
margin: 75,
data: category2,
name: "category2Name",
color: '#FF6600'
}, {
type: 'column',
margin: 75,
data: category3,
name: "category3Name",
color: '#ffff00'
}, {
type: 'column',
margin: 75,
data: category4,
name: "category4Name",
color: '#ffff00'
}]
});
});