How to add gradient css to Nivo Rocks Line chart area? - css

I tried adding gradient css to line chart area of nivo rocks component according to this guide Gradients. but it is not working.
Example screenshot
I need something like the above chart gradients. And here is my code,
<ResponsiveLine
data={data1}
margin={{
"top": 65,
"right": 50,
"bottom": 50,
"left": 70
}}
yScale={{ type: 'linear', min: 0, max: 10 }}
tooltip={tooltip}
stacked={true}
curve="monotoneX"
axisTop={null}
axisRight={null}
axisBottom={{
"tickSize": 5,
"tickPadding": 5,
"tickRotation": 0,
"legend": "VIDEOS",
"legendPosition": "middle",
"legendOffset": 42
}}
axisLeft={{
"tickSize": 5,
"tickPadding": 5,
"tickRotation": 0,
"legend": "MARKS",
"legendPosition": "middle",
"legendOffset": -40
}}
defs={[{
id: 'gradientC',
type: 'linearGradient',
colors: [
{ offset: 0, color: '#fff' },
{ offset: 100, color: '#000' },
],
},]}
fill={[
{ match: '*', id: 'gradientC' },
]}
animate={true}
enableGridY={false}
colors={'linear-gradient(to bottom, #fff, #000)'}
colorBy={'id'}
lineWidth={6}
dotSize={14}
enableDots={false}
dotColor="inherit:darker(0.3)"
dotBorderWidth={2}
dotBorderColor="#ffffff"
enableDotLabel={true}
dotLabel="y"
dotLabelYOffset={-12}
enableArea={true}
areaOpacity={0.1}
motionStiffness={90}
motionDamping={15}
legends={[]}
/>
This is what I got,
Thanks in advance.

Bit late to the party on this, but if you're still stuck:
Pretty hacky, but will work as a little work around for adding a gradient to Nivo line chart.
Create an SVG def for the linear gradient and then reference it by url in the color array.
// these are just an example for the chart wrapper
const height = 300;
const width = 800;
const gradProps = {
gradientUnits: 'userSpaceOnUse',
x1: '0',
y1: '0',
x2: '0',
y2: height
};
const Chart = () => (
<div style={{ height, width }}>
<svg>
<defs>
<linearGradient id="someGradientId" {...gradProps} >
<stop offset="25%" stopColor="#ff0000" />
<stop offset="100%" stopColor="rgba(255,255,255,0)" />
</linearGradient>
</defs>
</svg>
<ResponsiveLine
data={chartData}
colors={['url(#someGradientId)']}
margin={{
top: 2,
bottom: 2
}}
dotSize={0}
enableArea={true}
enableGridX={false}
enableGridY={false}
curve={curve}
axisBottom={{
tickValues: []
}}
/>
</div>
);
Will also need to then overwrite the color value for stroke of the line via css
, as the
[stroke="url(#someGradientId)"] {
stroke: #ff0000;
}

If you put
enableArea = {true}
it will show the background. Also you can put
areaOpacity={0.1}
Example
<ResponsiveLine
data={data}
margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
xScale={{ type: 'point' }}
yScale={{ type: 'linear', min: 'auto', max: 'auto', stacked: true, reverse: false }}
curve="catmullRom"
axisTop={null}
axisRight={null}
enableGridX={props.enableGridX}
enableGridY={props.enableGridY}
axisBottom={{
orient: 'bottom',
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
}}
axisLeft={{
orient: 'left',
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
}}
pointSize={10}
pointColor={{ from: 'color', modifiers: [] }}
pointBorderWidth={2}
pointBorderColor={{ from: 'serieColor' }}
pointLabel="y"
pointLabelYOffset={-12}
areaOpacity={0.25}
useMesh={true}
keys={['commits']}
transportation
defs={[{
id: 'gradientC',
type: 'linearGradient',
colors: [
{ offset: 0, color: '#e65a14' },
{ offset: 100, color: '#e65a14' },
],
},]}
fill={[
{ match: '*', id: 'gradientC' },
]}
animate={true}
colorBy={'id'}
lineWidth={2}
dotSize={14}
enableDots={false}
dotColor="inherit:darker(0.3)"
dotBorderWidth={2}
dotBorderColor="#e65a14"
enableDotLabel={true}
dotLabel="y"
dotLabelYOffset={-12}
enableArea={true}
motionStiffness={90}
motionDamping={15}
legends={[
{
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 100,
translateY: 0,
itemsSpacing: 0,
itemDirection: 'left-to-right',
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: 'circle',
symbolBorderColor: 'rgba(0, 0, 0, .5)',
effects: [
{
on: 'hover',
style: {
itemBackground: 'rgba(0, 0, 0, .03)',
itemOpacity: 1
}
}
]
}
]}
/>

