0

I'm using this jsfiddle used in this post.

Everything works, however I can't find a way to remove the selection box underneath the "Compare to:" label, as indicated in the red box the picture.

enter image description here

Is there a way to hide or deactivate it?

I tried the following dataSetSelector settings but this only removed the "Compare to" text, not the selection box underneath: 

dataSetSelector: {
    selectText :"",
    compareText: "",
    comboBoxSelectText : "",
    position: "top"
}
Community
  • 1
  • 1
ranell
  • 683
  • 13
  • 29

1 Answers1

1

You can remove the compare selection using CSS:

/* hide the compare box */
.amcharts-compare-div {
  display: none;
}

/* 
  hide all <br> tags after the dropdown,
  if dataSetSelector position is set to top or bottom, 
  hide the select due to different markup
*/
.amcharts-data-set-select ~ br, .amcharts-data-set-select ~ select {
  display: none;
}

/* add a margin-bottom to space out the dropdown from the from/to text boxes */
.amcharts-data-set-select {
  margin-bottom: 1em;
}

You'll still need to set compareText to an empty string in the dataSetSelector to remove the Compare to: string.

Demo: http://codepen.io/team/amcharts/pen/e6cb53e53222eba93e80cf7e0be98987

You can find information on the class names set by AmCharts here: http://www.amcharts.com/tutorials/css-class-names/

Updated to also handle when the dataSetSelector's position is set to "top" or "bottom" due to different markup.

xorspark
  • 15,749
  • 2
  • 29
  • 38
  • Thanks a lot ! the issue is i've changed from left to top : dataSetSelector: { position: "top" } and do not work for this position. Why ? – ranell Sep 21 '16 at 12:59
  • 1
    Interesting. Seems like the chart is generating different markup for position top and bottom. I've updated my answer's demo and CSS. You need to add `.amcharts-data-set-select ~ select` to the rule that hides the
    tags.     – xorspark Sep 21 '16 at 13:32
  • Perfect ! Thanks a lot, it works :) i've additional question and I apologize. Is it possible to associate another action while changing the chart ? (example hide a div). I tried something like, but don't work : , $(function () { $(".amcharts-data-set-select").change(function(){ $("#div").hide(200); }); }); Thanks again. – ranell Sep 21 '16 at 14:12
  • 1
    Use the [dataSetSelected](http://docs.amcharts.com/3/javascriptstockchart/DataSetSelector#dataSetSelected) event. [Demo](http://codepen.io/team/amcharts/pen/2788581ec2cc7b5a0543c3f59000b2db?editors=0010) – xorspark Sep 21 '16 at 15:06
  • It Works ! Thanks :) ! – ranell Sep 21 '16 at 15:45