I've had a request form a client to have the following chart replicated in HighCharts cloud, but I'm having difficulty figuring out how to make the first series show as a "floating gray bar" - or whatever it's called. Any suggestions on how I could achieve to this?
You can use columnrange series type to add the 'floating bar':
series: [{
type: 'column',
data: [...]
}, {
type: 'columnrange',
data: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/ys1x79uk/
API Reference: https://api.highcharts.com/highcharts/series.columnrange.data
Related
Do Highcharts have (or working) on multiple axial like this ?
https://www.fusioncharts.com/charts/line-area-charts/line-chart-with-multiple-axes-and-series?framework=javascript
Yes, they have. In fact, we've got an array of axes, so we can have several of them.
API references:
https://api.highcharts.com/highcharts/xAxis
https://api.highcharts.com/highcharts/yAxis
Demo:
https://jsfiddle.net/eu6omtg1/
yAxis: [{}, {
opposite: true
}, {}, {
opposite: true
}],
How can I exclude a specific data series from showing in the tooltip with tooltip.trigger = axis?
I'm asking because I have a very complex graph with one line chart, two bar charts and one heatmap. And the heatmap has so many data that the tooltip ends up with too many lines. The heatmap values are not very important, so I would like to remove them from showing in the tooltip.
Right now I'm using formatter to exclude them, but is there any other way?
I do exactly the same: adding a new attribute to the series and checking it from formatter.
Something like this:
series: [{
// ...
showInTooltip: true
// ...
}]
// ----
formatter: series => {
var displayed = series.filter(item => item.showInTooltip);
// work with displayed where showInTooltip === true
}
Also you can store callback instead attribute and it will work.
Updated: Suddenly I found undocumented feature and it will solved you trouble by the right way, apparently.
series: [{
// ...
tooltip: {
show: false
}
// ...
}]
I am visualizing multiple dataset on a Chart JS. Whenever I enable/disable a dataset. This dataset would create an instance of its data. On my case, it is xAxes.
and when I enable another dataset:
I want to disable creating another instance of xAxes and every it would share the same fixed axes.
xAxes: [{
type: 'time',
distribution: 'linear',
ticks: {
source: 'data'
},
time: {
parser: 'HH:mm:ss',
unit: 'hour',
unitStepSize: 1,
//min: '00:00:00',
//max: '23:59:59'
}
}],
Update: 1
I used round: 'hour', to include in xAxes.time. It looks fixed. However, I don't know why points always go to corners and spread freely with time as shown:
Update: 2
I removed
/*ticks: {
source: 'data'
},*/
Now it is scaled.
Removing the
ticks: {
source: 'data'
},
made the graph scaled with time.
I'm using aldeed's autoform, simpleschema and collection2. I am looking to change the way the radio buttons / check boxes look. I've read through the documentation but am unable to find how to incorporate different ways how the buttons are visually rendered. On the GIT issue page, I read through how to implement custom class in the schema itself. Example:
"type":{
type: String,
autoform:{
type: "select-radio-inline",
class: "radio-primary",
options: function(){
return [
{label: "Well Known", value: "well-known"},
{label: "Basic", value: "basic"},
{label: "Extended", value: "extended"}
];
},
But somehow it does not change the look of the default radio buttons. Is there a workaround for this?
I'm wondering if it is possible to zoom in on a slice in a pie chart.
My chart is modeled after this example jsfiddle example
chart: {
renderTo: 'container',
type: 'area',
zoomType: 'x',
}
But it doesn't seem to work with pie charts. Am I missing something here?
Ideally, I would have a pie chart with 2 layers, where the outer layer serves as a child of the inner layer. When selecting a child slice, I could then have an entire pie chart showing that slice alone, along with its own children, etc.
Unfortunaltely zoom is not allowed for Pie Charts as its properties show you
x: to zoom in x-axis
y: to zoom in y-axis
xy: to zoom in both axes
but you can use size property with JavaScript to show zooming.
size property demo
I think I found what I was actually looking for. It isn't zoom, but rather the option of capturing click events on slices.
In order to do that, one must use the allowPointSelect attribute, which can be added to a pie chart like this (just one of several different ways):
plotOptions: {
pie: {
shadow: false,
allowPointSelect: true,
},
}
Then in order to capture clicks one has to declare the events attribute in the series being used:
series: [{
name: 'Example',
data: [
{
name: 'Firefox',
value: 45.0
},
{
name: 'IE',
value: 26.8
},
{
name: 'Chrome',
value: 12.8,
},
],
size: '100%',
point: {
events: {
click: function() {
// some code to execute when clicking a slice
alert('Slice name: ' + this.name + ' and value: ' + this.value);
}
}
}
}]
Then in that click function, any javascript code can be executed, and the declared fields in the data can also be accessed. So a second pie chart could theoretically be created on the fly.