I am able to render a ZingChart chart inside a React Component, but not sure how to do it with the selection-tool module.
The documentation on ZingChart website (https://www.zingchart.com/docs/tutorials/features/selection) is not mentioning how to do it from a React Component.
My level of knowledge with React, ZingChart and frontend development is very limited.
Thank you
So what you need to do is get the config content and change it for the config of desired module. If you got a component from the usage section on zingchart-react github page your component should look like this:
class App extends Component {
constructor(props) {
super(props);
this.state = {
config: {
type: 'bar',
series: [{
values: [4,5,3,4,5,3,5,4,11]
}]
}
}
}
render() {
return (
<div >
<ZingChart data={this.state.config}/>
</div>
);
}
}If you look to the JavaScript section of your desired module you will find this:
var myConfig = {
"graphset":[
{
"background-color":"#ffffff",
"type":"bar",
"title": {
"text": "Multiple Selections"
},
"subtitle": {
"text":". Click To Clear Selection"
},
"legend":{
"toggle-action":"remove",
"align":"center",
"adjust-layout":false,
"borderWidth":0,
"verticalAlign":"bottom",
"fontColor":"#7d7d7d",
"font-size":10,
"marginRight":20,
"marginBottom":0,
"marginTop":0,
"marker":{
"type":"square"
},
},
"preview":{
"background-color":"#F5F7F3",
"border-width":0,
"height":29,
"preserve-zoom":false,
"mask":{
"backgroundColor":"white",
"alpha":0.8
},
"handle":{
"border-width":1
},
"y":"85%"
},
"scale-x":{
"zooming":true,
"zoom-to":[0,30],
"item":{
"font-size":10,
"font-color":"#7d7d7d"
},
"tick":{
"visible":false
},
"title":{
"text":"You can Make Multiple Selections And Click To Clear selection"
},
"minValue":1484782109655,
"step":"day",
"transform":{
"type":"date"
}
},
"scale-y":{
"zooming":false,
"values":"0:2.503:0.5006",
"guide":{
"line-style":"dotted"
},
"item":{
"font-size":10,
"font-color":"#7d7d7d"
},
"tick":{
"visible":false
},
"format":"%v%",
"decimals":1
},
"zoom":{
"active":false,
"preserve-zoom":true
},
"plotarea":{
"margin-top":"20",
"margin-left":"20",
"margin":"dynamic 50 105 dynamic"
},
"plot":{
"data-append-selection":true,
"mode":"normal",
"line-width":1,
"line-color":"#4d9900",
"background-color":"#1e88e5",
"marker":{
"size":3,
"background-color":"#ccccff #6666ff",
"border-width":1,
"border-color":"#4d9900"
},
"tooltip":{
"visible":true,
"text":"%kv<br>%vv"
},
"selection-mode":"multiple",
"selected-state":{
"background-color":"#ffa726",
"border-width":0
}
},
"series":[
{
"values":[0.8840000000000001,1.9060000000000001,1.35,1.189,0.984,0.619,0.468,0.28700000000000003,2.503,1.139,2.011,1.7389999999999999,0.5559999999999999,0.22899999999999998,0.218,0.761,0.58,1.171,0.8240000000000001,0.721,0.542,0.954,0.683,0.976,1.0290000000000001,0.28800000000000003,0.362,0.388,1.057,0.886,0.196,0.333,1.013,0.541,0.127,0.726,0.649,1.031,0.606,1.232,0.5459999999999999,0.8340000000000001,1.9869999999999999,0.257,0.62,0.571,0.194,0.315,0.45799999999999996,0.14300000000000002,0.126,0.252,0.588,1.419,0.259,0.724,0.295,0.344,0.455,0.27699999999999997,0.604,0.471,0.8200000000000001,0.504,0.209,0.33999999999999997,0.404,0.127,0.293,0.326,0.428,0.38999999999999996,0.562,0.14300000000000002,0.258,0.414,0.42100000000000004,0.6669999999999999,0.8290000000000001,1.369,0.261,1.15,0.644,0.519,0.44400000000000006,0.627,0.411,0.447,0.173,0.763,0.581,1.2710000000000001,0.9129999999999999,0.988,0.51,0.664,0.348,0.5559999999999999,0.28600000000000003,0.424,0.676,0.367,0.634,0.47600000000000003,0.512,0.33999999999999997,0.076,0.27799999999999997,0.291,0.402,0.199,0.21,0.261,0.178,0.315,0.6459999999999999,0.482,0.08499999999999999,0.068,0.40099999999999997,0.135,0.679,0.769,1.113,0.315,0.37,0.267,0.145,1.2309999999999999,0.126,0.217,1.0670000000000002,2.213,0.687,0.63,0.498,0.428,0.154,0.27299999999999996,0.161,0.28900000000000003,0.8130000000000001,0.406,0.553,0.584,0.73,0.347,0.194,0.439,0.28800000000000003,0.561,0.22499999999999998,1.2550000000000001,0.771,0.13,0.644,0.078,0.27899999999999997,0.35100000000000003,0.525,0.735,0.893,0.719,1.375,0.42500000000000004,0.27999999999999997,0.255,0.109,0.411,0.11,0.172,0.698],
"text":"Percentage Of Sales"
}
]
}
]
};
zingchart.bind('myChart', 'click', function(e) {
if (e.target === "none") {
zingchart.exec('myChart', 'clearselection');
}
});
// Load the selection-tool and render the chart once its loaded
zingchart.loadModules('selection-tool', function() {
zingchart.render({
id : 'myChart',
data : myConfig,
height: '100%',
width: '100%',
modules:'selection-tool'
});
});Now you just need to get the config and put inside your component, like this:
class App extends Component {
constructor(props) {
super(props);
this.state = {
config : {
"graphset":[
{
"background-color":"#ffffff",
"type":"bar",
"title": {
"text": "Multiple Selections"
},
"subtitle": {
"text":". Click To Clear Selection"
},
"legend":{
"toggle-action":"remove",
"align":"center",
"adjust-layout":false,
"borderWidth":0,
"verticalAlign":"bottom",
"fontColor":"#7d7d7d",
"font-size":10,
"marginRight":20,
"marginBottom":0,
"marginTop":0,
"marker":{
"type":"square"
},
},
"preview":{
"background-color":"#F5F7F3",
"border-width":0,
"height":29,
"preserve-zoom":false,
"mask":{
"backgroundColor":"white",
"alpha":0.8
},
"handle":{
"border-width":1
},
"y":"85%"
},
"scale-x":{
"zooming":true,
"zoom-to":[0,30],
"item":{
"font-size":10,
"font-color":"#7d7d7d"
},
"tick":{
"visible":false
},
"title":{
"text":"You can Make Multiple Selections And Click To Clear selection"
},
"minValue":1484782109655,
"step":"day",
"transform":{
"type":"date"
}
},
"scale-y":{
"zooming":false,
"values":"0:2.503:0.5006",
"guide":{
"line-style":"dotted"
},
"item":{
"font-size":10,
"font-color":"#7d7d7d"
},
"tick":{
"visible":false
},
"format":"%v%",
"decimals":1
},
"zoom":{
"active":false,
"preserve-zoom":true
},
"plotarea":{
"margin-top":"20",
"margin-left":"20",
"margin":"dynamic 50 105 dynamic"
},
"plot":{
"data-append-selection":true,
"mode":"normal",
"line-width":1,
"line-color":"#4d9900",
"background-color":"#1e88e5",
"marker":{
"size":3,
"background-color":"#ccccff #6666ff",
"border-width":1,
"border-color":"#4d9900"
},
"tooltip":{
"visible":true,
"text":"%kv<br>%vv"
},
"selection-mode":"multiple",
"selected-state":{
"background-color":"#ffa726",
"border-width":0
}
},
"series":[
{
"values":[0.8840000000000001,1.9060000000000001,1.35,1.189,0.984,0.619,0.468,0.28700000000000003,2.503,1.139,2.011,1.7389999999999999,0.5559999999999999,0.22899999999999998,0.218,0.761,0.58,1.171,0.8240000000000001,0.721,0.542,0.954,0.683,0.976,1.0290000000000001,0.28800000000000003,0.362,0.388,1.057,0.886,0.196,0.333,1.013,0.541,0.127,0.726,0.649,1.031,0.606,1.232,0.5459999999999999,0.8340000000000001,1.9869999999999999,0.257,0.62,0.571,0.194,0.315,0.45799999999999996,0.14300000000000002,0.126,0.252,0.588,1.419,0.259,0.724,0.295,0.344,0.455,0.27699999999999997,0.604,0.471,0.8200000000000001,0.504,0.209,0.33999999999999997,0.404,0.127,0.293,0.326,0.428,0.38999999999999996,0.562,0.14300000000000002,0.258,0.414,0.42100000000000004,0.6669999999999999,0.8290000000000001,1.369,0.261,1.15,0.644,0.519,0.44400000000000006,0.627,0.411,0.447,0.173,0.763,0.581,1.2710000000000001,0.9129999999999999,0.988,0.51,0.664,0.348,0.5559999999999999,0.28600000000000003,0.424,0.676,0.367,0.634,0.47600000000000003,0.512,0.33999999999999997,0.076,0.27799999999999997,0.291,0.402,0.199,0.21,0.261,0.178,0.315,0.6459999999999999,0.482,0.08499999999999999,0.068,0.40099999999999997,0.135,0.679,0.769,1.113,0.315,0.37,0.267,0.145,1.2309999999999999,0.126,0.217,1.0670000000000002,2.213,0.687,0.63,0.498,0.428,0.154,0.27299999999999996,0.161,0.28900000000000003,0.8130000000000001,0.406,0.553,0.584,0.73,0.347,0.194,0.439,0.28800000000000003,0.561,0.22499999999999998,1.2550000000000001,0.771,0.13,0.644,0.078,0.27899999999999997,0.35100000000000003,0.525,0.735,0.893,0.719,1.375,0.42500000000000004,0.27999999999999997,0.255,0.109,0.411,0.11,0.172,0.698],
"text":"Percentage Of Sales"
}
]
}
]
},
}
}
render() {
return (
<div >
<ZingChart data={this.state.config}/>
</div>
);
}
}