I need to show highcharts api series name in one line but not able to get it correctly.
When viewport width is larger then it's not an issue but on narrow width the third legend item drops to new line. Due to SVG rendering, I am not able to apply CSS into group element.
In any case active users just wraps to second line and I am not able to set width of parent group element. So far I have tried all legend default options but it didn't work.
So any help would be great.
https://jsfiddle.net/h28jv3zL/
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
legend: {
align: "left",
x: 0,
y: 0,
itemWidth: 100,
// symbolWidth: 0,
// symbolHeight: 0,
// symbolRadius: 0,
verticalAlign: "top",
layout: "horizontal",
floating: false,
backgroundColor: "white",
shadow: false,
itemStyle: {
"fontWeight": "normal",
"color": "#101010",
"textOverflow": "normal",
"width": "auto",
"white-space": "nowrap",
'padding-right': "10px"
}
},
plotOptions: {
series: {
fillOpacity: 0.1
}
},
series: [{
name: "Inactive Users",
data: [10,11,12],
color: "#D8D8D8",
//showInLegend: false
},
{
name: "New Users",
data: [10,11,12],
color: "#696969",
//showInLegend: false
},
{
name: "Active Users",
data: [10,11,12],
color: "#202020",
//showInLegend: false
},]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
You can add some logic to check the chart.plotWidth and base on that substract series name or hide it inside the labelFormatter callback.
Demo: https://jsfiddle.net/BlackLabel/souphrg9/
Related
I tried to create a column chart in highcharts to display monthly data on a datetime axis. The problem is that the spacing between the bars is different. For example after the month february there is only a small spacing whereas after other months the spacing is bigger. Maybe this is happening because the month feburary only has 28 days.
Anyway here is my code:
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: [{
type: 'datetime'
}, {
type: 'datetime',
visible: false
}],
plotOptions: {
column: {
grouping: false,
groupPadding: 0,
pointPadding: 0,
pointPlacement: 'between'
}
},
series: [{
name: 'Year',
xAxis: 1,
data: [25],
zIndex: 4,
color: '#222',
pointStart: Date.UTC(2017, 0, 1),
pointInterval: 1,
pointIntervalUnit: 'year'
}, {
name: 'Month',
data: [50, 100, 130, 160, 170, 200, 170, 165, 250, 200, 230, 160],
pointStart: Date.UTC(2017, 0, 1),
pointInterval: 1,
pointIntervalUnit: 'month',
zIndex: 2,
color: 'red',
}],
});
http://jsfiddle.net/bosngxk1/2/
I also added another bar for the whole year. You notice the already mentioned problem with the spacing and that the year area is a bit too wide. Do you have any ideas how to fix this?
If you do not mind, you can use Highstock. There is an axis option called ordinal. With that set to true (by default), all points are equally spaced. Take a look at the example posted below.
API Reference:
https://api.highcharts.com/highstock/xAxis.ordinal
Example:
http://jsfiddle.net/k0k2n83p/
Well, I guess there is no other option than using categorical x axis. I don't like this solution since I somehow have to hardcode datetime values instead of using datetime formatters and so on.
Anyway by defining the xAxis as follows I get the desired chart layout.
xAxis: [{
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
tickmarkPlacement: 'on'
},
{
categories: [
'2017'
],
visible: false
}]
Fiddle: http://jsfiddle.net/hho4zrso/
I have a line chart like this:
http://jsfiddle.net/vbLdsodu/
How do i remove or hide the line after july? I want the date axis to continue but don't show the line where the values is 0.
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 0, 0, 0, 0, 0]
}]
});
});
You can replace 0 with null in the data which will then keep the axis listing the months, but stop the line from drawing.
It's also possible to do this part way through the graph and the line will draw from the next data point.
I have a graph with a labelled Y-Axis with points 1 through 100. In addition to the regularly spaced labels (0, 10, 20, etc), I want to add a label for an arbitrary point, say 47. Is this possible with highcharts?
You can add a specific line to the yAxis with the plotLines option.
yAxis: {
plotLines: [{
value: 47,
color: 'rgb(216, 216, 216)',
width: 1,
}]
},
http://jsfiddle.net/nicholasduffy/wa6ukyyp/1/
EDIT:
This seems a bit of a hack, but you could fake the label.
yAxis: {
plotLines: [{
value: 47,
color: 'rgb(216, 216, 216)',
width: 1,
label : {
text: '47',
x: -30,
y: 2
}
}]
},
http://jsfiddle.net/nicholasduffy/wa6ukyyp/2/
Based on your comment, you can add a custom tick with tickPositioner function, with a code like this
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
tickInterval: 20, //sets the interval ticks
tickPositioner: function(){
var ticks = this.tickPositions; // gets the tick positions
ticks.push(47); // adds the custom tick
ticks.sort(function(a, b) {
return a - b; // sorts numerically the ticks
});
return ticks; // returns the new ticks
}
},
series: [{
data: [29.9, 71.5, 86.4, 29.2, 44.0, 76.0, 93.5, 98.5, 16.4, 94.1, 95.6, 54.4]
}]
});
});
JSFiddle demo
I think the solution I found that comes closest is to create a line of zero thickness and label the line:
plotLines: [{
value: cutoff,
color: 'rgb(216, 216, 216)',
width: 0,
label: {
text: 'label_name',
style: {
color: 'grey',
fontweight: 'bold'
}
}
}],
The label_name goes pretty close to the Y-Axis, and it gets the point across without putting a tooltip onto the graph
I am trying to remove the offset on the tick of the x-axis.
I want the first tick 10/8 to start from the x-axis and y-axis intersection.
10-8 should be on the marker which is between the two labels.
I have following code for it in highchart.
xAxis: {
categories: categories,
title: {
text: title_x_axis,
style: {
fontWeight: 'bold'
},
formatter: function(){
return "<h3><b>" + this.value + "</b></h3>";
}
},
min: 0,
startOnTick: true,
endOnTick: true,
minPadding: 0,
maxPadding: 0,
align: "left"
},
Max padding and min padding are set to 0, So I don't know what the problem is?
EDIT:
I have created a fiddle of the type of chart I am dealing with.
Note Image below has different x-axis values as I am not using the same value of fiddle.
Also I have set tickmarkPlacement: "on" after I took that snapshot.
I want Jan label to start from the beginning of line. It has some offset currently.
Can anyone help me with this?
You could use (assuming 'categories' is your array of categories)
min: 0.5,
max: categories.length-1.5,
startOnTick: false,
endOnTick: false,
Example: http://jsfiddle.net/27hg0v06/1/
Use newset version of highcharts to get fully working tooltip:
<script src="http://github.highcharts.com/highcharts.js"></script>
Add pointPlacement: 'on' in plotOptions.
plotOptions: {
series: {
pointPlacement: 'on'
}
}
Take a look at the tickMarkPlacement property:
http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement
By default, it is 'between', which is what you are seeing on your chart.
Setting it to 'on' should do what you need.
You can look at the minPadding and maxPadding properties in addition to the tickMarkPlacement:
http://api.highcharts.com/highcharts#xAxis.minPadding
http://api.highcharts.com/highcharts#xAxis.maxPadding
Updated Fiddle:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tickInterval: 1,
tickmarkPlacement: "on",
startOnTick: true,
endOnTick: true,
minPadding: 0,
maxPadding: 0,
offset: 0
},
plotOptions: {
series: {
findNearestPointBy: 'x',
label: {
connectorAllowed: false
},
pointPlacement: 'on'
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
You Just Need to Add the following before series object:
plotOptions: {
series: {
findNearestPointBy: 'x',
label: {
connectorAllowed: false
},
pointPlacement: 'on'
}
},
Highcharts can connect a series line between null values, but it appears that it cannot connect a line between points with value of 0 if the yAxis min is also set to 0. Is there a workaround?
Here's an example: http://jsfiddle.net/p2EYM/2/
What the chart looks like (note breaks in line):
and the Highcharts code:
$(function () {
$('#container').highcharts({
title: {
text: 'Points with zero value are not connected by line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
offset: 10,
},
plotOptions: {
series: {
connectNulls: true
}
},
yAxis: {
min: 0,
},
series: [{
data: [20, 0, 0, 0, 0, 40, 50, 10, null, null, 0, 0]
}]
});
});