Related

unable to access reactive nested object returned by useFetch in <script setup> but i am able to access in the html

So I am trying to create a flow where there is a form, when they user modifies the form useFetch is triggered and the results on the page update. things are mostly working well i am able to access the currentPokemon variable within the html and reactivity is working great. The issue is that I am trying to access parts of currentPokemon from within the so that the chart i define will also be reactive.
The graph_data show in the below is in the currentPokemon object, but i cant access it from within <script setup>
<script setup>
import { ref } from 'vue'
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
} from 'chart.js'
import { Scatter } from 'vue-chartjs'
ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend)
const units = ref('METRIC')
const friction = ref(1)
const payload = ref(1)
const distance = ref(1)
const time = ref(1)
const gearRatio = ref(1)
const motionProfile = ref(0.25)
const conservatism = ref(1.5)
const stage = ref('DEFAULT')
const options = {
responsive: true,
maintainAspectRatio: true
}
const { data: currentPokemon } = await useFetch(`http://localhost:3000/`, {
method: "POST",
body: {
unit_system: units,
motion_profile: motionProfile,
move_time_sec: time,
move_distance_deg: distance,
friction: friction,
payload: payload,
gear_ratio: gearRatio,
safety_factor: conservatism,
be_stage: stage,
manufacturers: ["Bosch"],
motor: "DEFAULT"
}
})
console.log(typeof(currentPokemon))
console.log(currentPokemon)
console.log(currentPokemon.graph_data)
const test = ref(currentPokemon.value)
console.log("test")
console.log(typeof(test))
console.log(test.graph_data)
const data = ref({
datasets: [
{
label: 'Accel Profile 0.25 User',
borderColor: 'red',
backgroundColor: 'red',
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 5,
// tension: 0,
showLine: true,
fill: false,
data: [
{x: user_graph.x[0], y: user_graph.y[0]},
{x: user_graph.x[1], y: user_graph.y[1]},
{x: user_graph.x[2], y: user_graph.y[2]},
{x: user_graph.x[3], y: user_graph.y[3]}
]
}
]
})
here is the console output
✔ Vite server hmr 6 files in 54.932ms 13:56:25
object 13:56:25
[Vue warn]: Unhandled error during execution of setup function 13:56:25
at <App>
RefImpl { 13:56:25
__v_isShallow: false,
dep: undefined,
__v_isRef: true,
_rawValue: {
motormatch: {
'1': [Object],
'3': [Object],
'5': [Object],
'7': [Object],
'10': [Object]
},
stage_details: { DEFAULT: [Object] },
motioncalcs: {
'0.5': [Object],
'0.33': [Object],
'0.1': [Object],
'0.25 User': [Object]
},
graph_data: {
xlabel: 'Time (s)',
ylabel: 'Velocity (deg/s)',
title: 'Move Profiles',
profiles: [Array]
}
},
_value: {
motormatch: {
'1': [Object],
'3': [Object],
'5': [Object],
'7': [Object],
'10': [Object]
},
stage_details: { DEFAULT: [Object] },
motioncalcs: {
'0.5': [Object],
'0.33': [Object],
'0.1': [Object],
'0.25 User': [Object]
},
graph_data: {
xlabel: 'Time (s)',
ylabel: 'Velocity (deg/s)',
title: 'Move Profiles',
profiles: [Array]
}
}
}
undefined 13:56:25
test 13:56:25
object 13:56:25
undefined
Again the goal is to have the paramater passed to the graph be reactive based on the value of currentPokemon.graph_data. I have tried using let to declare new variables and access graph_data that way, which did allow me to get the value of graph_data but it was no longer reactive.
console.log(typeof(currentPokemon))
let res_data1 = currentPokemon.value
let graph_data1 = res_data1.graph_data
let user_graph = graph_data1.profiles[3]
console.log(user_graph)
addition note, in html {{ currentPokemon.graph_data }} works perfectly and is reactive...
Whenever you use ref or computed the way you access values template vs script differs, in script you must use the value key accessor, in template you omit it because in templates the value key accessor is injected at compilation run-time.
<script setup>
const myVar = ref([]) // Array
console.log(myVar.value.length) // Outputs 0
myVar.value.push('hello')
console.log(myVar.value.length) // Outputs 1
const count = computed(() => myvar.value.length)
myVar.value.push('world')
console.log(count.value) // Outputs 2
</script>
<template>
<div>Total Items: {{ myVar.length }}</div>
<div>Counter: {{ count.length }}</div>
</template>
However it is not the same case when working with nested reactive reference objects which is what you want to use if you are altering inner values of a nested object where you want to react to those nested alterations:
<script setup>
const myObject = reference({
myData: [] // Array
})
console.log(myObject.myData.length) // Outputs 0
myObject.myData.push('hello')
console.log(myObject.myData.length) // Outputs 1
</script>
<template>
<div>Total Items: {{ myObject.myData.length }}</div>
</template>
Not sure if this is the best way to do this... I tried using reactive and a few other methods but this finally worked for me
/ Data pased to scatter plot
const data = computed({
get() {
let res_data1 = currentPokemon.value
let user_graph = res_data1.graph_data.profiles[3]
let dataset = {datasets: [
{label: 'Accel Profile 0.5',
fill: false,
borderColor: 'blue',
backgroundColor: 'blue',
borderWidth: 1,
// pointBackgroundColor: ['#000', '#00bcd6', '#d300d6'],
// pointBorderColor: ['#000', '#00bcd6', '#d300d6'],
pointRadius: 0,
pointHoverRadius: 5,
fill: false,
// tension: 0,
showLine: true,
data: [
{x: 0, y: 0},
{x: 0.5, y: 2},
{x: 0.5, y: 2},
{x: 1, y: 0}]},
{label: 'Accel Profile 0.33',
fill: false,
borderColor: 'orange',
backgroundColor: 'orange',
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 5,
// tension: 0,
showLine: true,
data: [
{x: 0, y: 0},
{x: 0.33, y: 1.49},
{x: 0.66, y: 1.49},
{x: 1, y: 0}]
},
{
label: 'Accel Profile 0.1',
borderColor: 'green',
backgroundColor: 'green',
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 5,
// tension: 0,
showLine: true,
fill: false,
data: [
{x: 0, y: 0},
{x: 0.1, y: 1.11},
{x: 0.9, y: 1.11},
{x: 1, y: 0}]
},
{
label: 'Accel Profile 0.25 User',
borderColor: 'red',
backgroundColor: 'red',
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 5,
// tension: 0,
showLine: true,
fill: false,
data: [
{x: user_graph.x[0], y: user_graph.y[0]},
{x: user_graph.x[1], y: user_graph.y[1]},
{x: user_graph.x[2], y: user_graph.y[2]},
{x: user_graph.x[3], y: user_graph.y[3]}
]
}
]}
return dataset
},
// setter
set(newValue) {
// Note: we are using destructuring assignment syntax here.
[firstName.value, lastName.value] = newValue.split(' ')
}
})

