Search code examples
jquerygraphjqplot

how can i change the font colors inside a jqplot? actualy is black, wanna change to white

I just wanna write a pie plot that display the numbers inside the pie in white.

Also change the legends order to match the pie, or else.

This is how is now:

img-1

How I need:

img-2

 var plot1 = jQuery.jqplot ('gender_chart', [data], {
  seriesDefaults: {
    // Make this a pie chart.
    renderer: jQuery.jqplot.PieRenderer,
    rendererOptions: {
      // Put data labels on the pie slices.
      // By default, labels show the percentage of the slice.
      showDataLabels: true,
      dataLabelFormatString: '%#.2f%',
      textColor: 'white'
    }
  },

  seriesColors: ['#fb7601', '#365D98'],

  legend: {
    reverse:true,
    position: 'top',
    show:true,
    location: 'e',
    labels: {
      fontColor: 'white',
      textColor: 'white',
    },
  }
});
Solution

  • Change the label color / font using CSS. For pie chart, class is .jqplot-data-label.

    #gender_chart .jqplot-data-label {
  font-weight: bold;
  font-size: large;
  color: white;
}

    Change jqPlot label CSS as per your requirement via class.

    To remove decimal value remove line dataLabelFormatString: '%#.2f%' from your code.

    %#.2f instructs chart to display the value with two decimal places, and the % at the end adds a percent sign to the end of the value.

    Example:

    var data = [
  ['M', 59],
  ['F', 41],

];
var plot1 = jQuery.jqplot('gender_chart', [data], {
  seriesDefaults: {
    // Make this a pie chart.
    renderer: jQuery.jqplot.PieRenderer,
    rendererOptions: {
      // Put data labels on the pie slices.
      // By default, labels show the percentage of the slice.
      showDataLabels: true,
      textColor: 'white'
    }
  },
  legend: {
    reverse: true,
    position: 'top',
    show: true,
    location: 'e',
    labels: {
      fontColor: 'white',
      textColor: 'white',
    },
  },
  seriesColors: ['#fb7601', '#365D98']
});
    #gender_chart .jqplot-data-label {
  color: white;
  font-size: 35px;
  font-family: Garamond, serif;
}
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.pieRenderer.min.js"></script>
<div id="gender_chart" style="width:400px; height: 300px;"></div>