I am using https://github.com/ankane/vue-chartkick to draw Vue charts, but looks like it didn't say how to hide axis from there document.
Does anyone know how to do it in this library?
Thanks in advance.
The chart component has a library property that allows you to customize the options for the chart. To hide / remove the x-axis for a line chart would look like this:
<line-chart :data="lineData" :library="chartOptions">
...and in your component...
data () {
return {
lineData: [
{name: 'Line A', data: {'1': 3, '2': 4, '3': 2, '4': 1}},
{name: 'Line B', data: {'1': 2, '2': 3, '3': 4, '4': 1}}
],
chartOptions: {
layout: {
padding: {left: 10, right: 5, top: 5, bottom: 2}
},
scales: {
xAxes: [{
display: false // this hides the x-axis
}]
}
}
}
}
Because you're hiding the x-axis you'll probably want to adjust the layout padding (shown above).
You could also manipulate the xAxes' ticks property for the callback to return null, but this can still leave too much space.
Related
I'm plotting a HighCharts heatmap of a wafer with around 50~70k points (it's like a CPU/processor silicon wafer). I need to put horizontal and vertical gridlines visible on the map, so that our engineers can easily figure out what's going on with the actual unit.
I have two concerns:
Horizontal gridlines are already OK, but the vertical gridlines are not drawn or visible. I thought, I just need to set gridZIndex=4. Kindly see image below - it should be drawn based on xAxis.tickPositions values (similar to yAxis)
I put some color options I found, but none of them could change the grid's color.
So far this is my code:
var option = {
chart: {
type: 'heatmap',
zoomType: 'xy',
},
boost: {
useGPUTranslations: true
},
title: {
text: chrt_title,
align: 'left',
x: 0,
style: {
fontSize: '12px',
}
},
exporting: {
buttons: {
contextButton: {
menuItems: [
'viewFullscreen', 'downloadPNG', 'downloadXLS'
]
}
},
enable: true,
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false,
},
tickPositions: [1, 19, 43, 67, 91, 115, 139, 163, 183],
gridZIndex: 4, // DOESN'T WORK
gridLineDashStyle: 'Dash',
gridLineWidth: 1, // DOESN'T WORK
lineColor: 'red',
minorTickColor: 'red',
tickColor: 'red'
},
yAxis: {
title: {
text: null
},
reversed: true,
labels: {
enabled: false,
},
tickPositions: [1, 82, 116, 174, 272, 370, 428, 462, 544]
gridZIndex: 4, // ONLY PUT THIS AND WORKS ALREADY
gridLineDashStyle: 'Dash', // THIS WORKS TOO (Dot,Solid,etc)
lineColor: 'red',
minorTickColor: 'red',
tickColor: 'red'
},
colorAxis: {
stops: colrstops,
min: minval,
max: maxval,
startOnTick: true,
endOnTick: true,
labels: {
format: '{value}',
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
},
series: [{
boostThreshold: 100,
borderWidth: 0,
nullColor: '#ffffff',
tooltip: {
headerFormat: chrt_title + '<br/>',
pointFormat: 'RB{point.y} SL{point.x} <b>{point.value}</b>'
},
turboThreshold: Number.MAX_VALUE, // #3404, remove after 4.0.5 release
data: data
}]
}
As you can see, both xAxis and yAxis have gridZIndex = 4, gridLineDashStyle = 'Dash', but only the yAxis that gives the horizontal gridlines, no luck for xAxis (assuming this is where need to set the vertical gridlines) :(
the only similar question i found reg vertical gridlines is this one:
Highcharts: xAxis with vertical gridlines
but I tried to put the gridLineWidth=1, still nothin's happening T-T please help. thanks very much.
Update:
I temporarily replaced my option{} based on #ppotaczek sample but vertical gridlines still did not appeared.
Then I played with my own option{}, tried to add min and max in xAxis, and tried to temporarily removed my dynamic data and use #ppotaczek sample, the layout remains the same (no vertical gridlines)..
Also thought it has something to do with the version i'm using..? it's 9.0.1 - so I tried to update to latest 9.1.1, but also have same result.
var option = {
chart: {
type: 'heatmap',
},
xAxis: {
tickPositions: [1, 19, 43, 67, 91, 115, 139, 163, 183],
min: 1,
max: 183,
gridZIndex: 4, // DOESN'T WORK
gridLineDashStyle: 'Dash',
gridLineWidth: 1, // DOESN'T WORK
lineColor: 'red',
minorTickColor: 'red',
tickColor: 'red'
},
yAxis: {
title: {
text: null
},
reversed: true,
labels: {
enabled: false,
},
tickPositions: [1, 82, 116, 174, 272, 370, 428, 462, 544],
gridLineDashStyle: 'Dash', // THIS WORKS TOO (Dot,Solid,etc)
lineColor: 'red',
minorTickColor: 'red',
tickColor: 'red',
},
colorAxis: {},
series: [{
data: [
[10, 0, 1],
[20, 1, 5],
[30, 1, 5],
],
}]
}
I am using highchart. I want to display the maximum value and value label at the bottom of the pie chart.please see the attached screenshot. if the maximum value is equal display both value and that label.
this.pieChart.push(
{
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: 'Question Title'
},
subtitle: {
text: ''
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45,
dataLabels: {
enabled: true,
format: '<b></b><br>{point.percentage:.1f} %',
distance: -50,
filter: {
property: 'percentage',
operator: '>',
value: 4
}
}
}
},
series: [{
name: 'Answer Selected',
data: [
['1st Que ans - 1', 3],
['1st Que ans - 2', 2],
['1st Que ans - 3', 1],
['1st Que ans - 4', 2]
]
}]
})
Here is an example of how to render a custom label base on the included data and using the render callback. The instruction what is happening is in the code. If something is unclear - feel free to ask.
Demo: https://jsfiddle.net/BlackLabel/euLyc49j/
events: {
render() {
let chart = this,
max = Math.max(...chart.series[0].processedYData);
chart.series[0].points.forEach(p => {
if (p.y === max) {
if (p.customLabel) {
p.customLabel.destroy();
}
//render label in the (0, 0)
p.customLabel = chart.renderer.label(p.name + ' - ' + p.y , 0, 0)
.css({
color: '#FFFFFF'
})
.attr({
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 5,
zIndex: 6
})
.add();
// position label in the bottom center
p.customLabel.translate(chart.plotWidth / 2 - p.customLabel.getBBox().width / 2, chart.plotSizeY + chart.plotTop)
}
})
}
}
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
API: https://api.highcharts.com/highcharts/chart.events.render
I'm trying to place point over boxplot, however my attempt results in the point placed next to the boxplot:
data: [
{
x: [1, 2, 3, 4, 4, 4, 8, 9, 10],
type: "box",
name: "Set 1"
},
{
x: [5],
name: 'My special marker',
text: 'Some really interesting hover info',
marker: {
size: 5
}
},
],
layout: {
title: 'Revenues',
font:{
size:10
},
margin: {
l: 0,
r: 0,
b: 15,
t: 25,
pad: 0
},
height: 90,
dragmode: "pan"
},
Is it possible to place that point over boxplot using vue-plotly library?
Here I recreted the issue:
https://codesandbox.io/s/vue-plotly-delsw?file=/src/App.vue
EDIT:
For the desired result I need that addiotional point to be on top of the chart like this:
One solution is to set the size of the point's marker and the width of the bar such that they overlap each other. For example:
data: [
{
x: [1, 2, 3, 4, 4, 4, 8, 9, 10],
type: "box",
name: "Set 1",
width: 30,
},
{
x: [5],
name: "My special marker",
text: "Some really interesting hover info",
marker: {
size: 30
}
}
],
I previously used the label formatter to customise the Y-Axis labels in a chart, but I'm not sure how to do this using highcharts-vue because of scope.
See the following pseudo code;
export default {
data () {
return {
currencySymbol: '$',
title: 'My Chart',
points: [10, 0, 8, 2, 6, 4, 5, 5],
chartType: 'Spline',
chartOptions: {
chart: {
type: 'spline'
},
title: {
text: 'Sin chart'
},
yAxis: {
gridLineDashStyle: 'Dot',
labels: {
style: {
color: '#fff'
},
formatter: function () {
return this.currencySymbol + this.axis.defaultLabelFormatter.call(this)
}
},
series: [{
data: [10, 0, 8, 2, 6, 4, 5, 5],
color: '#6fcd98'
}]
}
}
}
In the full app, the currencySymbol property is updated in the response of an AJAX call.
Is there an elegant way of achieving this?
The most recommended way would be to use Computed Properties, JS Arrow function, and call Highcharts.Axis.prototype.defaultLabelFormatter.
First of all we need to move a whole chart configuration inside of a computed property, e.g called chartOptions. Then we just need to refactor the formatter function a bit, so that it would be arrow function, and create the variable with symbol defined in component data (!important). After that, the this keyword will indicate on the component object, and refer the symbol direcly by calling the variable created on the top of the function. I prepared the example, so please take a lok on it.
Live example: https://codesandbox.io/s/highcharts-vue-demo-icuzw
Code:
data() {
return {
currencySymbol: "$",
title: "My Chart",
points: [10, 0, 8, 2, 6, 4, 5, 5],
chartType: "Spline"
};
},
computed: {
chartOptions() {
var symbol = this.currencySymbol;
return {
chart: {
type: "spline"
},
title: {
text: "Sin chart"
},
yAxis: {
gridLineDashStyle: "Dot",
labels: {
style: {
color: "#000"
},
formatter: label => {
return (
symbol + Highcharts.Axis.prototype.defaultLabelFormatter.call(label)
);
}
}
},
series: [
{
data: [10, 0, 8, 2, 6, 4, 5, 5],
color: "#6fcd98"
}
]
};
}
}
Kind regards!
I have a radar chart with 4 radar series, i want to use renderer function for each type.
My sample code is :
series: [{
type: 'radar',
xField: 'name',
yField: 'data3',
renderer: function(storeItem, item, i, display){
alert(storeItem)
},
showInLegend: true,
showMarkers : false,
markerConfig: {
radius: 5,
size: 5
},
style: {
'stroke-width': 2,
stroke : '#FFF',
fill: 'none'
}
},{
type: 'radar',
xField: 'name',
yField: 'data2',
showMarkers: true,
showInLegend: true,
markerConfig: {
radius: 5,
size: 5
},
style: {
'stroke-width': 2,
stroke : '#FF0',
fill: 'none'
}
},{
type: 'radar',
xField: 'name',
yField: 'data5',
showMarkers: true,
showInLegend: true,
markerConfig: {
radius: 5,
size: 5
},
style: {
'stroke-width': 2,
stroke : '#0FF',
fill: 'none'
}
}]
where to add renderere function? I tried adding in all possible ways but its not working.
Am i doing any mistake? or the function is not there for radar chart?
pls some one let me know
Im using extjs4.1.0
When in doubt, grep the source.
The renderer function is never called in a radar chart. Looks like another documentation bug. The label.renderer function gets called but it's only good for formatting the display text.