How to align solid gauge using Highcharts to the size of parent div

I have created a Solid Gauge chart using Highcharts. Now, I want to fit the chart inside a grid div which takes size of 300px or auto. When I try to put the code inside the div, it takes a lot of white space up and down of the chart.I tried to inspect it and it is showing that the SVG image is taking most of the space. I don't understand how to make the chart fit in the div.I am new to HighCharts, any help would be appreciated.
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="container" style="height: 300px;">
</div>
$(function() {
var rawData = 100,
data = getData(rawData);
function getData(rawData) {
var data = [],
start = Math.round(Math.floor(rawData / 10) * 10);
data.push(rawData);
for (i = start; i > 0; i -= 1) {
data.push({
y: i
});
}
return data;
}
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
marginTop: 0
},
title: {
text: ''
},
subtitle: {
text: rawData,
style: {
'font-size': '60px'
},
y: 200,
},
tooltip: {
enabled: false
},
pane: [{
startAngle: -90,
endAngle: 90,
background: [{ // Track for Move
outerRadius: '100%',
innerRadius: '70%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.1).get(),
borderWidth: 0,
shape: 'arc'
}],
size: '100%',
center: ['50%', '65%']
}, {
startAngle: -180,
endAngle: 180,
size: '95%',
center: ['50%', '65%'],
background: []
}],
yAxis: [{
min: 0,
max: 100,
lineWidth: 0,
lineColor: 'white',
tickInterval: 0,
labels: {
enabled: true
},
minorTickWidth: 0,
tickLength: 0,
tickWidth: 0,
tickColor: 'white',
zIndex: 0,
stops: [
[0, '#fff'],
[0.1, '#0f0'],
[0.2, '#2d0'],
[0.3, '#4b0'],
[0.4, '#690'],
[0.5, '#870'],
[0.6, '#a50'],
[0.7, '#c30'],
[0.8, '#e10'],
[0.9, '#f03'],
[1, '#f06']
]
}, {
linkedTo: 0,
pane: 0,
lineWidth: 10,
lineColor: 'white',
tickPositions: [],
zIndex: 6
}],
series: [{
animation: false,
dataLabels: {
enabled: false
},
borderWidth: 0,
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '70%',
data: data
}]
});
});
Currently the image is coming this way.
http://jsfiddle.net/dt4wu39e/1/

