Assuming I have this kind of data for my pie chart and I'm gonna use GlobeGitter's Chartist Plugin Tooltip
var data = {
labels: ['ra','rb','rc','rd','re','rf'],
series: [5, 3, 4, 1, 6, 4]
};
How can I add the value of labels in my tooltip? Sample text of tooltip
ra : 5
Add the script and css to your head
<link rel="stylesheet" type="text/css" href="/css/chartist-plugin-tooltip.css" />
<script type="text/javascript" src="/js/chartist-plugin-pointlabels.js" /></script>
Then add the plugin into your options like this:
new Chartist.Bar('#ct_chart', {
labels: ['ra','rb','rc','rd','re','rf'],
series: [5, 3, 4, 1, 6, 4]
}, {
plugins: [
Chartist.plugins.tooltip()
]
});
var data = {
labels: ['ra', 'rb', 'rc', 'rd', 're', 'rf'],
series: [[
{ meta: 'ra', value: 5 },
{ meta: 'rb', value: 3 },
{ meta: 'rc', value: 4 },
{ meta: 'rd', value: 1 },
{ meta: 're', value: 6 },
{ meta: 'rf', value: 4 },
]], {
plugins: [
Chartist.plugins.tooltip()
]
}
};
Think that 'GlobeGitter's Chartist Plugin Tooltip' is not compatible with pie charts, but you can use 'tooltipster' here is an example
Visit jsbin.com/xojezu/edit?html,js,output
Related
I have a v-treeview component (Vuetify 2.6.7)
<v-treeview
class="location-tree"
v-model="location_tree"
ref="location_tree"
:search="location_search"
selectable
dense=true
open-on-click=true
expand-icon="$plus"
selected-color="success"
:items="locations"
selection-type="all"
transition=true
#input="location_tree_update"
></v-treeview>
How can I uncheck all checkboxes with a some button click?
you just need to empty the array you passed to v-model on a button click like location_tree.splice(0) or location_tree = [].
check the example below:
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
selection: [],
items: [{
id: 1,
name: 'Applications :',
children: [{
id: 2,
name: 'Calendar : app'
},
{
id: 3,
name: 'Chrome : app'
},
{
id: 4,
name: 'Webstorm : app'
},
],
},
{
id: 5,
name: 'Documents :',
children: [{
id: 6,
name: 'vuetify :',
children: [{
id: 7,
name: 'src :',
children: [{
id: 8,
name: 'index : ts'
},
{
id: 9,
name: 'bootstrap : ts'
},
],
}, ],
},
{
id: 10,
name: 'material2 :',
children: [{
id: 11,
name: 'src :',
children: [{
id: 12,
name: 'v-btn : ts'
},
{
id: 13,
name: 'v-card : ts'
},
{
id: 14,
name: 'v-window : ts'
},
],
}, ],
},
],
},
{
id: 15,
name: 'Downloads :',
children: [{
id: 16,
name: 'October : pdf'
},
{
id: 17,
name: 'November : pdf'
},
{
id: 18,
name: 'Tutorial : html'
},
],
},
{
id: 19,
name: 'Videos :',
children: [{
id: 20,
name: 'Tutorials :',
children: [{
id: 21,
name: 'Basic layouts : mp4'
},
{
id: 22,
name: 'Advanced techniques : mp4'
},
{
id: 23,
name: 'All about app : dir'
},
],
},
{
id: 24,
name: 'Intro : mov'
},
{
id: 25,
name: 'Conference introduction : avi'
},
],
},
],
}),
});
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-container>
<v-btn color="primary" #click="selection.splice(0)">clear selection</v-btn>
<v-treeview v-model="selection" selectable :items="items"></v-treeview>
</v-container>
</v-app>
</div>
I am facing problem in inserting a newline character in xAxes labels with chart Js.
Below is the sample code used for formatting xAxes labels
"scales": {
"xAxes": [{
"type" : 'time',
"display": true,
time: {
unit: 'millisecond',
stepSize: 5,
displayFormats: {
millisecond: 'HH:mm - YYYY/MM/DD'
}
}
}]
}
With the above code, the xAxes labels looks like 13:10 - 2022/02/01.
But, I want to be like below:
For multiline labels you will need to proide an array for the label in which each entry is its own line. This can be achieved with the tick callback:
function newDate(milis) {
return moment().add(milis, 'ms');
}
var config = {
type: 'line',
data: {
labels: [newDate(-4), newDate(-3), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)],
datasets: [{
label: "My First dataset",
data: [1, 3, 4, 2, 1, 4, 2],
}]
},
options: {
scales: {
xAxes: [{
ticks: {
callback: (tick) => (tick.split('-'))
},
type: 'time',
time: {
unit: 'millisecond',
stepSize: 5,
displayFormats: {
millisecond: 'HH:mm - YYYY/MM/DD'
}
}
}],
},
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>
I have an eChart grid layout with 4 stacked bar charts and cannot figure out how to assign datazoom (nor have I found any examples of this online).
When I place the datazoom before the series, I DO get a zoom controller but only on one of the charts...
dataZoom: [{type: 'inside', start: 50, end: 100},
{start: 50, end: 100 }
}],
series: [{type: 'scatter'...
I won't post code for now (it's large) in hopes that someone can just tell me where to put the datazoom node.
I have no idea why you charts not working. Without example and with complex data you need to call fortune-teller only. In general datazoom can be easily attached to series.
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: [{
type: 'category',
gridIndex: 0
},
{
type: 'category',
gridIndex: 1
}
],
yAxis: [{
gridIndex: 0
},
{
gridIndex: 1
}
],
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
]
},
grid: [{
bottom: '55%'
},
{
top: '55%'
}
],
series: [{
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
encode: {
x: 'product',
y: '2012'
}
}, {
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
encode: {
x: 'product',
y: '2013'
}
}, {
type: 'bar',
stack: 'st1',
encode: {
x: 'product',
y: '2014'
}
}, {
type: 'bar',
stack: 'st1',
encode: {
x: 'product',
y: '2015'
}
}],
dataZoom: [{
type: 'slider',
show: true,
xAxisIndex: [0, 1],
start: 1,
end: 70
},
{
type: 'inside',
xAxisIndex: [0, 1],
start: 1,
end: 35
},
],
};
myChart.setOption(option);
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts#4.9.0/dist/echarts.min.js"></script>
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'm facing this error when I'm trying to add highchart in extjs panel:
Uncaught TypeError: Cannot read property 'chart' of undefined in highchart.js
testing.js
var chartObject = new Chart.ux.HighChart({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
error on highchart.js:275
https://github.com/JoeKuan/Highcharts_ExtJs_4/blob/master/Chart/ux/HighChart.js
Define your chart configuration in chartConfig:
chartConfig : {
chart : {
// ...
},
title : {
text : '....',
x : -20 //center
},
subtitle : {
text : '....',
x : -20
},
xAxis : [{
//... and so on
Look at this example.
You can download highchart.zip file in this url http://www.highcharts.com/download
In this zip file no errors in highcharts.js.
EDIT:
You can also use files from http://code.highcharts.com