I'm new to Seaside (and Smalltalk) as we are having to use this for a class. I'm looking for help trying to render a pie chart in Seaside using the Highchart package. I can get the chart to show up but it displays generic data labels of "slice". Does anybody know how to trace how to configure the charts properties?
renderBarChartOn: html
html div
script:
(html
highchart: [ :chart |
chart chart defaultSeriesType: 'pie'.
chart title text: 'Light On/Off'.
chart xAxis categories: #('1pm' '2pm' '3pm').
chart yAxis title text: 'Degrees Fahrenheit'.
chart
series:
(Array
with:
(chart step
data: #(80 20))) ])
Have it working now with this:
html div
script:
(html
highchart: [ :chart |
chart chart defaultSeriesType: 'pie'.
chart title text: 'Light On/Off'.
chart series: (Array with: (chart step data: #(#('On' 80) #(#Off 20)))) ])
html div
script:
(html
highchart: [ :chart |
chart chart defaultSeriesType: 'pie'.
chart title text: 'Light On/Off'.
chart series: (Array with: (chart step data: #(#('On' 80) #(#Off 20)))) ])
Related
I am looking to hide Y Axis label for Highchart Gantt.
In my fiddle that I attempted you will note that I am looking to completely remove Y Axis lable but my attempt creates empty column.
yAxis: [{
labels: {
enabled: false
},
}]
Wasn't able to location anything in Highcharts Documentation as well
Use the visible property:
yAxis: [{
visible: false
}]
Live demo: http://jsfiddle.net/BlackLabel/L1gt67zp/
API Reference: https://api.highcharts.com/gantt/yAxis.visible
Hello Highcharts and stackoverflow,
I would like to make it easy for end users to compare wedgets in a Variable radius pie chart (basically the same as Line to the Y axis on hover but radial). As such, when they hover on a wedge, I would like to draw a "ring" around the circle for easy comparisons. This would be appear/disappear/change based on which point you are hovering on.
(in some ways - like a mix between the visualization of the Variable radius pie chart with the concept of an axis like a Polar/Radar Chart)
Any ideas?
Use column series in polar chart with crosshair:
chart: {
polar: true
},
series: [{
type: 'column',
pointPadding: 0,
groupPadding: 0,
colorByPoint: true,
data: [...]
}],
yAxis: {
crosshair: {
color: 'red',
zIndex: 3
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5005/
API Reference:
https://api.highcharts.com/highcharts/chart.polar
https://api.highcharts.com/highcharts/yAxis.crosshair
Can anyone tell me how to change caption of drilldown button at the top right of sunburst chart in highcharts? Please look at the image attached.
Found the answer by looking at the source code of sunburst.js.
series: [{
type: "sunburst",
data: data,
allowDrillToNode: true,
cursor: 'pointer',
drillUpButton: {
text: "< Back"
}
}}
drillUpButton property changes the text of the drill up button in Sunburst chart in highcharts.
I'm trying to recreate an excel chart using Highcharts.
It's a scatter chart, with the dots for each series connected directly (not a trendline). This is the example from excel:
It has to be a scatter charts as the x-axis value are non-periodic (or logarithmic)
Any help gratefully appreciated!
A very helpful Highcharts service team member provided this answer: http://jsfiddle.net/sc5Gv/4/
$(function () {
$('#container').highcharts({
chart:{
type:'scatter'
},
plotOptions:{
scatter:{
lineWidth:2
}
},
series: [{
name: 'Tokyo',
data: [[1.5,7], [2.3,9], [4.2,5.6]]
}, {
name: 'New York',
data: [[0.8,9], [2.1,6.3], [5.0, 10.1]]
}]
});
});
What kind of problem did you come across, because its default chart:
line http://jsfiddle.net/sc5Gv/2/
scatter with enabled lineWidth (http://jsfiddle.net/sc5Gv/1/)
I have a highstock chart with many series. I placed the legend with series names below the chart. The problem is that I cannot know in advance which is the height of the legend, and sometimes it happens to be soo large that it overwrites the graph above.
Is it possible to adapt the size of the graph to the size of the legend in javascript code? Best solution for me would be to keep fixed the size of the graph and enlarge the height of enclosing element.
edit:
a jsfiddle which resembles my situation: http://jsfiddle.net/KfWDD/1/
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
legend: {
enabled: true,
},
rangeSelector: {
selected: 1
},
series: [{
name: 'ADBE',
data: ADBE
}, {
name: 'MSFT',
data: MSFT
}]
});
I would like to have the legend below the navigator. I can obtain this by fixing some margins and offsets in the elements, but then the layout breaks if the legend becomes too tall.
You can set maxHeight for the legend, and add fixed margin to make some space for that legend.