I've tried everything I can. If anyone can help me out, it'll be great. I want the numbers on the graphs and the legend gone
Legend and data-labels can be disabled by
const options = {
dataLabels: {
enabled: false
},
legend: {
show: false
}
}
EDIT
If you want to remove all the additional graphics, try using sparkline which will only keep the chart and hide everything.
sparkline: {
enabled: true
}
Related
I have multiple lines to be displayed. When I load stock chart for the first time, navigator and scroll window's behavior is okay.
DEMO : https://stackblitz.com/edit/js-a8exhr?file=index.js
But when I press 1m, 1d, 1h etc options, it starts misbehaving and doesn't draw two lines in navigator.
Currently my settings are,
series: seriesOptions,
navigator: {
series: [
{
data: seriesOptions[0].data,
},
]
I tried with,
series: seriesOptions,
navigator: {
series: seriesOptions
]
but it is misbehaving.
I want it to behave like this : https://www.highcharts.com/demo/stock/compare
NOTE: I'm using lazy loading feature when I click on 1d, 1m etc options.
Options for navigator and series from the chartOptions.js file are lost because of merging. You can disable dataGrouping in plotOptions and move navigator config to one place.
plotOptions: {
series: {
showInNavigator: true,
dataGrouping: {
enabled: false
}
}
}
Live demo: https://stackblitz.com/edit/js-jjbgne?file=chartOptions.js,index.js
How to disable just the click effect on the billboard.js Donut Chart?
I tried different variants, but nothing works.
After some variations, I found the solution. This worked for me on billboard.js Donut Chart (v 3.0.3)
legend: {
item: {
onclick: function(id) {
false;
},
},
},
I used the reference from here https://naver.github.io/billboard.js/release/latest/doc/Options.html#.legend
enter image description here
Trying to use Quill in my project. I'm using Bootstrap class 'row' with two columns. Right hand side column has Quill, everything works fine except this equation box (see in the image). Can anybody help?
I solved this using bounds. Here is the code snippet:
let quill = new Quill('#editor-container', {
modules: {
formula: true,
syntax: true,
toolbar: '#toolbarOptions'
},
placeholder: 'Compose your question here...',
theme: 'snow',
bounds: '#editor-container'
});
I'm using react-chart-js-2 and I want to add units to the y-axis. There doesn't seem to be much documentation about the full range of options and the tutorials I found don't seem to be working. I want to add a £ sign to every value on the y axis of my line chart? I should just be able to use a callback function and add £ to the value string?
const options = {
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Years'
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
callback: value => `£${formatNumberDecimal(value)}`
}
}],
}
}
This doesn't work, and when I dynamically change the input data, it crashes. How do I change the units?
I hope it's not too late!
I don't know much about chart.js api, but i think you can't use ES6 arrow functions inside that callback, try with something like:
callback: function (value) {
return `£${value}k`;
},
Here is a working codesandbox example.
Labels on the pie chart are fine to me.
Labels outside of the pie chart are not, I would like to make these disappear since on Iphone or a screen that size, labels pop out of the pie chart and are out of the screen most of the time.
I did not find anything in Sencha Architect that allowed me to overide this mechanism for labels. Would someone have an idea?
You have to extend Ext.chart.series.sprite.PieSlice and override the method sliceContainsLabel:
Ext.define('yourNamespase.CustomPieSlice', {
alias: 'sprite.custompieslice',
extend: 'Ext.chart.series.sprite.PieSlice',
inheritableStatics: {
def: {
defaults: {
doCallout: false,
rotateLabels: false,
label: '',
labelOverflowPadding: 10,
renderer: null
}
}
},
sliceContainsLabel: function () {
return 1;
}
});
And so the labels will be always inside the pie chart.