I want to update x and y dataLabel parameters of the specific point. Is it possible to do in highcharts?
I tried to update point like this. But this didn't work as I expected.
chart.series[0].points[1].update({
dataLabels: {x: 20, y: -20}
});
Here is jsfiddle:
https://jsfiddle.net/chermio/0973fcwb/1/
As I have mentioned in my comment
In pie chart it is possible to update dataLabels.distance option:
http://api.highcharts.com/highcharts/plotOptions.pie.dataLabels.distance
function(chart) {
chart.series[0].points[1].update({
dataLabels: {distance: -10}
});
}
Live example: https://jsfiddle.net/0973fcwb/4/
Related
For my graph, I have a single y-axis (y1), and I am trying to add a second axis (y2) which is a scaled version of y1.
Simply put, is it possible to do a graph like this. But I want a second axis, with the same scaling ratio, but in different units (i.e. that is multiplied by some k).
I have tried to just change the label on the yAxis:
` labels: {
format: '$ {value* price} ',
style: {
color: Highcharts.getOptions().colors[0]
}
},`
But this hacky way does not seem to work for me.
In my case, I have a graph of percent change on y1, is it possible to put the price on y2?
I do not want to add another set of lines since I am already using 10, which would mean I would need 20 lines in total
Any help would be greatly appreciated!
You need to link the second axis to the first by linkedTo property and use formatter function to display some custom scale:
yAxis: [{}, {
opposite: true,
labels: {
formatter: function() {
return this.value * 1000
}
},
linkedTo: 0
}]
Live demo: http://jsfiddle.net/BlackLabel/j83pghta/
API Reference:
https://api.highcharts.com/highcharts/yAxis.linkedTo
https://api.highcharts.com/highcharts/yAxis.labels.formatter
My program is drawing a graph with the following (comparable) source code from the jqplot page. The goal is to draw a vertical line at position x in the graph. I followed up the guide an examples on the jqplot page, but it didn't draw the line, just the graph.
Is someone experienced with that? Or could tell me how the options/calls should be to get the line in the graph?
Example-code:
$(document).ready(function(){
var plot2 = $.jqplot ('chart2', [[3,7,9,1,4,6,8,2,5]], {
// Give the plot a title.
title: 'Plot With Options',
// You can specify options for all axes on the plot at once with
// the axesDefaults object. Here, we're using a canvas renderer
// to draw the axis label which allows rotated text.
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
// An axes object holds options for all axes.
// Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
// Up to 9 y axes are supported.
axes: {
// options for each axis are specified in seperate option objects.
xaxis: {
label: "X Axis",
// Turn off "padding". This will allow data point to lie on the
// edges of the grid. Default padding is 1.2 and will keep all
// points inside the bounds of the grid.
pad: 0
},
yaxis: {
label: "Y Axis"
}
}
});
});
Adding this to your existing code should help you draw a vertical line.
CODE:
canvasOverlay: {
show: true,
objects: [
{verticalLine: {
name: 'stack-overflow',
x: 4, // x-axis position where you want to draw the vertical line.
lineWidth: 6,
color: 'rgb(100, 55, 124)',
shadow: false
}}
]
}
You can set the 'x' to a desired value of your choice.
IMP: In order for the canvasOverlay to work, you must include the jqplot.canvasOverlay.min.js file, else it will not work.
Here's a working fiddle: jqPlot - Draw vertical line on the graph
I included the following files in code above(JS Fiddle). You can also refer to the External Resources section on the left pane in JSFiddle.
jquery.jqplot.min.js
jquery.jqplot.min.css
jqplot.canvasOverlay.min.js
jqplot.canvasAxisLabelRenderer.min.js
jqplot.canvasTextRenderer.min.js
jqPlot Example here - jqPlot Canvas Overlay
Hope it helps :-)
I am trying to put together a bar chart in C3.
http://jsfiddle.net/michaelkuzmin/Lcxe0frw/9/
var chart = c3.generate({
data: {
columns: [
['% Women CS', 0.036, 0.095, 0.105, 0.182, 0.121],
['% Women Math', 0.182, 0.077, 0.182, 0.026, 0.097],
['% Women Comp Eng /EE', 0.039, 0.074, 0.032, 0.095, 0.087]
],
type: 'bar',
labels: true
},
axis : {
y : {
tick: {
max: 0.50,
min: 0,
// padding: {top: 0, bottom: 0}
}
},
x: {
type: 'category',
categories: ['Carleton', 'Alberta', 'Sherbrooke', 'McGill', 'Laval']
}
}
});
1) When I enable value labels the Y axis immediately breaks by setting the max range to 14
2) When I try to set it manually it ignores the Y: max min parameters.
What am I missing?
P/S Somebody posted a very similar question here c3.js y axis min/max not working
but the solution they posted does not work for me. The solution was to use padding = 0. You can uncomment it in the fiddle and see that it makes no difference.
The documentation on c3.js is pretty poor, but it seems that the max and min don't belong in the y.tick object, but directly in the y. Moving them, and then applying the padding to the y as well, seems to resolve the issue. See updated fiddle here.
I figured it out:
I was not including the jqplot.CategoryAxisRenderer. Once I included that, I was able to get it working.
Thanks, everyone!
UPDATE:
My code works in JSFiddle, so it's a CSS problem I'm having. Please disregard.
I'm trying to create a fairly simple bar chart in jQPlot. I'm expecting two horizontal bars, one on top of the other. Both are equal to 1 on the X axis. I want the Y axis to have the labels 'In Progress' for the top bar, and 'Apr 2014' for the bottom bar. I have tried numerous combinations. If I do not specify Ticks, then I see the two bars. Specifying Ticks, or using the desired labels as the Y axis data point just shows both labels overlapping with no bars. (ignore the setTimeout) Thanks in advance.
Here's the code:
var data = [[1,1],[1,2]];
var ticks = ['In Progress','Mar 2014'];
$(function () {
setTimeout(function(){
var plot1 = jQuery.jqplot ('chartdiv', [data],
{
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal'
},
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
}
});
},
100);
});
I have modified the JsFiddle given by Batu Zet previously adding following lines in order to label your bar chart here :
series: [
{
pointLabels:{
show:true,
labels:['Apr 2014', 'Apr 2014']
}
},
{
pointLabels:{
show:true,
labels:['In Progress', 'In Progress']
}
}
]
P.S : The labels are duplicated for each serie in order to display the same label for two points in a serie.
In my browser (Firefox 12), this example of a Highcharts Chart looks not correct. The labels are not styled in the same radius as the background radius is.
Is there any option in Highcharts to fix this?
Thx in advance.
Yes, there are options on the label that will fix this. If you format the label according to the below code the label should arc properly around the gauge.
labels: {
step: 2,
rotation: 'auto',
align: 'center',
distance: 15,
x: 0,
y: 0
},
I updated your jsfiddle to demonstrate. You were missing the x and y position offsets.