In Highcharts you can add a second axis and a second dial to a gauge and you can change the radius of the dials together but I cannot find a way to change the radius of each dial separately.
I want my plotOptions to look something like this:
plotOptions: {
gauge: {
dial: [
{
radius: "45%",
rearLength: "0%"
},
{
radius: "90%",
rearLength: "-70%"
}
]
}
}
where only this seems to have any effect but it effect both dials
plotOptions: {
gauge: {
dial: {
radius: "45%",
rearLength: "0%"
}
}
}
i tried making plotOptions itself an array and then gauge. The API docs don't seem to offer a way to do this as all options beneath plotOptions seem to be singular.
Move the dial options into the actual series options: http://jsfiddle.net/9rZLH/
series: [{
data: [80],
dial: {
radius: "45%",
rearLength: "0%"
}
},{
data: [70],
dial: {
radius: "90%",
rearLength: "-70%"
}
}]
Edit: the Highcharts Clock example also does it this way.
Related
I have a map and want to detect whenever it is zoomed or panned by the user. I understand that best way to do this would seem to be with the afterSetExtremes event.
I'm using buttons to zoom but the user can double click to zoom in too and pan.
The event doesn't seem to fire though but I'm not sure what I'm doing wrong or if there is another event I should be using to achieve this. Here's a JSFiddle which is based on one of the Highmaps demos, just with the event added:
https://jsfiddle.net/nbymstxe/
What am I doing wrong?
Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/world-population-density.json', function (data) {
// Prevent logarithmic errors in color calulcation
data.forEach(function (p) {
p.value = (p.value < 1 ? 1 : p.value);
});
// Initialize the chart
Highcharts.mapChart('container', {
chart: {
map: 'custom/world'
},
title: {
text: 'Zoom in on country by double click'
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
xAxis: {
events: {
afterSetExtremes() {
console.log("Extremes set");
}
},
},
series: [{
data: data,
joinBy: ['iso-a3', 'code3'],
name: 'Population density',
states: {
hover: {
color: '#a4edba'
}
},
tooltip: {
valueSuffix: '/km²'
}
}]
});
});
I think that you can use the render callback to detect when user has zoomed or panned the chart.
events: {
render() {
console.log(this.mapView)
}
}
Demo: https://jsfiddle.net/BlackLabel/zpn5goaj/
API: https://api.highcharts.com/highcharts/chart.events.render
I am trying to change the color and borderColor of a lat/long point on a Highmap when a user clicks it. Currently when a user clicks that point it turns grey with a thick black border and a "glow" effect around it. I would like it to turn a color of my choosing. I have set the options as follows:
plotOptions: {
series: {
tooltip: {
headerFormat: '',
pointFormat: '{point.name}'
},
states: {
select: {
color: '#EFFFEF',
borderColor: 'red'
},
hover: {
color: '#a4edba'
}
}
}
}
This does not appear to be working. If I put the same states code under plotOptions.mappoint there is, again, no change.
I have repurposed the Highmaps demo with this set up. On that demo if you click on the Basin shape it turns that light green. However, when you click on "Tournai" or "Brussels" or any other point on the map it does not use the states option I have set.
Remember to set the allowPointSelect option to true on series - https://api.highcharts.com/highmaps/series.mappoint.allowPointSelect
If you want to change the point status on click the state options should be set on plotOptons.series.marker.states, not plotOptions.series.states,
Demo: https://jsfiddle.net/BlackLabel/wgqcL1ay/
plotOptions: {
series: {
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[1],
states: {
select: {
fillColor: 'red',
radius: 12,
}
}
}
}
},
API: https://api.highcharts.com/highmaps/series.mappoint.marker.states.select
Area chart looks flat due to the fact that Y axis always starts from 0 in compare to a line chart which in the same data uses some sort of auto-fit.
Plunkr
I would like to have similar auto-fit on the area chart that works on line chart as default.
(Using yAxis[0].setExtremes is not an option really).
Is there any configuration to do so?
You can achieve it by setting xAxis.min property like that:
yAxis: {
min: 10000,
labels: {
formatter: function() {
return this.value / 1000 + 'k';
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/Layfnuz4/
API reference:
https://api.highcharts.com/highcharts/xAxis.min
The second approach is to set plotOptions.area.threshold
plotOptions: {
area: {
threshold: 10000,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/r7qc1jpk/
API reference:
https://api.highcharts.com/highcharts/series.area.threshold
EDIT
Automatic approach: set series.area.softThreshold = true as line series has.
series: [{
softThreshold: true,
name: 'Data',
data: data
}]
Demo:
https://jsfiddle.net/BlackLabel/8uj3kz4a/
API reference:
https://api.highcharts.com/highcharts/series.area.softThreshold
I been playing with Chartjs to generate something like highcharts but couldn't bring it close. The application is finished and it seems a waste to buy highcharts, migrate from chartjs for this single chart.
Is there a way Chartjs can output something like that? I did try creating two horizontal bar charts side-by-side in separate canvas; while i saw the output; the behavior is not what I want.
You could use a horizontal stacked barchart with two datasets. Add negative values to the dataset on the left (male) but display the absolute value in the callbacks of the xAxis and the tooltip.
var ctx = document.getElementById('myChart').getContext('2d');
var data = {
labels: ["20-30", "10-20", "0-10"],
datasets: [{
label: "Male",
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgb(54, 162, 235)",
borderWidth: 2,
data: [-65, -59, -20],
}, {
label: "Female",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
data: [72, 45, 18],
},
]
};
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
options: {
scales: {
yAxes: [{
stacked: true
}],
xAxes: [{
ticks: {
callback: function(value, index, values) {
return Math.abs(value);
}
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItems, data) {
return data.datasets[tooltipItems.datasetIndex].label + ": " + Math.abs(tooltipItems.xLabel);
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="myChart"></canvas>
If you look at the example here; when hovering the mouse over a marker point a rectangular box pops up. How do I provide a border-radius to this box.
series: {
marker: {
lineColor: null,
states: {
hover: {
fillColor: 'white',
radius: 10
}
}
}
}
You can change border radius via tooltip.borderRadius property.
tooltip: {
borderRadius: 20
},
example: http://jsfiddle.net/L24w2ghd/