How to make hover effect for two bar in highcharts at the same time is there any way by using css or any inbuilt method to achieve this?

I'm trying to create a hover effect for two bar at the same time, is there any possibility to achieve this by using any existing method or external css to achieve this kind of hover effect, on hover event present in highcharts I can only change the colour of the single bar image.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/highstock/6.0.3/highstock.src.js"></script>
<script src="http://code.highcharts.com/modules/xrange.js"></script>
<div id="container" style="width: 100%; height: 100px"></div>
Highcharts
Highcharts.setOptions({
time: {
useUTC: false
}
});
Highcharts.chart('container',{
chart:{
type : 'xrange',
backgroundColor : '0C0D19',
renderTo:'container',
marginRight: 100,
},
colors : ['#45AD59','#6699FF'],
title : { text : '' },
credits : { enabled : false },
legend : { enabled : false },
exporting : {
buttons : {
contextButton : {
enabled : false
}
}
},
plotOptions : {
series : {
cursor : 'pointer',
}
},
tooltip : { enabled: false },
xAxis : {
type : 'datetime',
opposite : true,
startOnTick: true,
endOnTick: true,
showLastLabel: true,
tickLength: 0,
tickInterval:3600*1000,
gridLineColor:'#2c2d39',
gridLineWidth:1,
min : 1545281770000,
minPadding: 0,
dateTimeLabelFormats : {
millisecond: '%I:%M %P',
second: '%I:%M %P',
minute: '%I:%M %P',
hour: '%I:%M %P',
day: '%I:%M %P',
week: '%I:%M %P',
month: '%I:%M %P',
year: '%I:%M %P'
},
crosshair : {
snap : false,
zIndex : 100,
label: {
enabled: true,
format: '{value:%I:%M %P}'
}
},
labels : {
align : 'left',
style : {
color : 'rgba(255, 255, 255, 0.7)',
fontSize : '12px'
}
},
},
yAxis: {
title: {
text: ''
},
plotBands: [{
from: -0.21001,
to: 0.3291,
color: '#00401f'
},{
from:0.5570,
to:1.275,
color:'#2f4776'
}],
categories: ['Reported','Tracked'],
reversed: true,
labels:{
align:'center',
style:{
color:'rgba(255, 255, 255, 0.7)',
fontSize:'12px'
},
formatter: function() {
return this.value + '<img></img>';
},
useHTML: true
},
lineColor: '#2c2d39',
lineWidth: 1
},
series: [{
pointWidth: 20,
borderWidth:0,
borderRadius:0,
data : [{
"x": 1545281770000,
"x2": 1545284950000,
"y": 1,
"floor": 3,
"room": "3001",
"value": true,
"hoverId": 0
}, {
"x": 1545285388000,
"x2": 1545291448000,
"y": 1,
"floor": 3,
"room": "3001",
"value": true,
"hoverId": 1,
}, {
"x": 1545303407000,
"x2": 1545312167000,
"y": 1,
"floor": 2,
"room": "2001",
"value": true,
"hoverId": 2,
}, {
"x": 1545312218000,
"x2": 1545312338000,
"y": 1,
"floor": 3,
"room": "3000",
"value": true,
"hoverId": 3,
}, {
"x": 1545314138000,
"x2": 1545314738000,
"y": 1,
"floor": 2,
"room": "2001",
"value": true,
"hoverId": 4,
}
,{
x:1545281701745,
x2:1545285267354,
y:0,
},
{
x:1545285327157,
x2:1545292261051,
y:0,
},{
x:1545303345999,
x2:1545314757609,
y:0,
className:'manual',
}
],
dataLabels: {
enabled: false
}
}]
})
CSS
#container .highcharts-grid.highcharts-yaxis-grid path{
display: none;
}
#container .highcharts-axis.highcharts-xaxis path{
display: none;
}
#container .highcharts-point.highcharts-point.highcharts-color-0 rect{
height: 15px;
y: 8;
}
#container .highcharts-point.highcharts-point.highcharts-color-1 rect{
y: 27;
height: 18px;
}
Here is a JSFiddle
You can make it using Highcharts.SVGRenderer which allows you to plot a rectangle and Highcharts.SVGElement.on method which allows you to add events on SVG elements (for example series group). Check demo and code posted below.
Code:
chart: {
type: 'xrange',
backgroundColor: '0C0D19',
renderTo: 'container',
marginRight: 100,
events: {
load: function() {
var chart = this,
series = chart.series[0],
seriesSvg = series.group,
seriesSvgBBox = seriesSvg.getBBox(),
width = 80,
height = seriesSvgBBox.height,
y = chart.plotTop + seriesSvgBBox.y,
x,
tooltip;
seriesSvg.on('mousemove', function(e) {
if (tooltip) {
tooltip.destroy();
}
x = e.offsetX - width / 2
tooltip = chart.renderer
.rect(x, y, width, height)
.attr({
fill: 'rgba(255, 255, 255, 0.2)'
})
.css({
'pointer-events': 'none'
})
.add()
.toFront();
});
seriesSvg.on('mouseout', function(e) {
tooltip.destroy();
tooltip = null;
});
}
}
}
Demo:
http://jsfiddle.net/BlackLabel/z2h59pLf/2/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
https://api.highcharts.com/class-reference/Highcharts.SVGElement#on

