I`m trying to draw new multi line chart in Highcharts. How do I draw Balanced yAxis?
I try setting tickPositions, tickInterval etc... use tickPositions this:
Highcharts.chart('container', {
xAxis: {
},
yAxis:{
tickPositions: [0, 100, 1000, 10000],
//tickInterval : 1000
},
series: [
{
name: 'Installation',
data: [4100, 4009]
}, {
name: 'Manufacturing',
data: [1100, 1009]
}, {
name: 'Sales & Distribution',
data: [110, 1009]
},{
name: 'E4',
data: [50, 1009]
}]
});
Something like this:
Your example code uses a yAxis with type: 'linear'. Your example result image uses a yAxis with type: 'logarithmic'.
You can change your code to (JSFiddle example):
Highcharts.chart('container', {
xAxis: {
},
yAxis:{
type: 'logarithmic',
tickPositions: [0, 1, 2, 3, 4]
},
series: [
{
name: 'Installation',
data: [4100, 4009]
}, {
name: 'Manufacturing',
data: [1100, 1009]
}, {
name: 'Sales & Distribution',
data: [110, 1009]
},{
name: 'E4',
data: [50, 1009]
}]
});
Related
line vs scatter
I would like to join the points with a line in the scatter charts, like Scatter Line Chart in Chart js adding showLine: true.
option = {
xAxis: {},
yAxis: {},
series: [
{
symbolSize: 20,
data: [
[10.0, 8.04],
[8.07, 6.95],
[7.07, 6.95],
[13.0, 7.58]
],
type: 'scatter'
},
{
symbolSize: 1,
color: 'red',
data: [
[3.0, 8],
[3.0, 4],
],
type: 'line',
lineStyle: {
"width": "2"
},
}
]
};
Instead of drawing lineS on the scatter chart, you can draw scatter on the line chart, they will have exactly same effect:
Here's the config for it:
option = {
xAxis: {},
yAxis: {},
series: [
{
symbolSize: 20,
data: [
[7.07, 6.95],
[8.07, 6.95],
[10.0, 8.04],
[13.0, 7.58]
],
symbol: 'circle',
type: 'line'
}
]
};
How can I configure the y axis so that it has different colors?
From this:
enter image description here
To this:
enter image description here
JSFIDDLE:
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
},
lineWidth: 2
},
Maybe someone had a similar problem?
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bar-basic/
You can achieve it by setting yAxis.lineColor as Highcharts.GradientColorObject. Check the demo and code posted below.
Code:
Highcharts.chart('container', {
chart: {
type: 'bar',
events: {
load: function() {
let chart = this,
yAxis = chart.yAxis[0];
yAxis.update({
lineColor: {
linearGradient: [chart.plotLeft + yAxis.width, 0, 0, 0],
stops: [
[0, 'yellow'],
[0.33, 'yellow'],
[0.33, 'red'],
[0.66, 'red'],
[0.66, '#21B04C'],
[1, '#21B04C']
]
}
})
}
}
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania']
},
yAxis: {
lineWidth: 4
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, {
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Demo:
https://jsfiddle.net/BlackLabel/7feLmsvq/
API reference:
https://api.highcharts.com/highcharts/yAxis.lineColor
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Axis#update
https://api.highcharts.com/class-reference/Highcharts.GradientColorObject
firstly here is my code
http://jsfiddle.net/woon123/5t2gpyx7/
$(function () {
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'venue_chart',
},
credits: {
enabled: false
},
title: {
text: 'Popularity of Venues'
},
subtitle: {
text: 'Redemption Count'
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of Users'
}
},
xAxis: {
type: 'category'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30
},
series: [{
name: "Chicken Up # Jurong East",
data: [{
name: "Chicken Up # Jurong East",
y: 30,
drilldown: "Chicken Up # Jurong East"
}]
}, {
name: "Chicken Up # Tanjong Pagar",
data: [{
name: "Chicken Up # Tanjong Pagar",
y: 50,
drilldown: "Chicken Up # Tanjong Pagar"
}]
}, {
name: "Chicken Up # Tampines",
data: [{
name: "Chicken Up # Tampines",
y: 60,
drilldown: "Chicken Up # Tampines"
}]
}, ],
drilldown: {
series: [{
name: "Redemption Count",
id: "Chicken Up # Jurong East",
data: [
[
"Yangpa Bomb Introductory Promo", 5],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 4],
[
"Soju Cocktails at $17.00", 1],
[
"12345678", 10],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10], ]
}, {
name: "Redemption Count",
id: "Chicken Up # Tanjong Pagar",
data: [
[
"Yangpa Bomb Introductory Promo", 10],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 10],
[
"Soju Cocktails at $17.00", 10],
[
"12345678", 10],
[
"Early Bird 20% Off Bill", 3],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 17], ]
}, {
name: "Redemption Count",
id: "Chicken Up # Tampines",
data: [
[
"Yangpa Bomb Introductory Promo", 10],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 10],
[
"Soju Cocktails at $17.00", 15],
[
"12345678", 15],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10], ]
}, ]
}
});
});
My problem is that although the legend displays properly, when using type:category in the x-axis it only shows the last name which is Chicken Up # Tampines.
I would like for the x-axis to show all three venues instead of just the last one and the legend to remain as it is.
Another issue is after I drill down.
In this case, I would like the legend to display the x-axis in order to allow me to toggle them on/off.
I tried setting x-axis to display categories['venue1', 'venue2', 'venue3'] but in this case my legend just shows series 1.
I would like some advice on how to make both the legend and x-axis be the same.
Thank you!
i give you two fiddles,these can be a clue !
first: fiddle
$(function(){
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Staten Island Violation Distribution'
},
subtitle: {
text: 'Source: NYC Open DataSet</a>'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
data: {
csv: document.getElementById('csv').innerHTML
},
yAxis: {
min: 0,
title: {
text: 'Count'
}
},
legend: {
enabled: true
},
tooltip: {
pointFormat: 'Count: <b>{point.y}</b>'
},
plotOptions: {
column: {
grouping: false,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
series: [ { name: "Description" },
{ name: "Description1" },
{ name: "Description2" },
{ name: "Description3" },
{ name: "Description4" },
{ name: "Description5" } ]
});
});
second:fiddle
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
});
happy coding !
Highcharts has a lovely demo of a chart that drills down from columns to pies. But if I try to switch things up so it uses bars instead of pies, I get bars and then bars, not columns and then bars:
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'bar' //change this to "pie" and it works just fine.
},
series: [{
name: 'Things',
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}],
type: 'column'
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
}) });
Is it possible to switch from columns to bars when I drill down?
I want to implement a Combo Graph with
1. Pie Chart
2. Column 'Normal'
3. Spine
Now my problem is that if the column values are big, it overlaps the pie chart which does not make great viewing, I have a sample at JS Fiddle sample
$(function () {
$('#container').highcharts({
chart: {
},
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y +' fruits';
} else {
s = ''+
this.x +': '+ this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
type: 'column',
name: 'Jane',
data: [9, 9, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 9, 5, 7, 6]
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13,
color: Highcharts.getOptions().colors[0] // Jane's color
}, {
name: 'John',
y: 23,
color: Highcharts.getOptions().colors[1] // John's color
}, {
name: 'Joe',
y: 19,
color: Highcharts.getOptions().colors[2] // Joe's color
}],
center: [20, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
please give me some hint on how to solve this, one thing that comes to mind is set X range larger then max value of the column but not sure how to do that either.
You can try to set maxPadding: 0.5 or some higher value, see: http://jsfiddle.net/ykgNR/1/
I advice you to use two separate charts.
one for pie and other one for combination of line and column.
is there any compulsion for you to display both combination chart and pie chart in same chart section?