Hi there is it possible to show only one value per category in the column chart in highcharts? without nulling the other values? because my categories will be dynamic so in the series it is impossible to know which values will be null. For example.
var chart = {
type : 'column'
};
... code here
xAxis: {
categories: [
'Jan',
'Feb',
],
},
Now in my setup of the series I am nulling the other data so that it will only show one value like this
var series = [
{
name: 'January',
data: [71, null]
},
{
name: 'February',
data: [null, 83]
},
];
Now the problem arises if my categories are dynamic as I have said. Is it possible to use only one value without setting some data to null? Or am I using the wrong chart for this task (I need a vertical bar chart)? If so, what should I use?
There's a js fiddle that specifically does this.
http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/series/data-array-of-objects/
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Green', 'Pink']
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: 1
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
},
{
data: [{
name: 'Point 1',
color: '#00FF00',
y: 1
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
}]
});
Related
I saw Highchart's timeline chart that customize each point dataLabel.
I want to add dataLabel option to set different distance for each points(data). So I added option like below code.
But when I use this code, it looks like distance option is not working. all of the dataLabel's distance is same.
How can I solve it? Did I use something wrong?
Highcharts.chart('container', {
chart: {
type: 'timeline'
},
series: [{
data: [{
date: 'Some date',
label: 'Event label',
description: 'Description of this event.',
dataLabels: {
color: '#78f',
borderColor: 'blue',
backgroundColor: '#444',
connectorWidth: 2,
connectorColor: 'blue',
distance : 80, // I add this option for different distance
style: {
textOutline: 0
}
}
},{
date: 'Another date',
label: 'Last event label',
description: 'Description of third event.',
dataLabels :{
distance : 20
}
}]
}]
});
Instead of distance that is set for all data labels you can use y property:
series: [{
data: [{
...,
dataLabels: {
y: -50,
...
}
}, {
...,
dataLabels: {
y: 120
}
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/femo49gn/
API Reference: https://api.highcharts.com/highcharts/series.timeline.dataLabels.y
How to change series on highchart properties series?
this is jsfiddle
its similiar like this but different structure
i want to change many type of series like this
series: [{
name: 'Nominal',
data: [
{ name: 'Remunerasi', y: 200000, color: 'red'},
{ name: 'Penyesuaian Gaji', y: 1200000, color: 'yellow' }
]
}]
//or this
series: [{
name: 'Brands',
data: [
{ name: 'Promosi', y: 33.38 },
{ name: 'Upgrading', y: 14.77 },
{ name: 'GP Dibawah Min', y: 22.91 },
{ name: 'Kontrak Kedua', y: 20}
]
}]
//or this
series: [{
name: 'Sebelum',
data: [200000, 300000, 400000, 400000],
color : 'red'
},{
name: 'Setelah',
data: [400000,600000,800000,800000],
color : 'yellow'
},{
name: 'Kenaikan',
data: [200000, 300000, 400000, 400000],
color : 'blue'
}]
Im trying to change the value inside those series using a button
i hope this tuto help you
setdata:Apply a new set of data to the series and optionally redraw it. The new data array is passed by reference (except in case of updatePoints), and may later be mutated when updating the chart data.
I have bar chart, in which I want each bar to start different value. Now they all starts from 0. I have only find how to change the starting point, that would be the same for each. Like all staring from 1.
But I need the First to be draw like 1-2, Second: 1-4 and Third: 7-10.
How can I vary it for different cases?
var chart = new Highcharts.Chart({
chart: {
type: 'bar',
renderTo: 'container'
},
xAxis: {
categories: ['First', 'Second', 'Third']
},
series: [{
data: [{
name: 'Point 1',
y: 2
}, {
name: 'Point 2',
y: 4
}, {
name: 'Point 3',
y: 10
}]
}]
});
That's what the columnrange chart type is for:
http://www.highcharts.com/demo/columnrange
Use the inverted property in order to make it a bar instead of a column:
http://api.highcharts.com/highcharts/chart.inverted)
Example:
chart: {
type: 'columnrange',
inverted: true
}
Fiddle:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/
the possible solution is to make your bar chart 'stacking' and add new data array to your series where offsets will be set and then make them "invisible":
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
data: [{name: 'Point 1', y: 2},
{name: 'Point 2', y: 4},
{name: 'Point 3', y: 10}]
},{
data: [{name: 'Point 1', y: 2},
{name: 'Point 2', y: 4},
{name: 'Point 3', y: 10}],
color: 'white',
enableMouseTracking:false,
showInLegend: false
}]
I hope this example will explain it better
I'm trying to use Mult Series in Bubble Chart. What I'm doing at the moment is:
$('#container').highcharts('Map', {
title: {
text: 'Bubble Chart'
},
tooltip: {
pointFormat: '{point.estado}<br>' +
'Ligacoes: {point.ligacoes}'
},
series: [{
name: 'Basemap',
mapData: map,
borderColor: '#606060',
nullColor: 'rgba(200, 200, 200, 0.2)',
showInLegend: false
}, {
type: 'mapbubble',
dataLabels: {
enabled: true,
format: '{point.capital}'
},
name: 'Test',
data: data,
maxSize: '12%',
color: '#EE0000'
name: 'Test2',
data: data,
maxSize: '12%',
color: '#EE0000'
}]
});
At the moment I don't care if the data comes the same in both series. It's working if I just use one
name: 'Test',
data: data,
maxSize: '12%',
color: '#EE0000'
Anyone can try to tell what can I do... I'm trying to understand how to have more than one serie.
Thanks !
Each series is represented as an object in the series-array. You are just re-stating the same name/value-pairs inside the same series object, which only overwrites the values.
In short it should look something like:
// series array
series: [{
// Series object 1
name: 'Basemap',
mapData: map
}, {
// Series object 2
type: 'mapbubble',
name: 'Bubble 1',
data: data
}, {
// Series object 3
type: 'mapbubble',
name: 'Bubble 2',
data: data
}]
Or see this more elaborate JSFiddle for a demonstration.
I'm trying to create a distance between the x-axis labels and the chart in Highcharts. I tried using "distance" and "padding" but none worked.
chart: {
type: 'column'
},
title: {
text: 'Data input as column arrays'
},
data: {
columns: [
[null, 'Apples', 'Pears', 'Oranges'], // categories
['Blue', 1, 4, 3], // first series
['Black', 5, 4, 2] // second series
]
},
xAxis: {
categories: [
'First Category',
'Second Category',
'Third Category',
],
labels: {
style: {
fontFamily: 'openSans',
fontSize: '16px',
color: '#000000',
},
}
}
Here is jsfiddle: http://jsfiddle.net/aaq4zww5/2/
Thanks!
Option1: use the offset in the xAxis:
xAxis: {
...
offset: 10,
},
Option2: use y under xAxis->labels:
labels: {
...
y: 25,
},
Check jsfiddle.