I have some misunderstanding with the highcharts export server and font.
I install the next font Frutiger-Light on the 'window 10' machine and in the config of legend I wrote the fond name
"legend": {
"layout": "horizontal",
"align": "center",
"verticalAlign": "bottom",
"floating": false,
"x": 0,
"y": 0,
"itemDistance": 10,
"itemStyle": {
"color": "#c00",
"fontFamily": "Frutiger-Light (TrueType)",
"fontSize": "30px",
"fontWeight": "100",
"lineHeight": "16px"
}
In the preview of the font, I saw
but when exported this config by server I saw the next
my legend has the wrong letter a, In Microsoft office the letter is correct (without tail), after highcharts server with, Why? I can't understand
(I try other fonts from the 'Frutiger' family and I have the same problem)
Related
I have 2 spline charts that I want to compare on a singe graph. The first should take up the top 25% of the plot area and the second should take up the bottom 75% of the plot area. To achieve this, I tried the following:
"yAxis": [{
"height": "25%",
"id": "blue",
"labels": {
"enabled": false
},
"title": {
"text": ""
},
"min": 267.15,
"max": 289.15,
"index": 0
},{
"id": "red",
"height":"75%",
"top": "25%",
"min": 265,
"max": 290,
"plotLines": [{
"color": "#fff8df",
"value": 285.15
}, {
"color": "#fff8df",
"value": 279.15
}, {
"color": "#c5eded",
"value": 273.15
}],
"index": 1
}],
The problem with this is that I have a min/max set (the graph is showing temperatures and we only care about a certain range). Because of these combined things, the graph is drawing right over the xAxis and outside of the expected plot area.
see: https://jsfiddle.net/06f9huam/
What I would like to see is the red line to be cut off if it goes below 265, just like it gets cut off when it goes over 290.
You can cut the unnecessary parts of lines by using clip-path attribute, example:
chart: {
animation: false,
events: {
load: function() {
const series1 = this.series[0];
const series2 = this.series[1];
const clipRect1 = this.renderer.clipRect(
series1.yAxis.left - series1.group.translateX,
series1.yAxis.top - series1.group.translateY,
series1.yAxis.width,
series1.yAxis.height
);
const clipRect2 = this.renderer.clipRect(
series2.yAxis.left - series2.group.translateX,
series2.yAxis.top - series2.group.translateY,
series2.yAxis.width,
series2.yAxis.height
);
series1.graph.clip(clipRect1);
series2.graph.clip(clipRect2);
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/15e3g78w/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#clipRect
https://api.highcharts.com/class-reference/Highcharts.SVGElement#clip
I have this simple bubble chart https://jsfiddle.net/zengoric/4qyqokgj/
Highcharts.chart('container', {
chart: {
type: 'bubble',
},
series: [{
"name": "First data set",
"data": [{
"x": 0,
"y": 2,
"z": 4.61,
}],
"sizeByAbsoluteValue": true,
}, {
"name": "Second data set",
"data": [{
"x": -1,
"y": -3,
"z": 4.6,
}],
"sizeByAbsoluteValue": true
}]
});
but it display nothing. Something is wrong with data or it's a bug in highcharts library?
You have to initialize zMin or/and zMax properties to make bubbles visible.
Live demo: https://jsfiddle.net/BlackLabel/gs2dr565/
Bubbles are too small to be drawn in the example that you provided.
API references:
https://api.highcharts.com/highcharts/series.bubble.zMin
https://api.highcharts.com/highcharts/series.bubble.zMax
I have a list of words and phrases together with as score and a definition for each. I would like to present this as an interactive wordcloud where the text sizes are determined by the scores and the definitions appear as tooltips on hover. I would prefer to do this in Jupyter.
I know a number libraries that offer nice ways to generate wordclouds and/or tooltips. How I attach the tooltips to the words in the wordcloud?. The wordcloud needs to have a way of knowing what text you are hovering over and trigger the corresponding tooltip. I have not found a way to do that so far.
I am fairly agnostic regarding the linraries used to do this.
I mainly want the result to be fairly high-level and mostly declarative.
I have looked at Vega, bqplot and Andreas Mueller's wordcloud package.
Vega has both wordcloud and tooltip functionality and is designed to compose piplines nicely, but I am not sure how to connect them the right way. I would also prefer to write actual Python code rather than code using JSON though, but that is a minor concern.
Bqplot does tootips very nicely but does not have a wordcloud component.
The wordcloud package generates nice wordclouds but I do not know how to make them interactive.
I have done this using both ipyvega and brunel brunel is much simpler but I do not like its wordcloud layout.
Brunel
df = pd.DataFrame(data, columns=['word', 'size', 'text'])
%brunel cloud size(size) label(word) tooltip(text)
ipyvega
spec = {
"$schema": "https://vega.github.io/schema/vega/v3.json",
"name": "wordcloud",
"width": width,
"height": height,
"padding": 0,
"data" : [
{
'name' : 'table',
'values' : [{'word': word, 'text': text, 'size': size}
for word, text size in data]
}
],
"scales": [
{
"name": "color",
"type": "ordinal",
"range": ["#d5a928", "#652c90", "#939597"]
}
],
"marks": [
{
"type": "text",
"from": {"data": "table"},
"encode": {
"enter": {
"text": {"field": "word"},
"align": {"value": "center"},
"baseline": {"value": "alphabetic"},
"fill": {"scale": "color", "field": "word"},
"tooltip": {"field": "text", "type": "nominal"}
},
"update": {
"fillOpacity": {"value": 1}
},
},
"transform": [
{
"type": "wordcloud",
"size": [width, height],
"text": {"field": "text"},
"font": "Helvetica Neue, Arial",
"fontSize": {"field": "datum.size"},
}
]
}
],
}
Vega(spec)
If you try to combine stacked series with a flag series there is an odd behaviour where only the flag series gets drawn. If you toggle it in the legend everything gets drawn properly.
http://jsfiddle.net/x9gaca75/
$("#container").highcharts({plotOptions: {series: {stacking: "normal"}}, ...});
What configuration am I missing to make this behave properly?
There is a bug in Highstock, where setting plotOptions.series.stacking will set the same for flags. Of course, stacking won't work for flags since those don't have values. In other words, workaround is to set stacking = false for flags:
options.series.push({
"stacking": false, // disable stacking
"show_in_legend": false,
"name": "Flags",
"type": "flags",
"data": [{
"x": 1432215000000.0,
"title": "AM"
}, {
"x": 1432229400000.0,
"title": "Midday"
}, {
"x": 1432245600000.0,
"title": "Peak Hour"
}, {
"x": 1432247400000.0,
"title": "Rolling, PM"
}]
});
Demo: http://jsfiddle.net/x9gaca75/1/
http://jsfiddle.net/ramon_ackermann/PhjX7/2/
$(function () {
$('#container').highcharts({
chart: {
type:'column'
},
xAxis: {
min:0,
max:0,
categories: ["test"]
},
series: [{
"name": "ABELO",
"data": [
0.73
]
},{
"name": "UAAU",
"data": [
0.77
]
},{
"name": "ANCB",
"data": [
1.72
]
},
{
"name": "avg",
"type": "line",
"color": "#ff0000",
"data": [
{
"x": -0.5,
"y": 1.5
},{
"y": 1.5,
"dataLabels": {
"enabled": true,
"align": "right",
"verticalAlign": "bottom",
"formatter": function(){
return 'avg: ' + this.y;
},
"style": {
"fontWeight": "normal"
},
"x": 0.5
}
}
]
}
]
});
});
Before updgrading to Highcharts 3, the code above would work properly, drawing the line from left to right, but since I'm trying to upgrade to v3, I can't get the line to draw all the way to the right.
I devised the above solution from my previous question / answers (highcharts line not fully plotted)
The above sample is a simplified version of what I need, unfortunately plotLines is not a solution for me.
Simple solution is to extend another point onto your avg line:
...,{"x": 1.5, "y": 1.5}]
Why is a plotLine not appropriate?
I advice to use plotLine or use renderer.
http://api.highcharts.com/highcharts#yAxis.plotLines
http://api.highcharts.com/highcharts#Renderer.path