How to achieve this graph with highcharts

How could I achieve the chart below as accurate as possible?
I'm trying to achieve the chart in the picture below with highcharts, the problem I have is that I can't achieve the gradients and the purple cut-line
this is what I have donde so far : jsFiddle
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
options: {
title: {
text: "Historical report"
},
heigth: 200
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
plotBands: [
{
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}
]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [
{
name: 'John',
data: [3, 9, null, 5, 4, 10, 12],
lineColor: "#5A66AF"
}, {
name: 'Jane',
data: [1, 10, null, 3, 3, 5, 4],
lineColor: '#47a06b'
}, {
name: 'Roberto',
data: [10, 15, null, 15, 9, 9, 4],
lineColor: '#2ba9db'
}
]
});
});
The line is achieved by the DashStyle property:
http://api.highcharts.com/highcharts#plotOptions.line.dashStyle
The gradient fill is a matter of defining the gradient stops in the fillColor property:
http://api.highcharts.com/highcharts#plotOptions.area.fillColor
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/area-fillcolor-gradient/
(though, FWIW, that extreme white end to the gradient is reeeeally distracting...)

highcharts solid gauge: bigger tick marks

I am making a solid gauge with highcharts. I am trying to make the ticks long enough to span both data series. The goal is for a white line to cut through the colored bands at 10, 6, 2.9, and 0%. Notice how at 2.9%, the tick doesn't go all the way through (even though the length is set to 100).
I have tried yAxis.tickLength to make the ticks longer, to no avail. I also tried yAxis.tickPosition: 'inside'. That doesn't solve it either. Here is my JSFiddle.
http://jsfiddle.net/ncernek/wy6bo63p/2/
Thank you for your help.
If you add dummy second pane and yAxis, then ticks will be both inside and outside - because in fact there will be 2 ticks looking like one.
Example: http://jsfiddle.net/Lcz6juea/
And if I get wrong index of ticks (over series) then you could use this code without zIndex set for axes: http://jsfiddle.net/Lcz6juea/1/
$(function() {
// Uncomment to style it like Apple Watch
/*
if (!Highcharts.theme) {
Highcharts.setOptions({
chart: {
backgroundColor: 'black'
},
colors: ['#F62366', '#9DFF02', '#0CCDD6'],
title: {
style: {
color: 'silver'
}
},
tooltip: {
style: {
color: 'silver'
}
}
});
}
// */
Highcharts.setOptions({
chart: {
backgroundColor: 'white'
},
colors: ['#FE670A', '#0277a0', 'white']
});
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
marginTop: 50
},
title: {
text: 'Discepant Reads',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold; text-align: center">{point.y}%</span>',
positioner: function(labelWidth, labelHeight) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: [{
startAngle: -140,
endAngle: 140,
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0,
shape: 'arc'
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
borderWidth: 0,
shape: 'arc'
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
borderWidth: 0,
shape: 'arc'
}]
}, {
startAngle: -140,
endAngle: 140,
size: '95%',
background: []
}],
yAxis: [{
reversed: true,
min: 0,
max: 10,
lineWidth: 0,
tickLength: 100,
tickWidth: 4,
tickColor: 'white',
tickPosition: 'outside',
minorTickLength: 0,
tickPositions: [0, 2.9, 6, 10],
zIndex: 4,
labels: {
distance: 30,
enabled: true,
x: 0,
y: 0,
format: '{value} %',
style: {
fontSize: 16
}
}
}, {
pane: 1,
linkedTo: 0,
reversed: true,
min: 0,
max: 10,
lineWidth: 0,
tickLength: 100,
tickWidth: 4,
tickColor: 'white',
tickPosition: 'inside',
minorTickLength: 0,
tickPositions: [0, 2.9, 6, 10],
zIndex: 4,
labels: {
enabled: false
}
}],
plotOptions: {
solidgauge: {
borderWidth: '34px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: [{
name: 'Your Score',
borderColor: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: 4
}],
dataLabels: {
borderRadius: 0,
backgroundColor: "#fff",
borderWidth: 0,
borderColor: "#FFF",
style: {
fontSize: "50px"
},
color: "grey",
crop: true,
formatter: function() {
var s;
s = '<span style="font-size: 50px;">' + this.point.y + '</span>';
return s;
},
y: -30,
zIndex: 90
}
}, {
name: 'Department Average',
borderColor: Highcharts.getOptions().colors[1],
data: [{
color: Highcharts.getOptions().colors[1],
radius: '75%',
innerRadius: '75%',
y: 6
}]
}, {
name: '',
borderColor: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="container" style="width: 400px; height: 400px; margin: 0 auto">
</div>
Using JavaScript
Highcharts.wrap(Highcharts.Tick.prototype, 'getMarkPath', function (prev, x, y, tickLength, tickWidth, horiz, renderer) {
return renderer.rect(x, y, 2, 80, 0)
.attr({
'stroke-width': 2,
stroke: 'white',
zIndex: 4,
style: 'transform: rotateZ(45deg) translateY(-290px)'
}).add();
});
You'd have to figure out a way to override each tick, but it's doable.
--
Using CSS
The (almost) pure CSS way is to target the exact SVG path and apply a transform to it. By no means is this way ideal, but it does provide a way to get the job done.
.highcharts-axis path:nth-child(2) {
transform: scale3d(1.6, 1, 1) rotateY(-59.7deg) translate(0, 25px);
stroke-width: 2;
}
.highcharts-axis path:nth-child(3) {
transform: scale3d(3.9, 1, 1) rotateY(-70deg) translate(0, 56px);
stroke-width: 2;
}
You would also have to adjust the zIndex attribute of the yAxis so that the redrawn ticks are on top of the other paths:
yAxis: {
...
zIndex: 4
}

Resources