Is there any way to get highchart drilldown with breadcrum navigation.
for example in the fiddle where browsers data is present. I want to display breadcrum as browsers / chrome
Highcharts doesn't offer this feature in the regular API. You can report this idea on Highcharts UserVoice channel: https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api
Or create it by yourself by using SVGRenderer feature.
Basic demo from which you can start: https://jsfiddle.net/BlackLabel/7eomv6kw/
chart.browsersLabel = chart.renderer.label('browsers', 0, 0)
.css({
color: '#FFFFFF'
})
.attr({
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 5,
zIndex: 6
})
.add();
API: https://api.highcharts.com/highcharts/chart.events.render
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
Related
Note: I'm quite new to javascript and ChartJS, so I have done my best to look at similar questions but I'm unsure how to apply the solutions to my issue. I'm really quite confused by the plugins, and it seems whenever I try to literally copy and paste in solutions from other posted questions, it either breaks the graph or just doesn't do anything at all. So, with that in mind, I appreciate any help!
I'm trying to format the outer of two overlaid doughnut graphs using ChartJS so that the outer graph looks like a rounded bracket. The intention is to be able to group certain slices of the inner doughnut together, EG: Inner graph shows number of years John has lived in 5 different places, the outer graph is grouping the 2nd, 3rd, and 4th slice to indicate that he lived in these locations while he was a wildland forest firefighter for the US Forest Service.
See below. Please note, the tick marks on the edges are important. It should look like a rounded bracket -> ] <-
Things I have tried:
Doing borderWidth: { top: 1, right: 1, bottom: 0, left: 1 } breaks the graph, as I'm not sure there's a "bottom" persay to a doughnut graph
Trying to change borderColor breaks the graph in the same way
I'm not sure how to select just the cutout to do any custom styling, as I'm not well versed on HTML canvases and how they work.
Although I am currently attempting to remove one of the borders, I have also considered solutions like:
Adding an additional border to the inner doughnut chart and forcing it to clip over the innermost edge of the outer doughnut
adding a round, white background to the inner doughnut that clips over the innermost edge of the outer doughnut
Changing just the color of the innermost edge of the outer doughnut to transparent or white
Hiding the border entirely, letting the background color of the outer doughnut act like the spine of the rounded bracket I'm trying to create, then adding two new data segments to the outer doughnut at the beginning and end each with a different cutout percentage than the spine. (I hope that makes sense. Essentially the data would look like {1, 98, 1} with the cutout specified on each slice so it would look like cutout: {85, 90, 85}, in theory. This version is untested.)
Pardon the comments in the js, those are just there for me to remember what's going on.
var chart1 = document.getElementById('chart1').getContext('2d');
let doughnut1 = new Chart(chart1, {
type: 'doughnut',
data: {
datasets: [{ // OUTER ring
data: [100], //leave at 100
backgroundColor: ['#fff'],
circumference: 300, //determines circumference of outer border X out of 360
weight: 0.15,
radius: '100%',
borderColor: 'black',
borderWidth: 4
}, {
data: [14, 14, 22, 37, 13],
backgroundColor: ['#f5ce42', '#ccc3a3', '#fc95f2', '#cdb2ed', '#423225'],
radius: '95%',
borderColor: 'black',
borderAlign: 'inside'
}]
}
});
.wrap__chart {width: 50vw; margin: 0 auto;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<div class="wrap__chart">
<canvas id="chart1"></canvas>
</div>
Parameters for this graph are:
The graph has to be dynamic, cannot include any static images or the like as the data will be filled from a calculator
The graph must be responsive (Ignoring the fact that it largely isn't right now lol)
Can't use JQuery, unfortunately...
You can leave a single line instead of a rectangle by modifying the width property weight: 0.15 to weight: 0.001 and the border property borderWidth: 4 to borderWidth: 1. There is no other property you can change to make it more like what you want.
The new code:
var chart1 = document.getElementById('chart1').getContext('2d');
let doughnut1 = new Chart(chart1, {
type: 'doughnut',
data: {
datasets: [{ // OUTER ring
data: [100], //leave at 100
backgroundColor: ['#fff'],
circumference: 300, //determines circumference of outer border X out of 360
weight: 0.001,
radius: '100%',
borderColor: 'black',
borderWidth: 1
}, {
data: [14, 14, 22, 37, 13],
backgroundColor: ['#f5ce42', '#ccc3a3', '#fc95f2', '#cdb2ed', '#423225'],
radius: '95%',
borderColor: 'black',
borderAlign: 'inside'
}]
}
});
Ok I finally found a solution for my own question. It's quite roundabout, so I don't know if it's an actual answer for anyone else.
It involves using three graphs, unfortunately:
var sliceA = 60000,
sliceB = 24000,
sliceC = 36000;
var protected = (((sliceA + sliceB)/(sliceA + sliceC + sliceB)) * 360);
//colors
var outerRing = 'green';
var ctx = document.getElementById("chart");
var chart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [sliceA, sliceB, sliceC],
backgroundColor: ['limegreen', 'skyblue', 'firebrick'],
radius: '82%',
cutout: '50%',
}]
}
});
var chart2 = document.getElementById('chart2').getContext('2d');
let doughnut2 = new Chart(chart2, {
type: 'doughnut',
data: {
datasets: [{ // OUTER ring
data: [1, 98, 1], //leave at 100
backgroundColor: [outerRing, 'transparent', outerRing],
circumference: (protected + 5), //determines circumference of outer border X out of 360
weight: 0.5,
radius: '100%',
borderWidth: 0,
borderAlign: 'inside',
borderColor: 'transparent',
rotation: -2
},
{ data: //14, 14, 22, 37, 13
[100],
backgroundColor: [outerRing],
radius: '97%',
cutout: '92%',
circumference: (protected + 2),
borderWidth: '5px',
borderColor: outerRing,
rotation: -1
}
]
},
options: {
parsing: {
key: 'nested.value'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<div class="container">
<canvas id="chart" style="position:absolute;"></canvas>
<canvas id="chart2" style="position:absolute;"></canvas>
</div>
it's not perfect, i'm still working out how to make the back rotation and addition to the variable "protected" in the outer rings responsive, with the intention of making it so that the inside of each tick mark aligns perfectly with 0 degrees and var protected degrees on the circle, to properly indicate that the outer ring encompasses all slices of the doughnut chart within the specified range.
you can change the outer ring style from a capital i to a [ style by changing the radius of each of the two layers of the outer ring. Switching the second dataset to be 100% and the first to be ~95% will change it accordingly.
I want to create chart as per below image. I have also created jsfiddle using highchart in the fiddle.
but, still not able to do what I want. How do I do? Any help would be
appreciated.
http://jsfiddle.net/shahrishabhptechnical/2uxq7raf/
jsfiddle - Highcharts Example
You can use basic yAxis to show ticks with labels, but you will need the right properties and wrap on getMarkPath method:
yAxis: {
lineWidth: 1,
tickPosition: 'inside',
showLastLabel: true,
tickWidth: 1,
tickColor: '#000000',
angle: 90,
tickInterval: 1,
labels: {
y: -10
},
lineColor: '#000000'
}
Live demo: http://jsfiddle.net/BlackLabel/e940tvzx/
API: https://api.highcharts.com/highcharts/yAxis
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I have a Highstock chart. I use highcharts-ng for that. After I remove old serie and add new one, serie in navigator doesn't update. It's not so necessary to have this miniature of chart in navigator, I can set it's opacity and I don't see it, but I need to have the proper range after changing serie. And the range doesn't update too. Here is screencast:
http://videobam.com/jXwOC
Here is my navigator configuration:
navigator:
adaptToUpdatedData: true
series:
data: []
xAxis:
labels:
style:
fontSize: '14px'
fontWeight: 'bold'
maskFill: 'rgba(0, 165, 211, 0.05)'
enabled: true
series:
# lineColor: 'rgba(0,0,0,0)'
# fillColor: 'rgba(0,0,0,0)'
lineColor: '#00a5d3'
fillColor:
linearGradient : {
x1 : 0,
y1 : 0,
x2 : 0,
y2 : 1
},
stops : [[0, '#95d7e7'], [1, '#ffffff']]
Navigator is always bind to the first series or the series according to ID. So instead of removing series, use series.update() - that will update series with all required options, and connection will be working.
I have tested the HighCharts heatmap (heatmap.js) charts. They work fine for me, but there is one situation where I would like to set the cell colors myself, individually - i.e. NOT using the colorAxis settings.
Is there an easy way to do that without messing with the colorAxis stops ? E.G. by setting the color directly in the data series ?
Arguably this defeats the idea of a real "heatmap" but would be the shortest route for me to address a specific requirement (instead of building a HTML table with colored cells).
"
Note finally this is not the same question as "how do you change the color of cells in highcharts heatmap?"
Yes, you can always set color directly in the point config, see: http://jsfiddle.net/c2WgP/
$('#container').highcharts({
chart: {
type: 'heatmap',
inverted: true
},
colorAxis: {
stops: [
[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a']
],
min: -5
},
series: [{
data: [
[0, 0, -0.3],
[0, 1, 0.6],
[0, 2, 1.8], {
x: 0,
y: 3,
z: 0.5,
color: 'green'
}]
}]
});
Just an FYI, the above code works, but the linked fiddle is broken because of something in that linked version of Highcharts. If you make the small tweak of using the latest Highcharts.js, it worked for me:
Simply replace:
<script src="http://code.highcharts.com/3.0.10/highcharts.js"></script>
with
<script src="http://code.highcharts.com/highcharts.js"></script>
Seen here: http://jsfiddle.net/joelhnatow/bnL77dr8/
I have to plot the graph something like below using highcharts.
I have managed to do all everything expect showing the grids and their labels .
$(function() {
var options = $.parseJSON('{"chart":{"renderTo":"container","type":"column"},"averageText":"3.7","plotOptions":{"series":{"pointWidth":["30"],"borderRadius":["10"]},"column":{"pointPadding":[0]}},"credits":{"enabled":false},"title":{"text":"Volume","margin":140},"xAxis":{"categories":[0,1,2,3,4,5,4,3,2,1,0],"gridLineWidth":0},"yAxis":{"labels":{"enabled":true},"title":{"text":"Responses"},"gridLineWidth":0},"series":[{"showInLegend":false,"name":"speaker","data":[{"y":2,"color":"#C82506"},{"y":5,"color":"#BC5B0C"},{"y":3,"color":"#F39019"},{"y":1,"color":"#F5D329"},{"y":1,"color":"#70BF40"},{"y":6,"color":"#01882A"},{"y":10,"color":"#70BF40"},{"y":6,"color":"#F5D329"},{"y":3,"color":"#F39019"},{"y":7,"color":"#BC5B0C"},{"y":3,"color":"#C82506"}]}]}');
new Highcharts.Chart(options, function(chart) {
chart.renderer.circle(200, 70, 40).attr({
fill: '#327CAD',
stroke: '#327CAD',
'stroke-width': 1,
}).add();
chart.renderer.text('3.3', 180, 79)
.attr({})
.css({
"color": "#fff",
"font-size": "30px",
})
.add();
chart.renderer.text('Average', 175, 120)
.attr({})
.css({
"color": "#000",
})
.add();
})
});
Here is what I have done so far. Please suggest me what further option can I include to make it look like graph below
All custom text / shapes can be added by renderer. Axis lines can be achieved by gridLines.